/* =============================================================================
SILVER LINES PAYMENTS — "High Plains Silver"
Custom stylesheet layered on Bootstrap 5.3
THE SYSTEM
----------
Story A refined western outfit. Tooled-leather charcoal carries the page,
brushed silver does the signalling, saddle tan warms the details.
The name is the motif: every ornament is a LINE — sunburst rays,
double rules, stitched borders, hairline brackets.
Blocks Full-bleed slabs, alternating:
leather -> silver band -> leather -> paper -> leather -> paper ->
bone -> leather -> silver -> leather.
Colour Charcoal (#16171a) is the ground. Silver is a MATERIAL, not a tint:
it always arrives as a brushed gradient with a highlight band, the
way a belt buckle catches light. Tan is the only warm note and it
appears at small sizes only — kickers, rules, stars, hovers.
Edges Zero radius, everywhere. This is cut steel and stamped leather.
Type Rye — wood type. Every statement, every figure, every
stamp. One weight, wide glyphs, an inline cut into
the strokes: set it large and open or not at all.
Bitter — a Clarendon slab. Sub-heads and anywhere a run of
headings gets dense enough that Rye would tire.
Archivo — everything a person has to read, click or fill in.
Motifs Drawn as inline SVG, tinted with currentColor so a horseshoe on
leather and the same horseshoe on paper are one asset.
Hover States invert or brighten the metal. No glow, no soft shadow.
CONTENTS
--------
01 Tokens
02 Base + typography
03 Blocks + shared parts
04 Western ornaments
05 Buttons + links
06 Header + navigation
07 Hero + consultation form
08 Trust strips
09 Solutions
10 Industries
11 Why choose us
12 Payment flow
13 Platform + system diagram
14 Statistics
15 Closing CTA
16 Footer
17 Legal pages
18 Responsive
19 Motion preferences
========================================================================== */
/* -- 01 Tokens ------------------------------------------------------------- */
:root {
/* the leather — pulled from the charcoal in the wordmark */
--ink: #16171a;
--ink-2: #1e2025;
--ink-3: #0e0f11;
--ink-soft: #24262c;
/* the lights */
--paper: #fbfaf7;
--bone: #efeae0;
/* the metal — the chrome from the mark, broken into usable stops */
--silver: #c2c7cd;
--silver-hi: #f4f6f8;
--silver-lo: #8d939b;
--silver-dk: #6b7178;
/* the leather trim — the one warm note on the page */
--tan: #c9954f;
--tan-hi: #e0b478;
--tan-deep: #7d5a2c;
/* brass — studs, badges and hardware only; never a surface larger than a fist */
--brass: linear-gradient(155deg, #f3d59e 0%, #d7a55f 34%, #9a6d35 62%, #e0b577 100%);
--brass-dk: #6e4f26;
/* the handbill stock the testimonials and the closing offer are printed on */
--handbill: #efe6d2;
/* torn top and bottom edges for any handbill: a ragged tile along each
end and a solid block through the middle, used as a mask */
--torn-edges:
url("data:image/svg+xml;charset=utf8,") left top / 22px 8px repeat-x,
linear-gradient(#000, #000) left 7px / 100% calc(100% - 14px) no-repeat,
url("data:image/svg+xml;charset=utf8,") left bottom / 22px 8px repeat-x;
/* text */
--gray: #5f6167;
--gray-2: #7b7d84;
--on-dark: rgba(238, 241, 244, .70);
--on-dark-dim: rgba(238, 241, 244, .46);
/* rules */
--line: #ddd7cb;
--line-strong: #c6bfae;
--line-dk: rgba(226, 232, 240, .15);
--line-dk-2: rgba(226, 232, 240, .28);
/* brushed metal, used as a fill wherever silver must read as a surface */
--plate: linear-gradient(180deg,
#fdfdfe 0%, #e4e8ec 18%, #c3c9d0 47%,
#9aa1a9 51%, #ccd2d8 58%, #eef1f4 82%, #d3d8dd 100%);
--plate-soft: linear-gradient(180deg, #f6f8f9 0%, #d9dee3 52%, #eef1f4 100%);
/* chrome for TYPE — needs harder stops than a surface does */
--chrome-type: linear-gradient(178deg,
#ffffff 4%, #dfe4e9 32%, #a8afb7 50%,
#eef2f5 62%, #b9c0c7 88%);
--serif: "Bitter", Clarendon, "Bookman Old Style", Georgia, serif;
--wood: "Rye", "Bitter", Georgia, serif;
--sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
/* the telegraph clerk's typewriter — labels on the wire form, nothing else */
--type: "Special Elite", "Courier New", Courier, monospace;
--ease: cubic-bezier(.2, .8, .3, 1);
--block: 132px;
}
/* -- 02 Base + typography --------------------------------------------------- */
*,
*::before,
*::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
body {
font-family: var(--sans);
font-size: 16.5px;
line-height: 1.62;
color: var(--ink);
background: var(--paper);
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.012em;
margin: 0;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
::selection {
background: var(--tan);
color: var(--ink);
}
/* THE WOOD TYPE. Rye carries every statement on the page — this is the
voice, not an accent. It comes with conditions: one weight only, wide
glyphs, and an inline detail cut into the strokes that closes up if the
type is set small or tight. So statements run a size smaller than a slab
would, with more leading and a touch of tracking to keep the inline open. */
h1,
.statement,
.statement--wide,
.figure {
font-family: var(--wood);
font-weight: 400;
letter-spacing: .012em;
line-height: 1.2;
}
h1 { font-size: clamp(1.95rem, 4.1vw, 3.35rem); }
.statement { font-size: clamp(1.7rem, 3.15vw, 2.55rem); }
.statement--wide {
font-size: clamp(1.55rem, 2.75vw, 2.25rem);
max-width: 22ch;
}
.block--ink .statement,
.block--ink .statement--wide,
.hero h1,
.closing .statement {
background: var(--chrome-type);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
.block--ink .statement,
.block--ink .statement--wide,
.hero h1,
.closing .statement {
color: var(--silver-hi);
background: none;
}
}
.body-lead {
font-size: 17.5px;
color: var(--gray);
line-height: 1.68;
}
.block--ink .body-lead,
.hero .body-lead { color: var(--on-dark); }
/* -- 03 Blocks + shared parts ----------------------------------------------- */
.block {
padding: var(--block) 0;
position: relative;
/* Watermarks are deliberately hung past the right edge, and Bootstrap's
g-5 rows sit a few pixels wider than the container padding allows. Both
were pushing the document's scroll width out past the viewport, which
body's overflow-x only papered over.
`clip` rather than `hidden` on purpose: hidden makes this a scroll
container and that would kill the sticky column in "Why ride with us". */
overflow-x: clip;
}
.block--tight { padding: 96px 0; }
.block--paper { background: var(--paper); }
.block--bone {
background: var(--bone);
/* the faintest woven tooth, so bone reads as paper stock and not flat fill */
background-image:
repeating-linear-gradient(90deg, rgba(125, 90, 44, .028) 0 1px, transparent 1px 4px),
repeating-linear-gradient(0deg, rgba(125, 90, 44, .022) 0 1px, transparent 1px 4px);
}
.block--ink {
background: var(--ink);
color: var(--paper);
background-image:
radial-gradient(120% 80% at 50% -10%, rgba(226, 232, 240, .055), transparent 62%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px);
}
/* The silver slab. A real plate: highlight band through the middle, hairline
catch at the top, shadow at the bottom, charcoal type sitting on it. */
/* Across a whole block the plate has to stay light or it reads as fog rather
than metal — the highlight band sits high and the rest holds near-white. */
.block--lime {
background: linear-gradient(180deg, #e6eaee 0%, #f7f9fa 26%, #eaeef1 68%, #dfe4e8 100%);
color: var(--ink);
border-top: 1px solid rgba(255, 255, 255, .85);
border-bottom: 1px solid var(--silver-dk);
}
.block--lime::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(22, 23, 26, .035) 0 1px, transparent 1px 3px);
pointer-events: none;
}
.block--lime > .container { position: relative; z-index: 1; }
/* Hairline seam so two adjoining leather slabs never merge into one */
.block--ink + .block--ink { border-top: 1px solid var(--line-dk); }
/* -- reveal on scroll (armed only once JS is confirmed) --------------------- */
.js .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal--d1 { transition-delay: .09s; }
.js .reveal--d2 { transition-delay: .18s; }
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
/* -- 04 Western ornaments ---------------------------------------------------- */
/* KICKER — the branded stamp. Wood type, tan, flanked by double rules.
Kept small on purpose: Rye is loud and only works in drops. */
.kicker {
font-family: var(--wood);
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12.5px;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--tan-deep);
margin-bottom: 22px;
line-height: 1;
}
.kicker::before,
.kicker::after {
content: "";
width: 26px;
height: 5px;
flex: none;
/* the double rule — two hairlines with air between them */
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
opacity: .55;
}
.kicker--light { color: var(--tan-hi); }
.kicker--dark { color: var(--tan-deep); }
/* MARK — the hero phrase, underscored with a tooled double rule.
The rule is a text-decoration rather than a positioned pseudo-element on
purpose: the headline is filled with `background-clip: text`, and any
inline-block descendant inside such an element gets the parent gradient
painted flat across its whole box in Chrome. A decoration paints with the
text instead, so it survives the chrome fill untouched. */
.mark-line { display: inline; }
.mark {
/* Bootstrap ships a `.mark` utility that paints a cream highlight box.
Same class name, entirely different intent — unset it before styling. */
background-color: transparent;
padding: 0;
color: inherit;
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: var(--tan);
/* 2px, not 3: at headline size a thicker stroke closes the gap and the
double rule collapses into one solid bar */
text-decoration-thickness: 2px;
text-underline-offset: 10px;
text-decoration-skip-ink: none;
}
/* STAR — the sheriff mark. Divider glyph and list bullet. */
.star {
color: var(--tan);
font-style: normal;
line-height: 1;
}
/* The sprite itself must not occupy a line box */
.sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* An inline motif, sized off the type it sits beside */
.mi {
width: 1em;
height: 1em;
flex: none;
vertical-align: -.14em;
}
/* WATERMARK — a motif blown up and sunk almost into the ground. It reads as
texture from across the room and as a horseshoe up close, which is the
point: it decorates without ever competing with the copy in front of it.
Kept out of the flow entirely, so it can never affect layout. */
.watermark {
position: absolute;
color: currentColor;
opacity: .055;
pointer-events: none;
z-index: 0;
}
.block--ink .watermark,
.closing .watermark { opacity: .07; }
/* Each one is hung off the block it decorates and pushed toward an edge, so
the middle of every section stays clear for the reading. */
.watermark--wheel {
top: 44px;
right: -70px;
width: 340px;
height: 340px;
color: var(--tan-deep);
opacity: .075;
}
/* ROPE — a lashed rule. Three strands of a twist tiled along the x axis;
tan is baked into the tile because rope is only ever tan here. */
.rope {
height: 11px;
background-repeat: repeat-x;
background-position: center;
background-image: url("data:image/svg+xml;charset=utf8,");
opacity: .45;
}
/* Ornamental section divider: rule — star — rule */
.orn {
display: flex;
align-items: center;
gap: 14px;
color: var(--tan);
}
.orn::before,
.orn::after {
content: "";
height: 5px;
flex: 1;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
opacity: .4;
}
.orn--light { color: var(--tan-hi); }
/* Corner brackets — a branded plaque. Geometry defined once, applied by class. */
.bracket { position: relative; }
.bracket::before,
.bracket::after {
content: "";
position: absolute;
width: 15px;
height: 15px;
pointer-events: none;
border-color: var(--tan);
opacity: .5;
}
.bracket::before {
top: 10px;
left: 10px;
border-top: 1px solid;
border-left: 1px solid;
}
.bracket::after {
bottom: 10px;
right: 10px;
border-bottom: 1px solid;
border-right: 1px solid;
}
/* -- 04b Photography ---------------------------------------------------------- */
/* These photographs arrive warm and golden. The page is charcoal, silver and
one thin note of tan — so every shot gets pulled back toward the palette
rather than being allowed to open a window onto a different one. Same
silver hairline as the cards, same tan brackets, same zero radius.
Every frame declares an aspect-ratio and a background. That is deliberate:
the box holds its shape before the image arrives, and if a file is ever
missing the layout does not collapse around it. */
.shot {
position: relative;
display: block;
margin: 0;
background: var(--ink-2);
border: 1px solid var(--silver-dk);
overflow: hidden;
}
.shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.84) contrast(1.05);
}
/* branded plaque corners, bright enough to read against a photograph */
.shot::before,
.shot::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border-color: var(--tan-hi);
opacity: .9;
z-index: 1;
pointer-events: none;
}
.shot::before {
top: 10px;
left: 10px;
border-top: 2px solid;
border-left: 2px solid;
}
.shot::after {
bottom: 10px;
right: 10px;
border-bottom: 2px solid;
border-right: 2px solid;
}
/* The engraved handbills are already muted and already sit on aged paper.
Left under the standard filter they go grey, so they keep their own
warmth and take a tan frame instead of a silver one. */
.shot--aged {
background: var(--bone);
border-color: var(--line-strong);
}
.shot--aged img { filter: saturate(.94) contrast(1.02); }
.shot--aged::before,
.shot--aged::after { border-color: var(--tan-deep); opacity: .8; }
/* The handbills and the map are whole compositions with their own borders and
lettering. Cropping one to fill a box would cut the artwork, so these three
are contained rather than covered — the frame letterboxes in the block's own
colour if the file's ratio is not quite what the box expects. */
.shot--poster,
.shot--rig,
.shot--map img { object-fit: contain; }
.shot--poster {
aspect-ratio: 3 / 4;
margin-top: 44px;
max-width: 380px;
}
.shot--poster img,
.shot--rig img { object-fit: contain; }
/* A photograph, run the full width of the copy column and cropped to 3:2 so
the left column ends level with the reasons beside it. Held at 38% down,
where both men's faces and the open ledger fall inside the crop. */
.shot--why {
aspect-ratio: 3 / 2;
margin-top: 44px;
max-width: 100%;
}
.shot--why img { object-position: center 38%; }
.shot--rig {
aspect-ratio: 7 / 10;
margin-top: 40px;
max-width: 340px;
}
/* The rig photo is a wide panorama — full column width at its own ratio,
covered rather than letterboxed. */
.shot--rig-wide {
aspect-ratio: 1584 / 672;
max-width: 100%;
}
.shot--rig-wide img { object-fit: cover; }
/* The map carries a caption row, so its height comes from its contents
rather than a ratio on the frame. Capped well short of the container:
the artwork is a small engraving, and run to full width it upscales past
its own resolution and goes soft. An inset plate, not a billboard. */
.shot--map {
margin: 68px auto 0;
max-width: 820px;
}
.shot--map img {
aspect-ratio: 16 / 10;
height: auto;
background: var(--bone);
}
/* The trail photo is a wide panorama — framed at its own ratio and given
more width than the engraving, so it fills the plate instead of letterboxing. */
.shot--trail { max-width: 1100px; }
.shot--trail img {
aspect-ratio: 1584 / 672;
object-fit: cover;
}
.shot--map figcaption {
padding: 14px 18px;
border-top: 1px solid var(--line-strong);
background: var(--bone);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--tan-deep);
text-align: center;
}
/* THE SCENE. One photograph running the full width of the page. A warm shot
dropped straight onto charcoal reads as a hole cut in the block, so the
veil darkens both edges and the foot back into the leather and lets the
middle stay bright. */
.scene {
position: relative;
background: var(--ink);
overflow: hidden;
}
.scene img {
display: block;
width: 100%;
height: clamp(300px, 40vw, 540px);
object-fit: cover;
object-position: center 42%;
filter: saturate(.82) contrast(1.06);
}
.scene-veil {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(22, 23, 26, .45) 0%, transparent 18%,
transparent 82%, rgba(22, 23, 26, .45) 100%),
linear-gradient(180deg,
rgba(22, 23, 26, .35) 0%, transparent 22%,
transparent 68%, rgba(22, 23, 26, .85) 100%);
}
.scene > .container {
position: absolute;
inset: auto 0 0 0;
padding-bottom: 34px;
}
.scene-cap {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
font-family: var(--wood);
font-size: clamp(13px, 1.5vw, 16px);
letter-spacing: .06em;
color: var(--silver-hi);
}
.scene-cap .mi { color: var(--tan); }
/* -- 05 Buttons + links ------------------------------------------------------ */
/* THE SILVER BUTTON. Reads as a stamped buckle: brushed plate, bright bevel
at the top, charcoal type. Works on leather and on paper, which is why it
is the only primary the page needs. */
.btn-lime {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--ink);
background: var(--plate);
padding: 17px 32px;
border: 1px solid var(--silver-dk);
border-top-color: #fff;
border-radius: 0;
transition: background .25s var(--ease), color .25s var(--ease),
border-color .25s var(--ease);
}
.btn-lime:hover,
.btn-lime:focus-visible {
background: var(--ink);
color: var(--silver-hi);
border-color: var(--ink);
}
.btn-sm-caps {
padding: 12px 22px;
font-size: 12px;
}
.btn-block-w {
display: flex;
width: 100%;
}
/* The charcoal button — used where silver would fight the surface beneath it
(inside the silver-framed consultation slab). */
.btn-ink {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 13.5px;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--silver-hi);
background: var(--ink);
padding: 18px 32px;
border: 1px solid var(--ink);
border-radius: 0;
transition: background .25s var(--ease), color .25s var(--ease),
border-color .25s var(--ease);
}
.btn-ink:hover,
.btn-ink:focus-visible {
background: var(--tan);
border-color: var(--tan);
color: var(--ink);
}
/* Hollow, for the secondary action on leather */
.btn-hollow-light {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 13.5px;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--silver-hi);
background: transparent;
padding: 17px 32px;
border: 1px solid var(--line-dk-2);
transition: border-color .25s var(--ease), color .25s var(--ease),
background .25s var(--ease);
}
.btn-hollow-light:hover,
.btn-hollow-light:focus-visible {
border-color: var(--tan);
color: var(--tan-hi);
background: rgba(201, 149, 79, .07);
}
/* The inline link. Arrow rides out on hover. */
.go {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--ink);
padding-bottom: 5px;
border-bottom: 1px solid var(--line-strong);
transition: color .22s var(--ease), border-color .22s var(--ease);
}
.go i { transition: transform .3s var(--ease); }
.go:hover,
.go:focus-visible {
color: var(--tan-deep);
border-bottom-color: var(--tan);
}
.go:hover i { transform: translateX(6px); }
.go--light {
color: var(--silver-hi);
border-bottom-color: var(--line-dk-2);
}
.go--light:hover,
.go--light:focus-visible {
color: var(--tan-hi);
border-bottom-color: var(--tan);
}
:focus-visible {
outline: 2px solid var(--tan);
outline-offset: 3px;
}
/* -- 06 Header + navigation --------------------------------------------------- */
.masthead {
position: sticky;
top: 0;
z-index: 1030;
background: var(--ink);
border-bottom: 1px solid var(--line-dk);
transition: padding .3s var(--ease), background .3s var(--ease);
}
/* The saddle-stitch: a dashed tan hairline under the masthead, the detail
that says "western" before anything else on the page has loaded. */
.masthead::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: repeating-linear-gradient(90deg,
var(--tan) 0 8px, transparent 8px 16px);
opacity: .5;
}
.masthead-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 20px 0;
transition: padding .3s var(--ease);
}
.masthead.is-compact .masthead-inner { padding: 12px 0; }
.masthead.is-compact { background: rgba(14, 15, 17, .96); backdrop-filter: blur(8px); }
/* LOGO — the real wordmark now carries this, so the lockup is just the image
plus enough box for it to breathe. */
.logo {
display: inline-flex;
align-items: center;
flex: none;
}
.logo-img {
display: block;
height: 40px;
width: auto;
transition: height .3s var(--ease);
}
.masthead.is-compact .logo-img { height: 32px; }
.logo-img--sm { height: 34px; }
/* Retired lockup parts, kept harmless for any page still emitting them */
.logo-mark { display: none; }
.logo-type {
font-family: var(--serif);
font-weight: 700;
font-size: 20px;
letter-spacing: -.01em;
color: var(--silver-hi);
}
.top-nav {
align-items: center;
gap: 6px;
margin-left: auto;
}
.top-nav .nav-link,
.top-nav .dropdown-toggle {
font-size: 13px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--on-dark);
background: none;
border: 0;
padding: 10px 15px;
transition: color .2s var(--ease);
}
.top-nav .nav-link:hover,
.top-nav .dropdown-toggle:hover,
.top-nav .nav-link:focus-visible {
color: var(--tan-hi);
}
.dropdown-menu {
border: 1px solid var(--line-dk-2);
border-radius: 0;
background: var(--ink-2);
padding: 8px;
margin-top: 12px;
min-width: 244px;
}
.dropdown-item {
font-size: 14px;
font-weight: 500;
color: var(--on-dark);
padding: 11px 14px;
border-radius: 0;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--ink-soft);
color: var(--tan-hi);
}
.masthead-actions {
display: flex;
align-items: center;
gap: 18px;
flex: none;
}
.masthead-phone {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: .03em;
color: var(--silver-hi);
transition: color .2s var(--ease);
}
.masthead-phone i { color: var(--tan); }
.masthead-phone:hover { color: var(--tan-hi); }
.menu-btn {
background: none;
border: 1px solid var(--line-dk-2);
color: var(--silver-hi);
font-size: 22px;
line-height: 1;
padding: 8px 12px;
border-radius: 0;
}
.menu-btn:hover {
border-color: var(--tan);
color: var(--tan-hi);
}
/* -- mobile drawer -- */
.offcanvas {
background: var(--paper);
border-left: 1px solid var(--line);
}
.offcanvas-header {
padding: 20px 26px;
border-bottom: 1px solid var(--line);
}
.offcanvas-body { padding: 26px; }
.drawer-nav {
list-style: none;
margin: 0 0 32px;
padding: 0;
}
.drawer-nav li + li { border-top: 1px solid var(--line); }
.drawer-nav a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 17px 0;
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
color: var(--ink);
transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.drawer-nav a i { color: var(--tan); font-size: 15px; }
.drawer-nav a:hover {
color: var(--tan-deep);
padding-left: 6px;
}
.drawer-foot {
border-top: 1px solid var(--line);
padding-top: 26px;
}
.drawer-phone {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 20px;
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
.drawer-phone i { color: var(--tan-deep); }
/* -- 07 Hero + consultation form ---------------------------------------------- */
.hero {
position: relative;
z-index: 1;
/* Photo under a leather-dark scrim — heaviest on the left where the
headline sits, easing off to the right so the canyon still shows. */
background:
/* Held dark across the left 40% — the Express Cargo sign and the wagon
sit right behind the headline and copy in this shot — then opened up
quickly so the counter scene on the right stays bright. */
linear-gradient(90deg, rgba(22, 23, 26, .92) 0%, rgba(22, 23, 26, .86) 42%, rgba(22, 23, 26, .5) 60%, rgba(22, 23, 26, .12) 100%),
/* the sky in this shot is near white behind the top of the headline */
linear-gradient(180deg, rgba(22, 23, 26, .45) 0%, transparent 45%, transparent 70%, rgba(22, 23, 26, .45) 100%),
url("../images/Approved_at_the_counter.webp") center / cover no-repeat,
var(--ink);
color: var(--paper);
overflow: hidden;
}
/* Clip only sideways. `hidden` also clipped the foot of the consultation
form, which is meant to hang 56px down onto the silver band — so the lock
line under the form was never seen. The tumbleweed and dust only ever
leave by the sides, so the x axis is all that needs holding in. */
@supports (overflow: clip) {
.hero {
overflow: visible;
overflow-x: clip;
}
}
@media (max-width: 991.98px) {
.hero {
background:
linear-gradient(180deg, rgba(22, 23, 26, .6) 0%, rgba(22, 23, 26, .75) 100%),
url("../images/Approved_at_the_counter.webp") 30% center / cover no-repeat,
var(--ink);
}
}
/* THE SILVER LINES. A sunburst of hairline rays behind the headline — the
oldest western poster device there is, and a literal read of the name.
The convergence point is parked well above the masthead: a visible centre
reads as a dark star sitting in the middle of the copy. What belongs on
the page is the fan, not the origin. */
.hero::before {
content: "";
position: absolute;
bottom: -34%;
left: 50%;
width: 2000px;
aspect-ratio: 1;
transform: translateX(-50%) rotate(180deg);
background: repeating-conic-gradient(from 0deg,
rgba(226, 232, 240, .085) 0deg 1.4deg,
transparent 1.4deg 5.6deg);
-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 12%, rgba(0, 0, 0, .8) 40%, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, transparent 12%, rgba(0, 0, 0, .8) 40%, transparent 72%);
pointer-events: none;
}
/* Sunset behind the ridge. This has a second job beyond atmosphere: a
silhouette on a flat ground is only as readable as the sky behind it, and
leather-on-leather gives almost nothing. The glow peaks just above where
the mesas sit, so the skyline has something to be dark against. */
.hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 58%;
background: linear-gradient(180deg,
transparent 0%,
rgba(201, 149, 79, .05) 42%,
rgba(201, 149, 79, .17) 72%,
rgba(201, 149, 79, .09) 100%);
pointer-events: none;
}
/* THE RIDGE. Two planes of silhouette across the foot of the hero: mesas
set back, then the near ground with its saguaro. Both sit above the rays
and below the copy, and both are cut from the leather itself rather than
a new colour — depth here is a shift in value, not in hue. */
.ridge {
position: absolute;
inset: auto 0 -1px 0;
width: 100%;
height: clamp(120px, 17vw, 210px);
z-index: 1;
pointer-events: none;
}
.ridge-far { fill: #0d0e11; }
/* near plane reads as nearer by being flatter and blacker, not by changing hue */
.ridge-near {
fill: #030304;
color: #030304;
}
/* With the photo in place the rays and sunset glow only muddy it. */
.hero::before,
.hero::after { display: none; }
.hero > .container { position: relative; z-index: 2; }
.hero-col .kicker,
.hero-copy { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
/* Not text-shadow on the headline: its chrome is a background clipped to the
glyphs, and a text-shadow paints OVER that background, greying the letters
into mud. A drop-shadow filter works on the finished result instead, so
the chrome stays bright and the shadow sits behind it. */
.hero-col h1 { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .7)); }
/* DUST. Specks of grit hanging in the light through the canyon mouth. Two
tiled layers drifting at different speeds give it depth; the mask keeps
it to the sunlit right-hand side, clear of the headline. Moved with a
transform on an oversized box — exactly one tile per loop, so the seam
never shows — rather than by animating background-position, which would
repaint the whole hero every frame. */
.hero-dust {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 18%, rgba(0, 0, 0, .55) 50%, #000 78%);
mask-image: linear-gradient(90deg, transparent 18%, rgba(0, 0, 0, .55) 50%, #000 78%);
}
.hero-dust::before,
.hero-dust::after {
content: "";
position: absolute;
top: 0;
left: -380px;
width: calc(100% + 380px);
height: calc(100% + 280px);
background-image:
radial-gradient(1.6px 1.6px at 12% 22%, rgba(240, 226, 200, .75), transparent),
radial-gradient(1.2px 1.2px at 38% 64%, rgba(240, 226, 200, .6), transparent),
radial-gradient(2px 2px at 71% 31%, rgba(240, 226, 200, .5), transparent),
radial-gradient(1.1px 1.1px at 86% 78%, rgba(240, 226, 200, .7), transparent),
radial-gradient(1.4px 1.4px at 55% 8%, rgba(240, 226, 200, .55), transparent);
background-size: 380px 280px;
opacity: .55;
animation: dust-drift 46s linear infinite;
}
/* the near layer: bigger tile, fewer specks, faster */
.hero-dust::after {
left: -380px;
background-size: 380px 280px;
background-image:
radial-gradient(2.4px 2.4px at 24% 48%, rgba(240, 226, 200, .5), transparent),
radial-gradient(1.8px 1.8px at 78% 14%, rgba(240, 226, 200, .45), transparent);
opacity: .5;
animation-duration: 27s;
}
@keyframes dust-drift {
to { transform: translate(380px, -280px); }
}
/* TUMBLEWEED. Rolls along the ground line of the ridge, then waits well off
screen for most of the loop so it reads as an occasional passer-by, not a
screensaver. Three layers because three motions: across, hop, spin. */
.tumbleweed {
position: absolute;
left: 0;
/* the near plane's top edge sits 46/190 of the way up the ridge */
bottom: calc(clamp(120px, 17vw, 210px) * .242 - 3px);
width: 38px;
height: 38px;
z-index: 1;
color: #9a7a52;
opacity: .8;
pointer-events: none;
transform: translateX(-60px);
animation: tumble-across 26s linear infinite 4s;
}
.tumbleweed-hop {
display: block;
width: 100%;
height: 100%;
animation: tumble-hop .9s cubic-bezier(.3, 0, .7, 1) infinite;
}
.tumbleweed-ball {
display: block;
width: 100%;
height: 100%;
animation: tumble-spin 1.3s linear infinite;
}
@keyframes tumble-across {
0% { transform: translateX(-60px); }
42% { transform: translateX(calc(100vw + 60px)); }
100% { transform: translateX(calc(100vw + 60px)); }
}
@keyframes tumble-hop {
0%, 100% { transform: translateY(0); }
45% { transform: translateY(-14px); }
}
@keyframes tumble-spin {
to { transform: rotate(360deg); }
}
/* -- TRIAL: the drawn dusk sky (html.hero-drawn, set by ?hero=drawn) ---------
Everything here is inert unless the trial class is on the root, so the
photographic hero is untouched. Delete this block and the .hero-sky markup
if the photo wins; delete the photo rules if this does. */
.hero-sky { display: none; }
.hero-drawn .hero {
/* Dusk, top to bottom: night charcoal where the headline sits, warming
through leather brown to a band of saddle-tan light on the horizon,
exactly where the mesas need something to be dark against. */
background: linear-gradient(180deg,
#0e0f12 0%, #14151a 32%, #1c1b1c 52%,
#33271e 68%, #5e4229 81%, #8a6337 90%, #6a4a2c 100%);
}
.hero-drawn .hero-sky {
display: block;
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* set by script.js as the page scrolls, for the parallax */
--scroll: 0px;
}
/* early stars, only in the dark upper sky */
.hero-drawn .hero-sky::after {
content: "";
position: absolute;
inset: 0 0 45% 0;
background-image:
radial-gradient(1.2px 1.2px at 8% 18%, rgba(244, 246, 248, .7), transparent),
radial-gradient(1px 1px at 23% 9%, rgba(244, 246, 248, .5), transparent),
radial-gradient(1.4px 1.4px at 41% 26%, rgba(244, 246, 248, .55), transparent),
radial-gradient(1px 1px at 57% 12%, rgba(244, 246, 248, .6), transparent),
radial-gradient(1.3px 1.3px at 68% 31%, rgba(244, 246, 248, .45), transparent),
radial-gradient(1px 1px at 79% 7%, rgba(244, 246, 248, .65), transparent),
radial-gradient(1.5px 1.5px at 92% 22%, rgba(244, 246, 248, .5), transparent),
radial-gradient(1px 1px at 15% 38%, rgba(244, 246, 248, .35), transparent),
radial-gradient(1.1px 1.1px at 86% 40%, rgba(244, 246, 248, .35), transparent);
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
animation: stars-twinkle 7s ease-in-out infinite alternate;
}
@keyframes stars-twinkle {
from { opacity: .55; }
to { opacity: 1; }
}
/* THE SUN, half down behind the horizon, between the copy and the form.
The same repeating-conic sunburst the page opened with now actually has a
sun to come from. */
.hero-drawn .hero-sun {
position: absolute;
left: 52%;
/* high enough that the top half of the disc clears the mesa line */
bottom: calc(clamp(120px, 17vw, 210px) * .66);
width: 380px;
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, calc(50% + var(--scroll) * .3));
background: radial-gradient(circle,
rgba(246, 214, 160, .95) 0 15%,
rgba(224, 180, 120, .55) 19%,
rgba(201, 149, 79, .22) 36%,
rgba(201, 149, 79, .07) 56%,
transparent 70%);
}
.hero-drawn .hero-sun::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 2100px;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg,
rgba(224, 180, 120, .07) 0deg 1.3deg,
transparent 1.3deg 5.2deg);
-webkit-mask-image: radial-gradient(circle, transparent 7%, #000 16%, rgba(0, 0, 0, .5) 34%, transparent 62%);
mask-image: radial-gradient(circle, transparent 7%, #000 16%, rgba(0, 0, 0, .5) 34%, transparent 62%);
animation: rays-turn 180s linear infinite;
}
@keyframes rays-turn {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* THE GUILLOCHE. A banknote rosette engraved in silver hairline, centred
behind the headline and turning very slowly. Low enough in opacity to be
texture under the copy, bright enough to catch the eye in the gaps. */
.hero-drawn .guilloche-wrap {
position: absolute;
left: 29%;
top: 47%;
width: min(820px, 95vw);
aspect-ratio: 1;
transform: translate(-50%, calc(-50% + var(--scroll) * .12));
}
.guilloche {
display: block;
width: 100%;
height: 100%;
color: rgba(226, 232, 240, .1);
will-change: transform;
animation: guilloche-turn 240s linear infinite;
}
.guilloche path {
fill: none;
stroke: currentColor;
stroke-width: .75;
vector-effect: non-scaling-stroke;
}
/* the inner and outer families pick up a little tan, like a two-colour note */
.guilloche .g-inner,
.guilloche .g-outer { stroke: rgba(224, 180, 120, .13); }
.guilloche .g-inner { stroke: rgba(224, 180, 120, .09); }
@keyframes guilloche-turn {
to { transform: rotate(360deg); }
}
/* THE MESAS. Two ranges behind the existing ridge, lighter and warmer the
further off they are — aerial perspective in three values. They drift a
little on scroll so the planes separate. */
.hero-drawn .hero-mesas {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
/* kept low: set taller, the ranges walled off the sun and crowded the buttons */
height: clamp(170px, 18vw, 270px);
transform: translateY(calc(var(--scroll) * .14));
}
.hero-mesas .mesa-far { fill: #3a2c21; }
.hero-mesas .mesa-mid { fill: #211b17; }
/* the dust now sits in the sunlight in the middle, not in a photo's doorway */
.hero-drawn .hero-dust {
-webkit-mask-image: radial-gradient(60% 70% at 50% 85%, #000, transparent 75%);
mask-image: radial-gradient(60% 70% at 50% 85%, #000, transparent 75%);
}
/* the scrim's job is done by the sky itself, so the copy needs less shadow */
.hero-drawn .hero-col .kicker,
.hero-drawn .hero-copy { text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.hero-drawn .hero-col h1 { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); }
/* Stacked, the hero runs a full form taller, so a sky graded over its whole
height would put the dusk and the sun down behind the form. The glow moves
up behind the buttons instead, and the sun and ranges stand down. */
@media (max-width: 991.98px) {
.hero-drawn .hero {
background:
radial-gradient(90% 360px at 60% 560px, rgba(201, 149, 79, .2), transparent 70%),
linear-gradient(180deg, #0e0f12 0%, #16171a 100%);
}
.hero-drawn .hero-sun,
.hero-drawn .hero-mesas { display: none; }
.hero-drawn .guilloche-wrap { left: 50%; top: 330px; }
}
.hero-grid { padding: 96px 0 88px; }
@media (min-width: 992px) {
/* The bottom gap moves off the row and onto the left column, so the form
column's negative margin IS the overhang — no arithmetic against the
row's padding. */
.hero-grid { padding-bottom: 0; }
.hero-col {
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: 92px;
}
/* the plaque drops out of the leather and rests on the silver band */
.hero-form-col {
z-index: 3;
margin-bottom: -56px;
}
}
.hero h1 { margin-bottom: 30px; }
.hero-copy {
font-size: 18px;
line-height: 1.68;
color: var(--on-dark);
max-width: 52ch;
margin-bottom: 38px;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.hero-form-col { position: relative; }
/* Framed in silver so it reads as a plaque nailed to the leather */
/* THE WIRE FORM. A telegraph blank: typewriter labels on cream stock, and a
brass corner cap on each corner like the guards on a clerk's ledger box. */
.quote-slab {
position: relative;
background: #fdfaf2;
border: 1px solid var(--silver-dk);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
/* four brass L-caps in one pseudo-element: eight bars, two per corner */
.quote-slab::after {
content: "";
position: absolute;
inset: -4px;
z-index: 2;
pointer-events: none;
--cap: #c79a5a;
background:
linear-gradient(var(--cap), var(--cap)) left top / 26px 4px,
linear-gradient(var(--cap), var(--cap)) left top / 4px 26px,
linear-gradient(var(--cap), var(--cap)) right top / 26px 4px,
linear-gradient(var(--cap), var(--cap)) right top / 4px 26px,
linear-gradient(var(--cap), var(--cap)) left bottom / 26px 4px,
linear-gradient(var(--cap), var(--cap)) left bottom / 4px 26px,
linear-gradient(var(--cap), var(--cap)) right bottom / 26px 4px,
linear-gradient(var(--cap), var(--cap)) right bottom / 4px 26px;
background-repeat: no-repeat;
}
.wire-office {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--type);
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tan-hi);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(224, 180, 120, .35);
}
.wire-office .mi { font-size: 10px; }
.quote-head {
background: var(--ink-2);
color: var(--paper);
padding: 28px 32px 24px;
border-bottom: 1px solid var(--tan);
position: relative;
}
.quote-head h3 {
font-size: 21px;
color: var(--silver-hi);
margin-bottom: 10px;
}
.quote-head p {
font-size: 13.5px;
line-height: 1.6;
color: var(--on-dark);
margin: 0;
}
.quote-body { padding: 30px 32px 26px; }
.form-label {
font-family: var(--type);
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
color: #4f4a42;
margin-bottom: 7px;
}
.form-control,
.form-select {
border: 1px solid var(--line-strong);
border-radius: 0;
padding: 12px 14px;
font-size: 15px;
color: var(--ink);
background-color: #fff;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:focus,
.form-select:focus {
border-color: var(--tan);
box-shadow: inset 0 -2px 0 var(--tan);
outline: none;
}
.form-control.is-invalid,
.form-select.is-invalid {
border-color: #a8321f;
background-image: none;
box-shadow: inset 0 -2px 0 #a8321f;
}
.invalid-feedback {
font-size: 12px;
font-weight: 600;
color: #a8321f;
}
.field-trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-consent {
font-size: 12px;
color: var(--gray-2);
margin: 18px 0 0;
text-align: center;
}
.quote-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 32px;
border-top: 1px solid var(--line);
background: var(--bone);
font-size: 12px;
color: var(--gray);
}
.quote-foot i { color: var(--tan-deep); }
.form-done { text-align: center; padding: 24px 0 12px; }
/* The clerk's rubber stamp, brought down hard on the blank once it is sent. */
.form-done-stamp {
display: inline-block;
font-family: var(--wood);
font-size: 19px;
letter-spacing: .1em;
text-transform: uppercase;
color: #9b3b22;
padding: 9px 18px 7px;
border: 3px double #9b3b22;
margin: 6px 0 24px;
transform: rotate(-7deg);
opacity: .9;
animation: stamp-down .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes stamp-down {
0% { opacity: 0; transform: rotate(-16deg) scale(2.3); }
60% { opacity: .95; transform: rotate(-6deg) scale(.94); }
100% { opacity: .9; transform: rotate(-7deg) scale(1); }
}
.form-done h3 { font-size: 21px; margin-bottom: 12px; }
.form-done p { font-size: 14.5px; color: var(--gray); }
.form-done a {
color: var(--tan-deep);
font-weight: 700;
text-decoration: underline;
}
/* -- 08 Trust strips ----------------------------------------------------------- */
/* The one trust band under the hero — brushed silver, charcoal type, and the
saddle-stitch along its foot where it meets the paper below. It used to be
two strips saying the same three things twice; this is both, said once. */
.hero-band {
background: var(--plate-soft);
border-top: 1px solid rgba(255, 255, 255, .85);
border-bottom: 1px solid var(--silver-dk);
padding: 30px 0 34px;
position: relative;
z-index: 0;
}
.hero-band::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 9px;
height: 1px;
background: repeating-linear-gradient(90deg, var(--tan-deep) 0 7px, transparent 7px 15px);
opacity: .45;
}
/* Three across inside the seven columns the form leaves free — five points
fold into two tidy rows rather than a ragged wrap. */
.band-items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 28px;
}
.band-item {
display: flex;
align-items: center;
gap: 11px;
font-size: 12px;
font-weight: 800;
letter-spacing: .07em;
line-height: 1.35;
text-transform: uppercase;
color: var(--ink);
}
.band-icon {
width: 22px;
height: 22px;
color: var(--tan-deep);
flex: none;
}
/* Tablet up: columns only as wide as their labels, so nothing wraps and the
two rows line up on shared column edges rather than stretching to fill. */
@media (min-width: 768px) {
.band-items {
grid-template-columns: repeat(3, max-content);
gap: 18px clamp(28px, 4vw, 52px);
}
.band-item { white-space: nowrap; }
}
/* The narrow desktop band (992–1199) has the least room beside the form —
a third column ran in under the form's foot, so it drops to two. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.band-items {
grid-template-columns: repeat(2, max-content);
gap: 14px 40px;
}
}
/* -- 09 Solutions --------------------------------------------------------------- */
/* The card. A stamped plate: hairline frame, tan corner brackets, an index
number set in wood type at the top. */
/* Column mates stretch to the tallest card, which used to leave the short
ones with a pool of dead space under the link. Flex column plus an auto
top margin on the link drops it to the floor of whatever height the card
is given, so the ragged edge reads as a deliberate baseline. */
/* SADDLEBAG STITCH. A saddler's running stitch sewn 9px in from the edge;
it pulls tighter (darker) when the card is picked up. Drawn with an inset
outline so it costs no layout and never collides with the content. */
.card-flat {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fff;
border: 1px solid var(--line);
outline: 1.5px dashed rgba(125, 90, 44, .3);
outline-offset: -10px;
padding: 38px 34px 34px;
transition: border-color .3s var(--ease), transform .3s var(--ease),
outline-color .3s var(--ease);
}
.card-flat > .go { margin-top: auto; }
.card-flat:hover {
border-color: var(--silver-dk);
outline-color: rgba(125, 90, 44, .65);
transform: translateY(-3px);
}
/* THE STORE TAG. The index number as a general-store price tag: notched
point, a punched string hole, "No." in front of the count. */
.card-index {
--tag: var(--tan-deep);
--tag-hole: #fff;
display: inline-block;
font-family: var(--wood);
font-size: 12.5px;
letter-spacing: .12em;
line-height: 1;
color: #f7efe1;
padding: 7px 13px 6px 22px;
background:
radial-gradient(circle at 10px 50%, var(--tag-hole) 0 2.6px, transparent 3.2px),
var(--tag);
clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
margin-bottom: 18px;
}
.card-index::before { content: "No. "; }
/* The product's mark, stamped in the top corner opposite the tag. It sits
inside the stitch line, and warms up when the card is picked up. */
.card-icon {
position: absolute;
top: 28px;
right: 30px;
width: 46px;
height: 46px;
color: var(--tan-deep);
opacity: .7;
transition: opacity .3s var(--ease), transform .3s var(--ease);
pointer-events: none;
}
.card-flat:hover .card-icon {
opacity: 1;
transform: rotate(-6deg);
}
.card-flat--ink .card-icon { color: var(--tan-hi); }
/* In the wide card the icon belongs to the copy column, not the card: hung
off the whole card it landed on the tick list in the right-hand column. */
.card-wide-lead { position: relative; }
.card-flat--wide .card-icon {
top: 0;
right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
.card-flat h3 {
font-size: 22px;
margin-bottom: 14px;
}
.card-flat p {
font-size: 15px;
color: var(--gray);
margin-bottom: 22px;
}
/* The leather variant — the lead card in the grid */
.card-flat--ink {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
background-image: radial-gradient(120% 90% at 0% 0%, rgba(226, 232, 240, .06), transparent 60%);
}
.card-flat--ink h3 {
background: var(--chrome-type);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-flat--ink p { color: var(--on-dark); }
.card-flat--ink { outline-color: rgba(224, 180, 120, .32); }
.card-flat--ink .card-index {
--tag: var(--tan);
--tag-hole: var(--ink);
color: var(--ink);
}
.card-flat--ink:hover {
border-color: var(--tan);
outline-color: rgba(224, 180, 120, .7);
}
/* The wide card holds a Bootstrap row, which needs the full width back */
.card-flat--wide {
padding: 44px 40px;
display: block;
}
/* Spec and tick lists — star bullets rather than the stock check */
.spec-list,
.tick-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.spec-list li,
.tick-list li {
display: flex;
gap: 12px;
font-size: 14.5px;
line-height: 1.55;
padding: 11px 0;
border-top: 1px solid var(--line);
}
.spec-list li { border-top-color: var(--line-dk); color: var(--on-dark); }
.tick-list li { color: var(--gray); }
/* horseshoe bullets in place of the stock tick */
.spec-list li .mi,
.tick-list li .mi {
color: var(--tan);
font-size: 17px;
margin-top: 2px;
vertical-align: 0;
}
.tick-list li .mi { color: var(--tan-deep); }
.tick-list { margin-bottom: 0; }
/* -- 10 Industries -------------------------------------------------------------- */
.trade-feature {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--ink-2);
border: 1px solid var(--line-dk-2);
padding: 40px 36px;
position: relative;
}
/* the tag rack takes the slack when the column stretches past the copy */
.trade-feature .trade-tags { margin-top: auto; }
/* Next to seven hanging signs the column runs far taller than the feature's
copy, and stretched to match it left a hollow slab. On desktop it keeps its
own height instead and rides down the column while the signs scroll past. */
@media (min-width: 992px) {
.trade-feature {
height: auto;
position: sticky;
top: 116px;
}
.trade-feature .trade-tags { margin-top: 8px; }
}
.trade-feature::before,
.trade-feature::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-color: var(--tan);
opacity: .6;
}
.trade-feature::before {
top: 10px;
left: 10px;
border-top: 1px solid;
border-left: 1px solid;
}
.trade-feature::after {
bottom: 10px;
right: 10px;
border-bottom: 1px solid;
border-right: 1px solid;
}
.trade-feature .kicker { color: var(--tan-hi); }
.trade-feature h3 {
font-family: var(--wood);
font-weight: 400;
font-size: 25px;
line-height: 1.24;
letter-spacing: .012em;
margin-bottom: 16px;
background: var(--chrome-type);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.trade-feature p {
font-size: 15px;
color: var(--on-dark);
margin-bottom: 24px;
}
.trade-feature .go { color: var(--silver-hi); border-bottom-color: var(--line-dk-2); }
.trade-feature .go:hover { color: var(--tan-hi); border-bottom-color: var(--tan); }
.trade-tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 26px;
padding: 0;
}
.trade-tags li {
font-size: 11.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--on-dark);
border: 1px solid var(--line-dk-2);
padding: 7px 11px;
}
/* THE TRADE SIGNS. Each territory is a weathered plank hung off a rail on two
short chains, the way a shingle hangs over a boardwalk. Pick one up and it
swings on its chains, then settles. */
.trade-list {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 20px;
/* the rail the signs hang from */
border-top: 3px solid #2e2419;
}
.trade-row {
position: relative;
display: flex;
align-items: flex-start;
gap: 22px;
padding: 20px 22px 20px 20px;
border: 1px solid #120d08;
border-top-color: #5a452d;
/* grain: long streaks along the plank over two tones of old pine */
background:
repeating-linear-gradient(180deg,
rgba(0, 0, 0, .16) 0 1px, transparent 1px 7px,
rgba(255, 230, 190, .035) 7px 8px, transparent 8px 13px),
linear-gradient(180deg, #3b2c1e 0%, #2f2317 55%, #281d13 100%);
box-shadow: inset 0 0 0 1px rgba(255, 220, 170, .05), 0 10px 18px -12px rgba(0, 0, 0, .8);
transform-origin: 50% -24px;
transition: border-color .25s var(--ease);
}
/* the chains, one link pattern tiled up from each end of the plank */
.trade-row::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -21px;
height: 20px;
background:
repeating-linear-gradient(180deg, var(--silver-lo) 0 5px, transparent 5px 8px) 32px 0 / 2px 100% no-repeat,
repeating-linear-gradient(180deg, var(--silver-lo) 0 5px, transparent 5px 8px) calc(100% - 32px) 0 / 2px 100% no-repeat;
opacity: .7;
pointer-events: none;
}
/* the two nail heads the chains are fixed to */
.trade-row::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 5px;
height: 7px;
background:
radial-gradient(circle, #d9b27a 0 2px, #6e4f26 2.6px, transparent 3.4px) 29px 0 / 8px 7px no-repeat,
radial-gradient(circle, #d9b27a 0 2px, #6e4f26 2.6px, transparent 3.4px) calc(100% - 29px) 0 / 8px 7px no-repeat;
pointer-events: none;
}
.trade-row:hover,
.trade-row:focus-visible {
border-color: var(--tan-deep);
animation: sign-swing 1.1s var(--ease);
}
@keyframes sign-swing {
0% { transform: rotate(0); }
22% { transform: rotate(1.6deg); }
48% { transform: rotate(-1.1deg); }
72% { transform: rotate(.5deg); }
100% { transform: rotate(0); }
}
.trade-row-no {
font-family: var(--wood);
font-size: 13px;
letter-spacing: .1em;
color: var(--tan-hi);
padding-top: 5px;
flex: none;
width: 34px;
}
.trade-row-text { flex: 1; }
.trade-row-text h4 {
font-size: 19px;
color: var(--silver-hi);
margin-bottom: 6px;
}
.trade-row-text p {
font-size: 14.5px;
color: var(--on-dark);
margin: 0;
}
.trade-row-go {
color: var(--on-dark-dim);
font-size: 16px;
flex: none;
margin-top: 5px;
transition: transform .3s var(--ease), color .3s var(--ease);
}
.trade-row:hover .trade-row-go {
color: var(--tan);
transform: translateX(6px);
}
/* -- 11 Why choose us ------------------------------------------------------------ */
.pin { position: sticky; top: 116px; }
/* SIX REASONS, TWO UP — as railroad freight tickets. Bone card stock with
its four corners punched out, a saddle stitch sewn inside the edge, the
reason's mark struck on a round brass medallion, and the count set large in
wood type and sunk into the stock behind. Picked up, the ticket turns over
to its leather side. */
.reason-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.reason {
--notch: 11px;
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: 30px 28px 28px;
overflow: hidden;
background:
radial-gradient(120% 90% at 100% 0%, rgba(201, 149, 79, .12), transparent 55%),
repeating-linear-gradient(90deg, rgba(125, 90, 44, .03) 0 1px, transparent 1px 4px),
var(--bone);
transition: background-color .35s var(--ease), transform .35s var(--ease);
/* the punched corners */
-webkit-mask:
radial-gradient(circle var(--notch) at top left, transparent 97%, #000) top left / 51% 51% no-repeat,
radial-gradient(circle var(--notch) at top right, transparent 97%, #000) top right / 51% 51% no-repeat,
radial-gradient(circle var(--notch) at bottom left, transparent 97%, #000) bottom left / 51% 51% no-repeat,
radial-gradient(circle var(--notch) at bottom right, transparent 97%, #000) bottom right / 51% 51% no-repeat;
mask:
radial-gradient(circle var(--notch) at top left, transparent 97%, #000) top left / 51% 51% no-repeat,
radial-gradient(circle var(--notch) at top right, transparent 97%, #000) top right / 51% 51% no-repeat,
radial-gradient(circle var(--notch) at bottom left, transparent 97%, #000) bottom left / 51% 51% no-repeat,
radial-gradient(circle var(--notch) at bottom right, transparent 97%, #000) bottom right / 51% 51% no-repeat;
}
/* the stitch, sewn in far enough to clear the punched corners */
.reason::before {
content: "";
position: absolute;
inset: 13px;
z-index: 2;
border: 1.5px dashed rgba(125, 90, 44, .35);
pointer-events: none;
transition: border-color .35s var(--ease);
}
/* the leather side, faded in rather than swapped so the turn is smooth */
.reason::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(120% 90% at 100% 0%, rgba(201, 149, 79, .16), transparent 55%),
var(--ink);
opacity: 0;
transition: opacity .35s var(--ease);
pointer-events: none;
}
.reason > * { position: relative; z-index: 1; }
.reason:hover { transform: translateY(-4px); }
.reason:hover::after { opacity: 1; }
.reason:hover::before { border-color: rgba(224, 180, 120, .45); }
/* the brass medallion the mark is struck on */
.reason-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
color: #2a1e10;
background: var(--brass);
box-shadow:
inset 0 0 0 3px rgba(255, 236, 200, .35),
inset 0 0 0 4px rgba(110, 79, 38, .5),
0 4px 10px -4px rgba(22, 23, 26, .5);
}
.reason-icon svg {
width: 28px;
height: 28px;
transition: transform .5s var(--ease);
}
.reason:hover .reason-icon svg { transform: rotate(-12deg) scale(1.06); }
/* the count, big and sunk into the stock */
.reason-no {
position: absolute;
top: 20px;
right: 26px;
font-family: var(--wood);
font-size: 54px;
letter-spacing: .02em;
line-height: 1;
color: rgba(125, 90, 44, .16);
transition: color .35s var(--ease);
}
.reason:hover .reason-no { color: rgba(224, 180, 120, .3); }
.reason h3 {
font-size: 19.5px;
margin-bottom: 0;
transition: color .35s var(--ease);
}
/* a short tan double rule under each title */
.reason h3::after {
content: "";
display: block;
width: 34px;
height: 5px;
margin: 12px 0 12px;
border-top: 1px solid var(--tan);
border-bottom: 1px solid var(--tan);
opacity: .8;
}
.reason p {
font-size: 14.5px;
line-height: 1.6;
color: var(--gray);
margin: 0;
transition: color .35s var(--ease);
}
.reason:hover h3 { color: var(--silver-hi); }
.reason:hover p { color: var(--on-dark); }
/* side by side, the plates take the column's full height so their foot
lands level with the foot of the photograph */
@media (min-width: 992px) {
.reason-list {
height: 100%;
grid-auto-rows: 1fr;
}
}
/* the horseshoe, sunk into the paper behind the plates */
.watermark--shoe {
right: -80px;
bottom: 40px;
width: 360px;
height: 360px;
color: var(--tan-deep);
opacity: .05;
}
/* the copy and plates sit above the watermark rather than under it */
#why > .container {
position: relative;
z-index: 1;
}
/* -- 11b Testimonial rail ----------------------------------------------------------- */
/* A snapping rail rather than a carousel: the track is a real scroll
container, so it works with a trackpad, a touch drag, the arrow keys and
a screen reader before a line of script has run. The buttons only nudge
the same scroll position along. */
.rail { position: relative; }
/* The track is now a notice board: handbills nailed up with air between
them. The block padding gives the nails and the slight tilt room, since a
scroll container clips on both axes. */
.rail-track {
--rail-gap: 26px;
display: flex;
gap: var(--rail-gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 22px 6px 18px;
scroll-padding-inline: 6px;
/* the dots and arrows below are the affordance */
scrollbar-width: none;
-ms-overflow-style: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible {
outline: 2px solid var(--tan);
outline-offset: 3px;
}
/* THE HANDBILL. Cheap cream stock with torn top and bottom edges, a printed
double rule inside, a nail through the head — and each one tacked up a
little crooked, straightening when someone reads it. The torn edges are a
mask: a ragged tile along each end, a solid block through the middle. */
.quote-card {
/* three up, minus the two gaps between them */
flex: 0 0 calc((100% - 2 * var(--rail-gap, 26px)) / 3);
scroll-snap-align: start;
position: relative;
display: flex;
flex-direction: column;
color: var(--ink);
background:
radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .35), transparent 60%),
radial-gradient(90% 60% at 100% 100%, rgba(125, 90, 44, .16), transparent 70%),
var(--handbill);
padding: 44px 34px 36px;
transform: rotate(-.7deg);
transition: transform .4s var(--ease);
-webkit-mask: var(--torn-edges);
mask: var(--torn-edges);
}
.quote-card:nth-child(even) { transform: rotate(.6deg); }
.quote-card:nth-child(3n) { transform: rotate(-.3deg); }
.quote-card:hover { transform: rotate(0) translateY(-3px); }
/* the nail */
.quote-card::before {
content: "";
position: absolute;
top: 20px;
left: 50%;
width: 11px;
height: 11px;
margin-left: -5.5px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #f4f6f8 0 1.5px, #9aa1a9 3px, #3f4249 6px);
box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
z-index: 1;
}
/* the printer's double rule, set in from the torn edge */
.quote-card::after {
content: "";
position: absolute;
inset: 15px;
border: 1px solid rgba(125, 90, 44, .4);
outline: 1px solid rgba(125, 90, 44, .22);
outline-offset: 3px;
pointer-events: none;
}
.quote-stars {
display: flex;
justify-content: center;
gap: 6px;
font-size: 14px;
color: var(--tan-deep);
margin: 10px 0 18px;
}
.quote-stars .mi { vertical-align: 0; }
.quote-card blockquote { margin: 0 0 26px; }
.quote-card blockquote p {
font-family: var(--serif);
font-size: 16.5px;
font-weight: 500;
line-height: 1.55;
color: #2a2620;
margin: 0;
}
/* the attribution drops to the floor of the card, so six cards of uneven
quote length still line their names up */
.quote-by {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
padding-top: 20px;
border-top: 1px dashed rgba(125, 90, 44, .45);
}
/* a six-point brass sheriff's star, initials stamped in the middle */
.quote-badge {
flex: none;
width: 54px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--wood);
font-size: 11.5px;
letter-spacing: .02em;
color: #2a1e10;
background: var(--brass);
clip-path: polygon(50% 0, 65% 24%, 93.3% 25%, 80% 50%, 93.3% 75%, 65% 76%,
50% 100%, 35% 76%, 6.7% 75%, 20% 50%, 6.7% 25%, 35% 24%);
}
.quote-who strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--ink);
line-height: 1.3;
}
.quote-who em {
display: block;
font-style: normal;
font-size: 12.5px;
color: #6b6153;
line-height: 1.4;
}
.rail-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 26px;
}
.rail-dots {
display: flex;
gap: 8px;
}
.rail-dot {
width: 26px;
height: 3px;
padding: 0;
border: 0;
background: var(--line-dk-2);
transition: background .25s var(--ease);
}
.rail-dot.is-on { background: var(--tan); }
.rail-arrows {
display: flex;
gap: 10px;
margin-left: auto;
}
.rail-btn {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: var(--silver-hi);
background: transparent;
border: 1px solid var(--line-dk-2);
transition: border-color .25s var(--ease), color .25s var(--ease),
background .25s var(--ease);
}
.rail-btn:hover:not(:disabled) {
border-color: var(--tan);
color: var(--tan-hi);
background: rgba(201, 149, 79, .07);
}
.rail-btn:disabled {
opacity: .28;
cursor: default;
}
/* -- 12 Payment flow -------------------------------------------------------------- */
/* A tally sheet: four ruled columns hung off one rule, closed at the foot,
with a silver rivet punched through the head of each step. */
.flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 68px;
border-top: 2px solid var(--line-strong);
border-bottom: 1px solid var(--line);
}
.flow-step {
position: relative;
padding: 34px 30px 36px 0;
border-right: 1px solid var(--line);
}
.flow-step--last { border-right: 0; }
/* The four steps have to read ACROSS as well as down, and they only do that
if the number, the heading and the copy each sit on a shared baseline. Left
to itself the grid gives every column its own flow, so a heading that takes
two lines drops its paragraph below the other three and the row goes ragged.
Subgrid hands the columns the parent's rows instead: the heading band is as
tall as the tallest heading, and all four paragraphs start together. */
@supports (grid-template-rows: subgrid) {
/* Unscoped by breakpoint on purpose: the two-column layout goes ragged
the same way the four-column one does, and at one column the shared
rows simply collapse to each step's own content. */
.flow { grid-template-rows: auto auto auto; }
.flow-step {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}
}
/* Without subgrid the rows cannot be shared, so the headings get a two-line
floor instead — the same alignment, one assumption wider. */
@supports not (grid-template-rows: subgrid) {
.flow-step h3 { min-height: 2.2em; }
}
/* The node — a silver stud punched through the top rule, like a saddle rivet */
.flow-node {
position: absolute;
top: -8px;
left: 0;
width: 15px;
height: 15px;
background: var(--plate);
border: 1px solid var(--silver-dk);
transform: rotate(45deg);
}
.flow-no {
display: block;
font-family: var(--wood);
font-size: 13px;
letter-spacing: .12em;
color: var(--tan-deep);
margin-bottom: 14px;
}
/* No max-width here: at 15ch "Transaction is authorised" broke after "is"
while the column still had room to spare. The column is the measure. */
.flow-step h3 {
font-size: 19px;
line-height: 1.22;
margin-bottom: 12px;
}
.flow-step p {
font-size: 14.5px;
color: var(--gray);
}
/* -- 13 Platform + system diagram --------------------------------------------------- */
.stack-points {
list-style: none;
margin: 34px 0 0;
padding: 0;
}
.stack-points li {
display: flex;
gap: 14px;
font-size: 14.5px;
line-height: 1.6;
color: var(--on-dark);
padding: 16px 0;
border-top: 1px solid var(--line-dk);
}
.stack-icon {
width: 20px;
height: 20px;
color: var(--tan);
flex: none;
margin-top: 2px;
}
/* The wire diagram — nodes strung on a single vertical line, the way a
telegraph line runs from post to post. */
.wire { position: relative; }
/* Side by side, the line runs the full height of the copy column: the posts
keep their size and the spans of wire between them take up the slack, so
the diagram ends level with the photograph instead of short of it. */
@media (min-width: 992px) {
.wire {
height: 100%;
display: flex;
flex-direction: column;
}
.wire-join {
flex: 1 1 46px;
min-height: 46px;
}
}
.wire-node {
display: flex;
gap: 18px;
align-items: center;
background: var(--ink-2);
border: 1px solid var(--line-dk-2);
padding: 20px 26px;
position: relative;
transition: border-color .3s var(--ease);
}
.wire-node:hover { border-color: var(--tan-deep); }
/* the station's mark, struck in a dark die with a tan rim */
.wire-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 46px;
height: 46px;
color: var(--tan-hi);
background: var(--ink-3);
border: 1px solid rgba(201, 149, 79, .45);
}
.wire-icon svg { width: 26px; height: 26px; }
.wire-node--end .wire-icon {
color: var(--ink);
background: var(--brass);
border-color: var(--tan);
}
.wire-node--end {
background: var(--ink-3);
border-color: var(--tan);
}
.wire-no {
font-family: var(--wood);
font-size: 12.5px;
letter-spacing: .1em;
color: var(--tan);
flex: none;
width: 30px;
padding-top: 3px;
}
.wire-node h4 {
font-size: 17px;
color: var(--silver-hi);
margin-bottom: 4px;
}
.wire-node p {
font-size: 13.5px;
color: var(--on-dark);
margin: 0;
}
/* The join — the run of wire between two posts, labelled mid-span */
.wire-join {
display: flex;
align-items: center;
justify-content: center;
height: 46px;
position: relative;
}
/* the wire itself: a taut tan line, with a glass insulator where it leaves
one post and where it meets the next */
.wire-join::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 36px;
width: 2px;
background: linear-gradient(180deg, var(--tan-deep), var(--tan), var(--tan-deep));
opacity: .75;
}
.wire-join::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 32px;
width: 10px;
background:
radial-gradient(circle at 50% 50%, var(--tan-hi) 0 2.5px, var(--tan-deep) 3.2px, transparent 4.2px) center top / 10px 10px no-repeat,
radial-gradient(circle at 50% 50%, var(--tan-hi) 0 2.5px, var(--tan-deep) 3.2px, transparent 4.2px) center bottom / 10px 10px no-repeat;
}
/* the span's label, tagged onto the wire like a freight ticket */
.wire-join span {
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tan-hi);
background: var(--ink);
border: 1px solid rgba(201, 149, 79, .4);
padding: 4px 10px 3px;
position: absolute;
left: 54px;
}
/* -- 14 Statistics ------------------------------------------------------------------ */
.numbers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 64px;
background: var(--silver-dk);
border: 1px solid var(--silver-dk);
}
/* Each figure sits on its own struck token. The fill has to be opaque: a
transparent tail lets the grid's dark gap colour bleed up through the cell
and the whole row silts over grey. */
/* A rivet punched through each corner of every token — a domed head with a
catch of light on it, sitting in a faint dished ring. */
.number {
--rivet: radial-gradient(circle at 40% 38%, #ffffff 0 .8px, #aeb4bb 2px, #5f656c 3.6px, rgba(0, 0, 0, .12) 4.4px, transparent 5.2px);
background:
var(--rivet) 9px 9px / 12px 12px no-repeat,
var(--rivet) calc(100% - 9px) 9px / 12px 12px no-repeat,
var(--rivet) 9px calc(100% - 9px) / 12px 12px no-repeat,
var(--rivet) calc(100% - 9px) calc(100% - 9px) / 12px 12px no-repeat,
linear-gradient(180deg, #ffffff 0%, #f2f5f7 55%, #e3e8ec 100%);
padding: 38px 30px;
}
.figure {
display: block;
font-size: clamp(1.65rem, 2.6vw, 2.2rem);
line-height: 1.1;
color: var(--ink);
margin-bottom: 14px;
}
.number-cap {
display: block;
font-size: 13.5px;
line-height: 1.5;
color: #3f4249;
font-weight: 500;
}
/* -- 14b FAQ -------------------------------------------------------------------------- */
/* Built on native . No script owns the open state, so every answer
is reachable — and indexable — whether or not JavaScript ever runs. */
/* THE LEDGER PAGE. Cream stock and a red double margin rule down the left the
way an account book is ruled. (Feint lines were tried behind the text, but
answers wrap at their own leading and the rules never sat under the words.) */
.faq-list {
background:
linear-gradient(90deg,
transparent 22px, rgba(168, 50, 31, .38) 22px 23px,
transparent 23px 26px, rgba(168, 50, 31, .38) 26px 27px, transparent 27px),
#f8f3e7;
border: 1px solid var(--line-strong);
box-shadow: 5px 5px 0 -1px #efe7d4, 5px 5px 0 0 var(--line);
padding: 6px 28px 6px 50px;
}
.faq-list > .faq:last-child { border-bottom: 0; }
.faq { border-bottom: 1px solid var(--line); }
.faq > summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 24px 0;
cursor: pointer;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
/* kill both marker implementations; the silver stud replaces them */
list-style: none;
transition: color .2s var(--ease);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::marker { content: ""; }
.faq > summary:hover { color: var(--tan-deep); }
.faq > summary:focus-visible {
outline: 2px solid var(--tan);
outline-offset: 2px;
}
/* THE CYLINDER. A revolver's six-chamber cylinder in brushed steel — the one
round thing on a page of square edges, because a cylinder is round. Opening
an answer turns it a chamber and a half and rings it in tan, so the open
state reads at a glance even with the six-fold symmetry. */
.faq-mark {
--ch: #2b2d33;
position: relative;
flex: none;
width: 30px;
height: 30px;
margin-top: 0;
border-radius: 50%;
background:
/* centres on a radius of 8 around the middle of the 28px padding box */
radial-gradient(circle at 14px 6px, var(--ch) 0 2.7px, transparent 3.2px),
radial-gradient(circle at 20.93px 10px, var(--ch) 0 2.7px, transparent 3.2px),
radial-gradient(circle at 20.93px 18px, var(--ch) 0 2.7px, transparent 3.2px),
radial-gradient(circle at 14px 22px, var(--ch) 0 2.7px, transparent 3.2px),
radial-gradient(circle at 7.07px 18px, var(--ch) 0 2.7px, transparent 3.2px),
radial-gradient(circle at 7.07px 10px, var(--ch) 0 2.7px, transparent 3.2px),
radial-gradient(circle at 50% 50%, var(--silver-dk) 0 1.5px, transparent 2px),
var(--plate);
border: 1px solid var(--silver-dk);
box-shadow: 0 0 0 0 var(--tan);
transition: transform .5s var(--ease), box-shadow .3s var(--ease);
}
.faq > summary:hover .faq-mark { transform: rotate(30deg); }
/* matched to the hover selector's weight so hovering an open answer keeps it turned */
.faq[open] > summary .faq-mark {
transform: rotate(90deg);
box-shadow: 0 0 0 2px var(--tan);
}
.faq[open] > summary { color: var(--ink); }
.faq-a {
padding: 0 52px 26px 0;
max-width: 62ch;
}
.faq-a p {
font-size: 15px;
line-height: 1.68;
color: var(--gray);
}
/* The support figure. The caption laps over the foot of the photograph the
way a plate is screwed onto a frame. */
.faq-figure {
position: relative;
margin: 44px 0 0;
max-width: 350px;
}
.faq-figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
background: var(--ink-2);
border: 1px solid var(--silver-dk);
}
/* tan brackets on the photograph's top corners, like every other frame on the page */
.faq-figure::before,
.faq-figure::after {
content: "";
position: absolute;
top: 10px;
width: 18px;
height: 18px;
border-top: 2px solid var(--tan-hi);
opacity: .9;
pointer-events: none;
}
.faq-figure::before { left: 10px; border-left: 2px solid var(--tan-hi); }
.faq-figure::after { right: 10px; border-right: 2px solid var(--tan-hi); }
/* THE WIRE SLIP. The support card is a telegraph blank screwed over the foot
of the photograph — the same cream stock and brass caps as the form in the
hero, so "ask us" looks the same wherever it appears. */
.faq-card {
position: relative;
margin: -64px 18px 0;
background: #fdfaf2;
border: 1px solid var(--silver-dk);
padding: 22px 24px 20px;
text-align: left;
}
.faq-card::after {
content: "";
position: absolute;
inset: -4px;
pointer-events: none;
--cap: #c79a5a;
background:
linear-gradient(var(--cap), var(--cap)) left top / 20px 3px,
linear-gradient(var(--cap), var(--cap)) left top / 3px 20px,
linear-gradient(var(--cap), var(--cap)) right top / 20px 3px,
linear-gradient(var(--cap), var(--cap)) right top / 3px 20px,
linear-gradient(var(--cap), var(--cap)) left bottom / 20px 3px,
linear-gradient(var(--cap), var(--cap)) left bottom / 3px 20px,
linear-gradient(var(--cap), var(--cap)) right bottom / 20px 3px,
linear-gradient(var(--cap), var(--cap)) right bottom / 3px 20px;
background-repeat: no-repeat;
}
.faq-card-kicker {
display: block;
font-family: var(--type);
font-size: 12.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: #9b3b22;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px dashed var(--line-strong);
}
.faq-card p {
font-size: 13.5px;
line-height: 1.55;
color: var(--gray);
margin-bottom: 16px;
}
/* Side by side with the ledger, stacking the slip under the photograph ran
the column ~150px past the questions, and lapped the slip over the
INQUIRIES sign — the best part of the picture. So on desktop the photo
sits to the right of the column and the slip is pinned across its lower
LEFT corner, over the ledgers, leaving the sign in the clear. Below 1200px
the column is too narrow for the slip to sit beside anything, so it stacks. */
@media (min-width: 1200px) {
.faq-figure {
max-width: none;
padding-bottom: 34px;
}
.faq-figure img {
width: 64%;
margin-left: auto;
}
.faq-figure::before { left: calc(36% + 10px); }
.faq-card {
position: absolute;
left: 0;
bottom: 0;
width: 56%;
margin: 0;
box-shadow: 0 14px 28px -18px rgba(22, 23, 26, .55);
}
}
@media (max-width: 1199.98px) {
/* stacked, lap the slip over less of the photo so the sign still shows */
.faq-card { margin-top: -26px; }
}
/* a phone number broken across two lines is no longer a phone number */
.offer-bill-phone span { white-space: nowrap; }
/* -- 15 Closing CTA ------------------------------------------------------------------ */
/* SUNDOWN. The page ends at the other end of the day from where it began:
leather-dark sky over the copy, warming to saddle-tan dusk on the horizon,
with the sun half down behind a far range and throwing the sunburst. The
rider walks the ground in front of all of it, dark against the glow. */
.closing {
background: linear-gradient(180deg,
var(--ink) 0%, var(--ink) 42%, #1d1a19 62%,
#33271e 78%, #5a4029 92%, #6e4d2d 100%);
color: var(--paper);
padding: 116px 0;
position: relative;
overflow: hidden;
}
/* copy and bill above the sky, the sun, and its rays */
.closing > .container { position: relative; z-index: 2; }
/* the rider and the sun need room below the bill */
.closing { padding-bottom: 190px; }
.closing-horizon {
position: absolute;
inset: auto 0 0 0;
height: 80px;
z-index: 1;
pointer-events: none;
}
.closing-sun {
position: absolute;
left: 52%;
bottom: 58px;
width: 320px;
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, 50%);
background: radial-gradient(circle,
rgba(246, 214, 160, .95) 0 14%,
rgba(224, 180, 120, .55) 18%,
rgba(201, 149, 79, .22) 36%,
rgba(201, 149, 79, .07) 56%,
transparent 70%);
}
/* the rays come from the sun now, not from an empty point mid-page */
.closing-sun::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 1900px;
aspect-ratio: 1;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg,
rgba(224, 180, 120, .075) 0deg 1.3deg,
transparent 1.3deg 5.2deg);
-webkit-mask-image: radial-gradient(circle, transparent 6%, #000 14%, rgba(0, 0, 0, .45) 32%, transparent 60%);
mask-image: radial-gradient(circle, transparent 6%, #000 14%, rgba(0, 0, 0, .45) 32%, transparent 60%);
animation: rays-turn 180s linear infinite;
}
/* one far range, kept low so the rider's figure stands clear against the sky */
.closing-mesas {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 130px;
fill: #2c231c;
}
.closing-ground {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* the footer's own leather, so the ground runs straight on into it */
fill: var(--ink-3);
}
/* THE RIDER. Walks the ridge left to right once every forty seconds; the
horse's legs scissor and the whole figure bobs on the stride. */
.closing-rider {
position: absolute;
left: 0;
/* ground top sits at y=36 of the 80-high box: 44px up, less a touch so the hooves sink in */
bottom: 42px;
width: 64px;
height: 53px;
color: var(--ink-3);
transform: translateX(-90px);
animation: ride-across 40s linear infinite;
}
.closing-rider-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
animation: ride-bob .55s ease-in-out infinite alternate;
}
.closing-rider-svg .leg {
transform-box: fill-box;
transform-origin: 50% 0;
animation: leg-a 1.1s ease-in-out infinite alternate;
}
.closing-rider-svg .leg-b { animation-name: leg-b; }
@keyframes ride-across {
from { transform: translateX(-90px); }
to { transform: translateX(calc(100vw + 90px)); }
}
@keyframes ride-bob {
to { transform: translateY(-1.5px); }
}
@keyframes leg-a {
from { transform: rotate(-16deg); }
to { transform: rotate(16deg); }
}
@keyframes leg-b {
from { transform: rotate(16deg); }
to { transform: rotate(-16deg); }
}
/* -- Back to top: the sheriff's star ---------------------------------------- */
.to-top {
position: fixed;
right: 22px;
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
z-index: 1020;
width: 58px;
height: 58px;
display: block;
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* script hides it until the page has been scrolled; without script it just stays */
.js .to-top:not(.is-on) {
opacity: 0;
visibility: hidden;
transform: translateY(12px);
}
/* The star sits on an inner span so the clip-path cannot swallow the focus ring */
.to-top-star {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 19px;
color: #2a1e10;
background: var(--brass);
clip-path: polygon(50% 0, 65% 24%, 93.3% 25%, 80% 50%, 93.3% 75%, 65% 76%,
50% 100%, 35% 76%, 6.7% 75%, 20% 50%, 6.7% 25%, 35% 24%);
transition: transform .4s var(--ease);
}
.to-top:hover .to-top-star,
.to-top:focus-visible .to-top-star { transform: rotate(60deg); }
.to-top:hover .to-top-star i,
.to-top:focus-visible .to-top-star i { transform: rotate(-60deg); }
/* block, or the counter-rotation is ignored — transforms skip inline boxes */
.to-top-star i {
display: block;
line-height: 1;
transition: transform .4s var(--ease);
}
.closing p {
color: var(--on-dark);
font-size: 16.5px;
max-width: 54ch;
margin-top: 24px;
}
.closing-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 24px;
}
/* WHAT HAPPENS NEXT. Three stops strung on a tan trail line, each with its
mark struck in a dark die — the same die the wire diagram uses. */
.trail-steps {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
position: relative;
max-width: 620px;
}
/* the trail, drawn through the middle of the three dies */
.trail-steps::before {
content: "";
position: absolute;
top: 25px;
left: 26px;
right: calc((100% - 40px) / 3 - 26px);
height: 0;
border-top: 2px dashed rgba(201, 149, 79, .5);
}
.trail-step {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
counter-increment: trail;
}
.trail-step-mark {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 12px;
color: var(--tan-hi);
background: var(--ink-3);
border: 1px solid rgba(201, 149, 79, .5);
}
.trail-step-mark svg { width: 28px; height: 28px; }
/* the stop's number, a small brass tab on the die's corner */
.trail-step-mark::after {
content: counter(trail);
position: absolute;
top: -9px;
right: -9px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wood);
font-size: 11px;
line-height: 1;
color: var(--ink);
background: var(--brass);
}
.trail-steps { counter-reset: trail; }
.trail-step strong {
font-family: var(--serif);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--silver-hi);
}
.trail-step > span:last-child {
font-size: 13.5px;
line-height: 1.5;
color: var(--on-dark);
}
/* THE OFFICE STAMP, inked across the bill's lower corner */
.offer-bill-stamp {
position: absolute;
right: 24px;
bottom: 38px;
z-index: 1;
font-family: var(--wood);
font-size: 10px;
line-height: 1.25;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
color: #9b3b22;
padding: 6px 9px 5px;
border: 2px solid #9b3b22;
outline: 1px solid rgba(155, 59, 34, .6);
outline-offset: 2px;
transform: rotate(-12deg);
opacity: .72;
pointer-events: none;
}
/* THE OFFER BILL. The last thing on the page is the thing to do, so it gets
printed up and nailed to the post like the testimonials — the same torn
stock and double rule — with the action and the phone number on it. */
.offer-bill {
position: relative;
color: var(--ink);
background:
radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .35), transparent 60%),
radial-gradient(90% 60% at 100% 100%, rgba(125, 90, 44, .16), transparent 70%),
var(--handbill);
padding: 50px 38px 36px;
text-align: center;
transform: rotate(.8deg);
-webkit-mask: var(--torn-edges);
mask: var(--torn-edges);
}
/* the nail */
.offer-bill::before {
content: "";
position: absolute;
top: 22px;
left: 50%;
width: 12px;
height: 12px;
margin-left: -6px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #f4f6f8 0 1.5px, #9aa1a9 3px, #3f4249 6px);
box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
/* the printer's double rule */
.offer-bill::after {
content: "";
position: absolute;
inset: 15px;
border: 1px solid rgba(125, 90, 44, .4);
outline: 1px solid rgba(125, 90, 44, .22);
outline-offset: 3px;
pointer-events: none;
}
.offer-bill-kicker {
display: block;
font-family: var(--type);
font-size: 12.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: #9b3b22;
margin: 8px 0 6px;
}
.offer-bill-title {
font-family: var(--wood);
font-weight: 400;
font-size: clamp(1.6rem, 2.4vw, 2rem);
letter-spacing: .02em;
line-height: 1.15;
color: var(--ink);
padding-bottom: 16px;
margin-bottom: 18px;
border-bottom: 3px double rgba(125, 90, 44, .45);
}
.offer-bill-list {
list-style: none;
margin: 0 0 26px;
padding: 0;
text-align: left;
}
.offer-bill-list li {
display: flex;
gap: 11px;
font-size: 14.5px;
line-height: 1.5;
color: #3d372e;
padding: 7px 0;
}
.offer-bill-list .mi {
font-size: 16px;
margin-top: 2px;
color: var(--tan-deep);
}
.offer-bill .closing-actions {
justify-content: center;
position: relative;
z-index: 1;
}
.offer-bill-phone {
display: inline-flex;
align-items: center;
gap: 12px;
text-align: left;
font-family: var(--serif);
font-size: 19px;
font-weight: 700;
line-height: 1.1;
color: var(--ink);
transition: color .2s var(--ease);
}
.offer-bill-phone i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
font-size: 15px;
color: var(--ink);
background: var(--brass);
}
.offer-bill-phone small {
display: block;
font-family: var(--sans);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: #6b6153;
margin-bottom: 3px;
}
.offer-bill-phone:hover,
.offer-bill-phone:focus-visible { color: var(--tan-deep); }
/* doubled class to outrank `.closing p`, which is set for copy on the leather */
.offer-bill .offer-bill-foot {
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
color: #6b6153;
max-width: none;
margin: 22px 0 0;
position: relative;
z-index: 1;
}
/* -- 16 Footer -------------------------------------------------------------------------- */
.footer {
background: var(--ink-3);
color: var(--on-dark);
padding: 92px 0 32px;
border-top: 1px solid var(--line-dk);
position: relative;
}
/* the rope is lashed along the very top edge of the block */
.rope--foot {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* star — hat — star, closing the footer out */
.foot-orn {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 64px;
color: var(--tan);
opacity: .8;
}
.foot-orn .mi { font-size: 13px; }
.foot-hat {
width: 42px;
height: 42px;
color: var(--tan-hi);
}
.footer .logo { margin-bottom: 22px; }
.footer-note {
font-size: 14.5px;
line-height: 1.62;
color: var(--on-dark);
max-width: 40ch;
margin-bottom: 24px;
}
.footer-reach {
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-reach a {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--silver-hi);
transition: color .2s var(--ease);
}
.footer-reach a i { color: var(--tan); }
.footer-reach a:hover { color: var(--tan-hi); }
.footer-col h4 {
font-family: var(--wood);
font-size: 12.5px;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tan-hi);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line-dk);
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li { margin-bottom: 11px; }
.footer-col a {
font-size: 14px;
color: var(--on-dark);
transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.footer-col a:hover {
color: var(--tan-hi);
padding-left: 4px;
}
.footer-legalese {
display: flex;
gap: 16px;
margin-top: 34px;
padding-top: 30px;
border-top: 1px solid var(--line-dk);
}
.footer-legalese i {
color: var(--tan);
font-size: 19px;
flex: none;
margin-top: 3px;
}
.footer-legalese p {
font-size: 12.5px;
line-height: 1.68;
color: var(--on-dark-dim);
margin: 0;
}
.footer-base {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid var(--line-dk);
font-size: 12.5px;
color: var(--on-dark-dim);
}
.footer-base nav {
display: flex;
gap: 24px;
}
.footer-base a:hover { color: var(--tan-hi); }
/* -- 17 Legal pages ---------------------------------------------------------------------- */
.legal-top {
background: var(--ink);
padding: 84px 0;
position: relative;
overflow: hidden;
}
.legal-top::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(100% 80% at 50% 0%, rgba(226, 232, 240, .06), transparent 60%);
}
.legal-top > .container { position: relative; z-index: 1; }
.legal-top h1 {
background: var(--chrome-type);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.legal-stamp {
font-family: var(--wood);
font-size: 12.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tan-hi);
margin-top: 24px;
}
.legal-copy { padding: 84px 0 108px; }
/* the legal pages carry only the base row, so the footer closes up around it */
.footer--legal { padding-top: 52px; }
.footer--legal .foot-orn { margin-top: 0; }
.legal-copy h2 {
font-size: clamp(1.375rem, 2vw, 1.625rem);
margin: 48px 0 16px;
}
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p,
.legal-copy li {
font-size: 15.5px;
color: var(--gray);
}
.legal-copy ul { padding-left: 20px; }
.legal-copy li { margin-bottom: 9px; }
.legal-copy a {
color: var(--tan-deep);
text-decoration: underline;
}
/* -- 18 Responsive ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
.quote-body .col-sm-6 { width: 100%; }
.quote-head { padding: 24px 26px 20px; }
.quote-body { padding: 26px; }
.quote-foot { padding: 14px 26px; }
}
@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
:root { --block: 92px; }
.hero-grid { padding: 66px 0 76px; }
.hero::before { width: 1100px; top: -34%; }
.hero-copy { margin-bottom: 32px; }
/* the plaque stops lapping over the band once the columns stack */
.quote-slab { margin-top: 40px; }
.hero-band { padding: 24px 0; }
.flow { grid-template-columns: repeat(2, 1fr); }
.flow-step { padding-right: 24px; padding-bottom: 26px; }
.flow-step:nth-child(2n) { border-right: 0; }
.flow-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.numbers-grid { grid-template-columns: repeat(2, 1fr); }
.pin { position: static; }
/* two up on the rail, so a quote still has room to be a quote */
.quote-card { flex-basis: calc((100% - var(--rail-gap, 26px)) / 2); }
.faq-figure { margin-top: 36px; }
/* stacked columns: the portrait shots centre instead of hugging a rail */
.shot--poster,
.shot--rig,
.shot--why {
margin-left: auto;
margin-right: auto;
}
.shot--map { margin-top: 48px; }
.scene > .container { padding-bottom: 24px; }
/* the columns are full width now, so a watermark has nowhere to sit
without landing under the copy — scale it back and edge it out */
.watermark { opacity: .045; }
.watermark--wheel { width: 230px; height: 230px; top: 20px; right: -90px; }
.offer-bill { transform: none; margin-top: 8px; }
.footer { padding-top: 68px; }
}
@media (max-width: 767.98px) {
body { font-size: 16px; }
.band-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-flat { padding: 30px 24px 26px; }
.card-flat--wide { padding: 30px 24px; }
.trade-feature { padding: 30px 24px; }
.quote-head,
.quote-body,
.quote-foot { padding-left: 24px; padding-right: 24px; }
.band-items { gap: 12px; }
.wire-node { padding: 18px 20px; gap: 14px; }
.wire-no { width: 24px; }
.wire-join::before { left: 30px; }
.wire-join::after { left: 26px; }
.wire-join span { left: 46px; }
.wire-icon { width: 40px; height: 40px; }
.wire-icon svg { width: 22px; height: 22px; }
/* one up — below this the card is all padding and no quote */
.quote-card {
flex-basis: 100%;
padding: 42px 30px 32px;
}
.faq > summary { font-size: 17px; gap: 16px; padding: 20px 0; }
.faq-list { padding: 4px 18px 4px 42px; }
.trade-row { padding: 18px 16px; gap: 16px; }
.closing { padding-bottom: 170px; }
.to-top { width: 50px; height: 50px; right: 16px; }
.faq-a { padding-right: 0; }
.faq-figure { max-width: 340px; }
.footer-legalese { margin-top: 48px; }
}
@media (max-width: 575.98px) {
.band-items { grid-template-columns: 1fr; }
/* the three stops stack, each die beside its words, with no trail line */
.trail-steps {
grid-template-columns: 1fr;
gap: 18px;
}
.trail-steps::before { display: none; }
.trail-step {
display: grid;
grid-template-columns: 52px 1fr;
column-gap: 16px;
row-gap: 2px;
align-items: start;
}
.trail-step-mark {
grid-row: span 2;
margin-bottom: 0;
}
/* too little bill left over at this width to ink a stamp on without covering words */
.offer-bill-stamp { display: none; }
.reason-list { grid-template-columns: 1fr; gap: 16px; }
.watermark--shoe { width: 220px; height: 220px; right: -70px; }
.flow { grid-template-columns: 1fr; }
.flow-step {
border-right: 0;
border-bottom: 1px solid var(--line);
padding-right: 0;
}
.flow-step--last { border-bottom: 0; }
/* two by two: four full-width plates ran the section to twice a screen */
.numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* bottom padding clears the corner rivets under a four-line caption */
.number { padding: 30px 18px 34px; }
.figure { font-size: 1.45rem; margin-bottom: 10px; }
.number-cap { font-size: 12.5px; }
/* a long kicker would break onto a second line between its two rules;
dropping the trailing rule keeps it to one */
.kicker {
font-size: 11.5px;
letter-spacing: .07em;
gap: 10px;
}
.kicker::before { width: 18px; }
.kicker::after { display: none; }
.hero-buttons > * { width: 100%; }
.mark-line::after { height: 6px; border-width: 1px; }
.logo-img { height: 32px; }
}
/* -- 19 Motion preferences --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html,
.rail-track { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.js .reveal {
opacity: 1;
transform: none;
}
/* the ambient pieces go still rather than jumping to their last frame */
.hero-dust::before,
.hero-dust::after,
.closing-rider,
.closing-rider-svg,
.closing-rider-svg .leg { animation: none; }
.tumbleweed { display: none; }
.guilloche,
.closing-sun::before,
.hero-drawn .hero-sun::before,
.hero-drawn .hero-sky::after { animation: none; }
/* the rider stands still on the ridge, clear of the copy above */
.closing-rider {
left: 8%;
transform: none;
}
}