/* ============================================================ LGX FREIGHT SOLUTIONS — HOME PAGE DESIGN LAYER Three-motion positioning · 2026 rebuild ------------------------------------------------------------ Colors + type follow the LGX brand guide (2024): accent #DC5334 (orange-red) secondary #444E4F (steel) type Helvetica Neue LT Std Every value is a token in the BRAND TOKENS block below. ============================================================ */ /* To self-host Helvetica Neue LT Std for full fidelity on Windows, drop the woff2 files into /wp-content/uploads/lgx/fonts/ and uncomment this block. Until then the system Helvetica/Arial stack renders Helvetica Neue on Apple devices and Arial elsewhere. */ /* @font-face{font-family:'Helvetica Neue LT Std';src:url('/wp-content/uploads/lgx/fonts/HelveticaNeueLTStd-Blk.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap;} @font-face{font-family:'Helvetica Neue LT Std';src:url('/wp-content/uploads/lgx/fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Helvetica Neue LT Std';src:url('/wp-content/uploads/lgx/fonts/HelveticaNeueLTStd-Md.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Helvetica Neue LT Std';src:url('/wp-content/uploads/lgx/fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} */ .lgx-page{ /* ===== BRAND TOKENS — LGX brand guide 2024 (edit here only) ===== */ --lgx-accent:#DC5334; /* PRIMARY · LGX orange-red */ --lgx-accent-deep:#BE4423; /* darker accent · button fill (F34-B)*/ --lgx-accent-deeper:#A63A1D; /* button hover · white text 6.5:1 */ --lgx-accent-soft:rgba(220,83,52,.13); --lgx-steel:#444E4F; /* SECONDARY · LGX steel grey */ --lgx-ink:#161B1D; /* near-black (steel family) · dark*/ --lgx-ink-2:#1E2527; /* raised dark surface */ --lgx-ink-3:#283133; /* card on dark */ --lgx-grey:#6E777A; /* muted grey */ --lgx-light:#F4F4F2; /* warm off-white surface */ --lgx-light-2:#E8E8E4; --lgx-white:#FFFFFF; --lgx-text:#1A2123; /* body text on light (steel fam.) */ --lgx-text-muted:rgba(26,33,35,.66); /* .62 gave 4.48:1 on --lgx-light: AA fail by 0.02 */ --lgx-line-light:rgba(26,33,35,.13); --lgx-line-dark:rgba(255,255,255,.12); --lgx-font-display:'Helvetica Neue LT Std','Helvetica Neue',Helvetica,Arial,sans-serif; --lgx-font-body:'Helvetica Neue LT Std','Helvetica Neue',Helvetica,Arial,sans-serif; --lgx-font-label:'Helvetica Neue LT Std','Helvetica Neue',Helvetica,Arial,sans-serif; --lgx-radius:3px; --lgx-container:1280px; font-family:var(--lgx-font-body); color:var(--lgx-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .lgx-page *{ box-sizing:border-box; } .lgx-page a{ text-decoration:none; color:inherit; } .lgx-page section{ position:relative; } .lgx-page :focus-visible{ outline:2px solid var(--lgx-accent); outline-offset:3px; } .lgx-container{ max-width:var(--lgx-container); margin:0 auto; padding:0 2.25rem; position:relative; z-index:2; } /* ---------- Typography ---------- */ .lgx-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--lgx-font-label); font-size:.74rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; /* accent-deeper: accent-deep is 4.23:1 on the darkest light surface (#E8E8E4), an AA fail at this size. deeper holds 5.27:1 on every surface we use. */ color:var(--lgx-accent-deeper) !important; margin:0 0 1.4rem 0 !important; line-height:1.2; } .lgx-eyebrow::before{ content:''; width:26px; height:2px; background:var(--lgx-accent); display:inline-block; } .lgx-eyebrow.is-light{ color:rgba(255,255,255,.92) !important; } .lgx-eyebrow.is-light::before{ background:var(--lgx-accent); } .lgx-h1{ font-family:var(--lgx-font-display); /* 26ch + the smaller clamp lands the headline on TWO wide lines instead of three narrow ones. Hero-only class, so this does not touch inner pages. */ font-size:clamp(2.3rem,4.6vw,3.9rem) !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.02 !important; color:#fff !important; margin:0 0 1.35rem 0 !important; max-width:26ch; } .lgx-h1 .accent{ color:var(--lgx-accent); } .lgx-h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,3rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; margin:0 0 1.2rem 0 !important; } .lgx-h2.on-dark{ color:#fff !important; } .lgx-lead{ font-size:1.15rem !important; line-height:1.62 !important; max-width:62ch; margin:0 0 2.4rem 0 !important; } .lgx-lead.on-dark{ color:rgba(255,255,255,.74) !important; } .lgx-lead.on-light{ color:var(--lgx-text-muted) !important; } /* ---------- Buttons ---------- */ .lgx-btn{ display:inline-flex; align-items:center; gap:.55rem; justify-content:center; font-family:var(--lgx-font-body); font-weight:700; font-size:.95rem; letter-spacing:.02em; padding:1.02rem 1.7rem; border-radius:var(--lgx-radius); cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease; border:1px solid transparent; } .lgx-btn .arw{ transition:transform .25s ease; } .lgx-btn:hover .arw{ transform:translateX(4px); } /* NOTE: these MUST stay prefixed with .lgx-page. Buttons are elements and `.lgx-page a{color:inherit}` above (0,1,1) outranks a bare `.lgx-btn-*` (0,1,0), which silently ate every button's declared color: the CTA-band button rendered white-on-white and the hero outline button dark-on-dark. Verified live 2026-08-09. */ .lgx-page .lgx-btn-primary{ background:var(--lgx-accent-deep); color:#fff; } .lgx-page .lgx-btn-primary:hover{ background:var(--lgx-accent-deeper); transform:translateY(-2px); color:#fff; } .lgx-page .lgx-btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.32); } .lgx-page .lgx-btn-outline:hover{ background:rgba(255,255,255,.07); border-color:#fff; color:#fff; transform:translateY(-2px); } .lgx-page .lgx-btn-ghost{ background:transparent; color:var(--lgx-text); border-color:var(--lgx-line-light); } .lgx-page .lgx-btn-ghost:hover{ border-color:var(--lgx-text); transform:translateY(-2px); } /* sanctioned 4th variant: inverse fill for the accent CTA gradient band (F25) */ .lgx-page .lgx-btn-light{ background:#fff; color:var(--lgx-ink); } .lgx-page .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-ink); transform:translateY(-2px); } .lgx-cta-row{ display:flex; gap:.9rem; flex-wrap:wrap; } /* ---------- Photo slots (drop files into /wp-content/uploads/lgx/) ---------- */ .lgx-photo{ position:relative; overflow:hidden; border-radius:var(--lgx-radius); background: radial-gradient(120% 90% at 72% 18%, rgba(220,83,52,.15), transparent 58%), linear-gradient(150deg,#2A3133 0%,#161B1D 100%); } .lgx-photo::before{ /* faint blueprint grid so empty slots read as intentional */ content:''; position:absolute; inset:0; z-index:1; opacity:.5; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px); } .lgx-photo::after{ /* the actual photo, painted over the fallback when present */ content:''; position:absolute; inset:0; z-index:2; /* --imgpos (2026-09-01): per-slot framing knob, settable inline in the WP block editor next to --img, e.g. style="--img:url(...); --imgpos:center 30%". The bake decides WHAT is in the file (process-photos.ps1 Crop/Zoom/Focus*); this decides which part of it survives the slot's cover crop. It is the only one of the two that can be changed without a re-bake and an SFTP upload, which is why it exists. Default `center` = the old behaviour exactly. */ background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center); } .lgx-photo .tag{ position:absolute; left:.85rem; bottom:.85rem; z-index:3; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.16); padding:.4rem .55rem; border-radius:var(--lgx-radius); backdrop-filter:blur(3px); } /* ============================================================ 1 · HERO ============================================================ */ /* Hero height: capped so the section below always peeks above the fold and the page reads as scrollable. 90vh + 8rem padding filled 95% of a 1280x720 screen and nothing showed below it. clamp() keeps it from ballooning on tall monitors. */ .lgx-hero{ background:var(--lgx-ink); min-height:clamp(460px,58vh,640px); display:flex; align-items:center; padding:5rem 0 4.5rem; overflow:hidden; } /* --- Background stack (2026-08-26) --------------------------------------- Four layers, painted bottom-up inside .lgx-hero-media, which is its own stacking context so none of this can reach past the hero: 1 .lgx-hero-photo-wrap parallax carrier — lgx-hero.js writes translate3d .lgx-hero-photo the photo + the slow lgx-drift ken-burns 2 .lgx-hero-network , the animated route network (lgx-hero.js) 3 .lgx-hero-scrim ink wash — the legibility guarantee 4 .lgx-hero-grid grid-line texture The scrim sits ABOVE the canvas deliberately: text contrast must not depend on whatever the canvas happens to be drawing underneath it that frame. The canvas alphas are picked to still read through the wash. Renamed from .lgx-hero-bg / .lgx-hero-overlay in the same pass — inner pages use the separate .lgx-hero-slot mechanism in lgx-inner.css and are untouched. */ .lgx-hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } /* inset:-3% gives the parallax translate somewhere to go without ever exposing an edge; the transition smooths the per-frame value lgx-hero.js writes. */ .lgx-hero-photo-wrap{ position:absolute; inset:-3%; z-index:1; will-change:transform; transition:transform .15s linear; } .lgx-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:center 62%; animation:lgx-drift 17s ease-in-out infinite alternate; } @keyframes lgx-drift{ from{ transform:scale(1) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-1.6%,-1.1%,0); } } /* screen blend, so the route glow adds light to the photo instead of sitting on it as a flat decal. The element is inert without JS — that is the fallback. */ .lgx-hero-network{ position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; mix-blend-mode:screen; opacity:1; pointer-events:none; } /* Scrim runs top-to-bottom, not left-to-right, since 2026-08-11: the copy is centred now, so the guaranteed-dark zone has to be the middle of the frame, not the left third. Weights dropped 2026-08-26 (.93/.84/.62 to .74/.58/.40) with the switch to the near-black network-map photo, then tuned against a measurement rather than a guess: hero captured with .lgx-hero-content hidden, then every pixel of each text box scored as if the type were composited over it. At these weights the .74-white lead runs median 10:1 / p1 8:1 and the .60-white trust line never drops below 5:1, while the wash stays light enough for the canvas route to read through it. Put a BRIGHT photo back in this slot and these numbers have to go back up — the .93/.84/.62 the crane photo needed is the reference point. */ .lgx-hero-scrim{ position:absolute; inset:0; z-index:3; pointer-events:none; background: linear-gradient(180deg,rgba(18,22,24,.74) 0%,rgba(18,22,24,.58) 46%,rgba(18,22,24,.40) 100%), radial-gradient(ellipse 60% 55% at 90% 18%,rgba(220,83,52,.22),transparent 66%); } .lgx-hero-grid{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.55; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 82px), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 82px); } /* width:100% is load-bearing. .lgx-hero is display:flex, so this container is a FLEX ITEM and sizes to its widest child rather than filling the hero. That let .lgx-h1's max-width drive the whole column (885px on a 1280px screen) and margin:0 auto centred it, so the headline never lined up with the logo or the other sections' left gutter. Verified live 2026-08-10. */ .lgx-hero .lgx-container{ max-width:var(--lgx-container); width:100%; text-align:center; } /* Centred hero (Ryan, 2026-08-11): the copy block sat visually off-balance to the left. .lgx-h1/.lgx-lead keep their max-widths for line length, so they need auto side margins to actually sit centred inside the container. !important is required — the base .lgx-h1 margin shorthand carries it. */ .lgx-hero .lgx-h1{ margin:0 auto 1.35rem !important; } .lgx-hero .lgx-cta-row{ justify-content:center; } /* Hero-scoped only: .lgx-lead is shared with every section head, and widening it globally would stretch those intros too. !important on the margin because the base .lgx-lead margin shorthand carries !important. */ .lgx-hero .lgx-lead{ max-width:72ch; margin:0 auto 2.1rem !important; } /* Trust line under the CTA row (2026-08-26). Two-class selector because lgx-inner.css lands AFTER this file in lgx-site.css and its `.lgx-page p` (0,1,1) would otherwise repaint this dark-on-dark. */ .lgx-hero .lgx-hero-trust{ display:inline-flex; align-items:center; gap:.6rem; margin:1.5rem 0 0 !important; font-family:var(--lgx-font-label); font-size:.78rem !important; font-weight:500; letter-spacing:.055em; line-height:1.5 !important; color:rgba(255,255,255,.6) !important; } .lgx-hero .lgx-hero-trust::before{ content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--lgx-accent); } /* Hero entrance stagger. The page-wide .lgx-reveal is a view()-timeline animation, and the hero is above the fold — it is already fully "entered" at load, so it resolves straight to its end frame and never actually plays here. These are plain time-based animations instead. They live inside no-preference so the reduced-motion and no-animation states ARE the end frame, rather than something that has to be undone with !important. */ @media (prefers-reduced-motion:no-preference){ .lgx-hero-content > .lgx-h1, .lgx-hero-content > .lgx-lead, .lgx-hero-content > .lgx-cta-row, .lgx-hero-content > .lgx-hero-trust{ animation:lgxHeroIn .78s cubic-bezier(.2,.8,.2,1) both; } .lgx-hero-content > .lgx-h1{ animation-delay:.05s; } .lgx-hero-content > .lgx-lead{ animation-delay:.18s; } .lgx-hero-content > .lgx-cta-row{ animation-delay:.3s; } .lgx-hero-content > .lgx-hero-trust{ animation-delay:.42s; } } @keyframes lgxHeroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } .lgx-hero-tag{ position:absolute; right:2.25rem; bottom:2.25rem; z-index:3; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.16); padding:.4rem .6rem; border-radius:var(--lgx-radius); } /* Removed 2026-08-09: hero eyebrow line, .lgx-hero-meta row, and the old section 2 TRUST STRIP (the 5-bullet band under the hero). The slot was re-occupied 2026-08-11 by the $700M+ TRUST & PROOF band below, which is a different design (single stat, not five bullets). Section numbers 3..8 keep their original labels. */ /* ============================================================ 2 · TRUST & PROOF — $700M+ assets-under-management band ============================================================ */ /* White band (Ryan, 2026-09-09). Second pass on the 2026-09-08 re-cast: the two-column-plus-ledger STRUCTURE is what he approved and is kept verbatim; the dark ink surface, the yard photo, and the "Trust & proof" eyebrow all came off. So the band now reads as a figure, not a hero continuation: left the $700M+ stat and its label right the body copy and a ghost CTA, separated by a full-height hairline below the four-cell ledger, rewritten 2026-09-09 from lifecycle stages (receiving/inventory/releases/delivery — those described the 4PL program only) to the four service motions LGX actually sells: integration, international, site coordination, heavy haul. NO HEADING in this section by design — the number is the visual (the 4PL copy doc's own layout note for this stat band). Heading order is unchanged by dropping the eyebrow: it was a

, so the h1 → h3 → h2 order this section has always produced is neither better nor worse than before. border-bottom is STRUCTURAL, not decoration, and the same call as .lgx-why: .lgx-motions below is also white, so without a hairline the two run together as one ~1900px slab and the section break disappears. Do not remove it while both bands are white. The ::before is the closing CTA band's 135° hairline texture at the same .035 — light-surface texture that keeps the band from reading flat without touching the white. Flatten it by deleting the ::before rule; nothing else depends on it. Optional band plate: --bgimg / --bgpos work here exactly as on the process and reach bands. The plate's field MUST now be #FFFFFF (it was #1E2527 for one day, 2026-09-08) — see bake-washes.ps1's "Base MUST match the band" note — and re-baking under an existing filename needs a ?v= bump. Colour notes for this surface: --lgx-accent is 3.94:1 on white, which is an AA PASS for the 6.4rem stat glyph (large text needs 3:1) and an AA FAIL for anything at body or label size. So the accent appears here only as the stat's plus and as the ledger's non-text ticks; every small accent-coloured string uses --lgx-accent-deeper (6.47:1). The

and rules keep their .lgx-page prefixes for the usual reason (see the motions note below). */ /* SEAMLESS WHITE (Ryan, 2026-09-09). Two things came off here, deliberately: - the border-bottom hairline. It was structural — .lgx-motions below is also white, so the hairline was the section break. The ask is explicitly that there be no break: this band and What We Do read as one white field, separated by padding alone. Do not "restore" it as a fix. - the 135deg hairline texture that used to run as a ::before. At .035 over white it read as a faint grey tint rather than as texture, which is what "remove the background image, make it solid white" was pointing at. The band is now flat --lgx-white, byte-identical in colour to .lgx-motions. --bgimg still works if a plate is ever wanted, but note that a plate would re-introduce exactly the tint that was just removed. */ .lgx-proof{ background:var(--lgx-white); color:var(--lgx-text); padding:6.25rem 0 5.25rem; overflow:hidden; background-image:var(--bgimg,none); background-size:cover; background-position:var(--bgpos,center); } /* gap:0 with symmetric column padding, NOT grid-gap: the divider is a border-left on the copy column, and with a gap it would render hard against the figure column's edge instead of centred between the two. align-items stays stretch so the rule runs the full row height; each column centres its own content instead. */ .lgx-proof-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:0; align-items:stretch; } .lgx-proof-figure{ padding-right:4rem; display:flex; flex-direction:column; justify-content:center; } .lgx-proof-copy{ padding-left:4rem; border-left:1px solid var(--lgx-line-light); display:flex; flex-direction:column; justify-content:center; } .lgx-page .lgx-proof-stat{ font-family:var(--lgx-font-display); font-size:clamp(3.6rem,7.2vw,6.4rem); font-weight:800; letter-spacing:-.04em; line-height:.95; color:var(--lgx-ink); margin:0 0 .8rem 0; } .lgx-proof-stat .plus{ color:var(--lgx-accent); } .lgx-page .lgx-proof-label{ font-family:var(--lgx-font-label); font-size:clamp(.8rem,1.4vw,.94rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-text); margin:0; /* 34ch, not 26: at 26 the 45-character label broke to THREE lines under the stat (the ch unit ignores the .14em tracking, so the box measured ~20 real characters wide). 34 lands it on two. */ max-width:34ch; line-height:1.5; } .lgx-page .lgx-proof-body{ font-size:1.05rem; line-height:1.7; color:var(--lgx-text-muted); max-width:60ch; margin:0 0 2rem 0; } /* the column is a flex box, so the button would stretch to full width without this — the same reason .lgx-cta-row children do not stretch. */ /* margin-bottom, not just align-self (Ryan 2026-09-09: "move the button up slightly to separate from the light grey horizontal section line"). The copy column is the taller of the two, so it sets the grid row height and the button sits flush at its bottom edge — 4rem from the ledger rule once the specificity fix restores that margin. This lifts it a further .9rem. */ .lgx-page .lgx-proof-copy .lgx-btn{ align-self:flex-start; margin-bottom:.9rem; } /* service ledger: four cells, hairline-ruled top and between, in the same idiom as the reach lanes.

    so the running order is semantic; markers are our own. Cell copy mirrors the approved service pages — project logistics (integration), forwarding (ocean FCL / air / OTR), on-site coordination, and heavy lift & OOG (super loads, permits, escorts). No new claims: no LCL, no in-house customs, no NVOCC. */ /* THE .lgx-page PREFIX ON THIS RULE IS MANDATORY, and for a DIFFERENT reason than the

    rules below. Kadence's content.min.css carries .single-content ul, .single-content ol{ margin:0 0 var(--global-md-spacing); padding-left:2em; } at (0,1,1), which beats a bare .lgx-proof-ledger (0,1,0) from any stylesheet. Unprefixed, it silently ate this list's margin-top AND added a 2em (34px) left pad, so the ledger lost its 4rem gap and sat 34px right of the stat it is supposed to line up with. Caught live 2026-09-09, NOT locally: the home-preview.html harness loads only lgx-site.css, so no theme CSS is in the cascade there and this class of bug cannot reproduce. Verify list spacing on staging, not in the harness. The same fix is applied to .lgx-why-facts and .lgx-reach-lanes, which had been carrying the bug unnoticed since launch. */ .lgx-page .lgx-proof-ledger{ list-style:none; padding:0; margin:4rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--lgx-line-light); } .lgx-proof-ledger li{ position:relative; padding:2rem 1.75rem 0 1.6rem; border-left:1px solid var(--lgx-line-light); } .lgx-proof-ledger li:first-child{ border-left:0; padding-left:0; } .lgx-proof-ledger li:last-child{ padding-right:0; } /* accent tick on the rule above each cell: the ledger's version of the eyebrow tick. Non-text, so full-strength --lgx-accent is correct here. */ .lgx-proof-ledger li::before{ content:''; position:absolute; top:-1px; left:1.6rem; width:26px; height:2px; background:var(--lgx-accent); } .lgx-proof-ledger li:first-child::before{ left:0; } .lgx-proof-ledger .n{ display:block; font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .75rem 0; } /* explicit colour: Kadence's inline global CSS carries a bare h3{color:...} which beats inheritance from the band (see the motions note below). */ .lgx-proof-ledger h3{ font-family:var(--lgx-font-display); font-size:1.08rem !important; font-weight:700 !important; letter-spacing:-.01em !important; line-height:1.25 !important; margin:0 0 .5rem 0 !important; color:var(--lgx-text) !important; } .lgx-page .lgx-proof-ledger p{ font-size:.92rem; line-height:1.55; color:var(--lgx-text-muted); margin:0; } /* ============================================================ 3 · WHAT WE DO — THREE MOTIONS ============================================================ */ .lgx-motions{ background:var(--lgx-white); padding:7.5rem 0; } .lgx-section-head{ max-width:760px; margin-bottom:3.5rem; } /* Balanced mix (Ryan, 2026-08-11): sections whose content below is symmetric and full-width (motions, process, industries) centre their heads; the asymmetric two-column editorial sections (why, reach) stay left-aligned so the head lines up with its own text column. The closing CTA was already centred. .lgx-eyebrow is inline-flex, so text-align centres it as a unit. */ .lgx-section-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-section-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } .lgx-motions-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:1.25rem; } .lgx-motion{ display:flex; flex-direction:column; border-radius:var(--lgx-radius); overflow:hidden; transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .3s ease; } .lgx-motion:hover{ transform:translateY(-5px); } .lgx-motion-num{ font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } /* primary motion — large dark card */ /* .lgx-page prefix is mandatory here: the card is an , so the bare .lgx-motion-primary (0,1,0) lost its colour to .lgx-page a{color:inherit} (0,1,1) and the card inherited the light-surface ink instead of white. */ .lgx-page .lgx-motion-primary{ grid-row:span 2; background:linear-gradient(165deg,#1E2527 0%,#2B211B 100%); border:1px solid var(--lgx-line-dark); color:#fff; position:relative; } .lgx-motion-primary:hover{ box-shadow:0 26px 54px rgba(220,83,52,.22); border-color:rgba(220,83,52,.4); } .lgx-motion-primary .lgx-photo{ height:300px; border-radius:0; } .lgx-motion-primary .pad{ padding:2.5rem 2.4rem 2.6rem; display:flex; flex-direction:column; flex:1; } .lgx-motion-primary .lgx-motion-num{ color:rgba(255,255,255,.78); margin-bottom:1rem; } /* colour is explicit, not inherited: Kadence's inline global CSS carries a bare `h3{color:var(--global-palette3)}` (#1A1A1A), which beats inheritance from the card and rendered this heading at 1.11:1 on the dark card — invisible. */ .lgx-motion-primary h3{ font-family:var(--lgx-font-display); font-size:1.9rem !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.12 !important; margin:0 0 1rem 0 !important; color:#fff; } /* NOTE: every component rule that targets a bare

    MUST stay prefixed with .lgx-page. split-home.ps1 concatenates lgx-inner.css AFTER this file into lgx-site.css, and lgx-inner.css carries `.lgx-page p{ color:var(--lgx-text); font-size:1.02rem }` (0,1,1). An unprefixed `.lgx-component p` is also (0,1,1), so the later inner rule silently won and repainted every home paragraph dark #1A2123 — invisible in the Why-LGX dark block and on the orange CTA band, and the wrong size everywhere. Prefixing lifts these to (0,2,1). Verified live 2026-08-09. Same failure mode as the .lgx-btn-* note above. */ .lgx-page .lgx-motion-primary p{ font-size:1.02rem; line-height:1.6; color:rgba(255,255,255,.74); margin:0 0 1.6rem 0; } .lgx-motion-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.92rem; color:var(--lgx-accent-deep); } .lgx-motion-primary .lgx-motion-link{ color:#fff; } .lgx-motion-primary .lgx-motion-link .arw,.lgx-motion-side .lgx-motion-link .arw{ transition:transform .25s ease; } .lgx-motion:hover .lgx-motion-link .arw{ transform:translateX(5px); } /* side motions — compact horizontal cards */ .lgx-motion-side{ background:var(--lgx-light); border:1px solid var(--lgx-line-light); flex-direction:row; min-height:0; } .lgx-motion-side:hover{ box-shadow:0 18px 38px rgba(0,0,0,.09); border-color:rgba(220,83,52,.32); } .lgx-motion-side .lgx-photo{ width:38%; flex:none; border-radius:0; } .lgx-motion-side .pad{ padding:1.9rem 1.8rem; display:flex; flex-direction:column; flex:1; } .lgx-motion-side .lgx-motion-num{ color:var(--lgx-steel); margin-bottom:.7rem; } .lgx-motion-side h3{ font-family:var(--lgx-font-display); font-size:1.32rem !important; font-weight:700 !important; letter-spacing:-.015em !important; margin:0 0 .55rem 0 !important; color:var(--lgx-text) !important; } .lgx-page .lgx-motion-side p{ font-size:.93rem; line-height:1.55; color:var(--lgx-text-muted); margin:0 0 1.1rem 0; } .lgx-motion-side .lgx-motion-link{ color:var(--lgx-accent-deep); font-size:.88rem; } .lgx-fastpath{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.2rem; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; color:var(--lgx-text); } .lgx-fastpath .pill{ background:var(--lgx-accent-soft); color:var(--lgx-accent-deep); padding:.18rem .5rem; border-radius:var(--lgx-radius); letter-spacing:.06em; text-transform:uppercase; font-size:.66rem; } /* ============================================================ 4 · HOW LGX ORCHESTRATES — PROCESS ============================================================ */ /* Terracotta band (Ryan, 2026-08-28). The type palette below is the inverted one this band already ran on 2026-08-10/11 (commit c42b717), recovered verbatim — the layout never changed, so the ratios measured then still hold. What is new is the surface: instead of a flat --lgx-accent-deep fill it now carries the "Terracotta Architectural Site Plan" plate, baked by _build/bake-washes.ps1 ($bandArt, 0.87 multiply) precisely so its field lands on ~#BB4725 = 5.2:1 against white, i.e. where the flat fill already sat. The plate's art is hairline linework, so it never rises above that. KEEP background:var(--lgx-accent-deep): it is what shows if the JPG 404s and it is what every ratio below assumes. The

    rules KEEP their .lgx-page prefixes — lgx-inner.css is concatenated after this file and its `.lgx-page p` (0,1,1) repaints any unprefixed component paragraph (see the motions note above). */ .lgx-process{ background:var(--lgx-accent-deep); color:#fff; padding:7.5rem 0; } /* section head: .lgx-eyebrow / .lgx-h2 / .lgx-lead are shared with the light sections, so they need band-scoped overrides rather than edits to the base. */ .lgx-process .lgx-eyebrow{ color:#fff !important; } .lgx-process .lgx-eyebrow::before{ background:#fff; } .lgx-process .lgx-h2{ color:#fff; } .lgx-process .lgx-lead.on-light{ color:rgba(255,255,255,.92) !important; } /* 4.64:1 */ .lgx-process-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem; position:relative; } .lgx-process-grid::before{ content:''; position:absolute; top:46px; left:3%; right:3%; height:1px; background:rgba(255,255,255,.3); z-index:0; } .lgx-step{ position:relative; z-index:1; } /* numerals invert: white disc, deep-orange numeral (6.47:1). Unscoped, like the .lgx-step p rule below — .lgx-step is home-only markup (inner pages render .wp-block-* instead), so there is nothing else on the site to repaint. */ .lgx-step-num{ font-family:var(--lgx-font-display); font-size:2.2rem !important; font-weight:800 !important; color:var(--lgx-accent-deeper) !important; line-height:1 !important; letter-spacing:-.03em !important; margin:0 0 1.1rem 0 !important; display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:#fff; border:1px solid rgba(255,255,255,.75); border-radius:50%; } /* explicit colour required: Kadence's inline global CSS sets a bare `h3{color:var(--global-palette3)}` (dark), which beats inheritance. */ .lgx-process .lgx-step h3{ font-family:var(--lgx-font-display); font-size:1.06rem !important; font-weight:700 !important; letter-spacing:-.01em !important; margin:0 0 .55rem 0 !important; color:#fff; } .lgx-page .lgx-step p{ font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.92); margin:0; } .lgx-process-close{ margin-top:3.4rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; padding-top:2.4rem; border-top:1px solid rgba(255,255,255,.28); } .lgx-page .lgx-process-close p{ font-size:1.18rem; font-weight:500; line-height:1.5; max-width:62ch; margin:0; flex:1; min-width:280px; color:rgba(255,255,255,.94); } .lgx-process-close p strong{ color:#fff; font-weight:700; } /* the ghost button reads as dark-on-light by default; on this band it has to invert. The .lgx-page prefix is mandatory — it is an , and `.lgx-page a{color:inherit}` (0,1,1) would otherwise eat the colour. */ .lgx-page .lgx-process .lgx-btn-ghost{ color:#fff !important; border-color:rgba(255,255,255,.55) !important; } .lgx-page .lgx-process .lgx-btn-ghost:hover{ background:#fff; color:var(--lgx-accent-deeper) !important; border-color:#fff !important; } /* ============================================================ 5 · ASSET-LIGHT / WHY LGX ============================================================ */ /* Pure white since 2026-08-28 (Ryan). This was the page's dark contrast block until the terracotta band above took that job; the markup's on-dark/is-light modifiers came off with it. The radial orange bloom that used to sit in the top-left corner went too — at .12 over white it read as a peach stain, not a glow, and "pure white" was the ask. border-bottom is structural, not decoration: .lgx-industries below is also white, so without a hairline the two run together as one ~2000px slab. */ /* border-bottom removed 2026-09-09 with the proof band's, same ask. It was here for the same structural reason (.lgx-industries below is also white) and is likewise not to be restored. */ .lgx-why{ background:var(--lgx-white); color:var(--lgx-text); padding:7.5rem 0; overflow:hidden; } .lgx-why-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:4rem; align-items:center; } .lgx-page .lgx-why-facts{ list-style:none; padding:0; margin:2rem 0 0 0; } /* prefix: see the ledger note */ .lgx-why-facts li{ padding:1.25rem 0; border-top:1px solid var(--lgx-line-light); } .lgx-why-facts li:last-child{ border-bottom:1px solid var(--lgx-line-light); } /* colour stays explicit (not inherited) for the same reason it did on the dark band: Kadence's inline global CSS carries a bare `h3{color:var(--global-palette3)}` that beats inheritance from the section. */ .lgx-why-facts h3{ font-family:var(--lgx-font-display); font-size:1.08rem !important; font-weight:700 !important; margin:0 0 .35rem 0 !important; color:var(--lgx-text) !important; display:flex; align-items:center; gap:.7rem; } .lgx-why-facts h3::before{ content:''; width:9px; height:9px; background:var(--lgx-accent); flex:none; } .lgx-page .lgx-why-facts p{ font-size:.93rem; line-height:1.55; color:var(--lgx-text-muted); margin:0; padding-left:1.4rem; } .lgx-why-photo{ height:100%; min-height:440px; } /* ============================================================ 6 · INDUSTRIES ============================================================ */ .lgx-industries{ background:var(--lgx-white); padding:7.5rem 0; } .lgx-industries-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } .lgx-ind-card{ display:flex; flex-direction:column; border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); overflow:hidden; background:var(--lgx-white); transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .3s ease; } .lgx-ind-card:hover{ transform:translateY(-5px); box-shadow:0 24px 48px rgba(0,0,0,.1); border-color:rgba(220,83,52,.34); } .lgx-ind-card .lgx-photo{ height:210px; border-radius:0; } /* accent-deep, not accent: white on #DC5334 is 3.94:1 (AA fail at this size). */ .lgx-ind-priority{ position:absolute; top:1rem; right:1rem; z-index:3; font-family:var(--lgx-font-label); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--lgx-accent-deep); padding:.32rem .55rem; border-radius:var(--lgx-radius); } .lgx-ind-body{ padding:2rem 1.9rem; display:flex; flex-direction:column; flex:1; } .lgx-ind-card h3{ font-family:var(--lgx-font-display); font-size:1.45rem !important; font-weight:700 !important; letter-spacing:-.02em !important; margin:0 0 .7rem 0 !important; } .lgx-page .lgx-ind-card p{ font-size:.95rem; line-height:1.58; color:var(--lgx-text-muted); margin:0 0 1.4rem 0; flex:1; } .lgx-ind-link{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--lgx-accent-deep); } .lgx-ind-link .arw{ transition:transform .25s ease; } .lgx-ind-card:hover .lgx-ind-link .arw{ transform:translateX(5px); } /* ============================================================ 7 · REACH ============================================================ */ /* Dark map band since 2026-08-28 (Ryan): "USA Mex Can fade 1.png" runs as the surface itself and the type inverts to light. #373839 is sampled from the plate's own field — see the background-image note below for why that has to match exactly. White on it is 11.2:1. */ .lgx-reach{ background:#373839; color:#fff; padding:7.5rem 0; } /* Band art (2026-08-27 image pass; both plates recut 2026-08-28): the art is pre-baked onto its surface by _build/bake-washes.ps1, so this is a plain cover image with no opacity tricks; sections opt in via an inline --bgimg. A 404 just leaves the flat surface — which is exactly why each band's background-color has to equal its plate's field colour: process = --lgx-accent-deep, reach = #373839. Get that wrong and the band reads as an off-colour rectangle for as long as the image is missing. BUMP THE ?v= ON THE INLINE --bgimg WHENEVER YOU RE-BAKE A PLATE UNDER ITS EXISTING FILENAME. uploads/lgx/ is served with Cache-Control max-age= 315360000 (ten years), so a browser that fetched the old bytes at that exact URL never revalidates and there is no server-side purge that reaches it — not a Kinsta cache clear, not a CDN purge. Caught live 2026-08-28: the plates were correct at the origin and byte-verified, and the page still rendered the previous art in a browser that had loaded it earlier that day. The query string costs nothing and makes the swap a new resource. */ /* --bgpos is the band-plate equivalent of --imgpos above: set it inline next to --bgimg to slide the plate inside the band without re-baking. */ .lgx-process,.lgx-reach{ background-image:var(--bgimg,none); background-size:cover; background-position:var(--bgpos,center); } .lgx-reach-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:4rem; align-items:center; } .lgx-page .lgx-reach-lanes{ list-style:none; padding:0; margin:0; } /* prefix: see the ledger note */ .lgx-reach-lanes li{ padding:1.3rem 0; border-top:1px solid var(--lgx-line-dark); display:flex; align-items:flex-start; gap:1rem; } .lgx-reach-lanes li:last-child{ border-bottom:1px solid var(--lgx-line-dark); } /* the lane key is the one accent-coloured text on this band, and neither brand accent survives the move to a dark surface: --lgx-accent is 2.72:1 on #373839 and accent-deep is 1.6:1, both AA fails at .72rem. Nor does #FF7A55, the light-accent tint lgx-inner.css already uses for body links on ink bands — that one is 6.7:1 on --lgx-ink (#161B1D) but only 4.17:1 on this map field, which is a good deal lighter. #FF9670 is the same idea taken one step up: 5.25:1 here, and close enough to the plate's own route colour (#E58861) that the key reads as part of the map rather than against it. If this band ever goes back to an ink surface, use #FF7A55 and delete this note. */ /* min-width added 2026-09-09 with the switch from lanes to modes. The keys used to be similar lengths (CN → US GULF / CN → CANADA / EVERYWHERE) so the flex row looked aligned by luck; OCEAN / AIR / DOOR TO DOOR spans 23px to 102px and left the three titles ragged by 80px. 6.75rem clears the longest key with headroom. If a longer key is ever added, re-measure. */ .lgx-reach-lanes .k{ font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FF9670; white-space:nowrap; padding-top:.2rem; min-width:6.75rem; } .lgx-reach-lanes .v{ font-size:1rem; line-height:1.5; color:#fff; } .lgx-reach-lanes .v small{ display:block; color:rgba(255,255,255,.7); font-size:.85rem; margin-top:.2rem; } /* UNUSED as of 2026-08-28 — the right column of this section is .lgx-reach-lanes, not a map card; nothing in home-page.html carries .lgx-reach-map. Left in place (still light-surface, so it would need inverting first) rather than deleted as a drive-by in a colour pass. */ .lgx-reach-map{ aspect-ratio:5/4; border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); position:relative; overflow:hidden; background: radial-gradient(circle at 22% 42%,var(--lgx-accent) 0 4px,transparent 5px), radial-gradient(circle at 78% 36%,var(--lgx-accent) 0 4px,transparent 5px), radial-gradient(circle at 50% 64%,rgba(220,83,52,.55) 0 3px,transparent 4px), repeating-linear-gradient(0deg,rgba(26,33,35,.05) 0 1px,transparent 1px 30px), repeating-linear-gradient(90deg,rgba(26,33,35,.05) 0 1px,transparent 1px 30px), var(--lgx-white); } .lgx-reach-map::after{ content:'NATIONAL · INTERNATIONAL'; position:absolute; left:1.1rem; bottom:1rem; font-family:var(--lgx-font-label); font-size:.7rem; font-weight:700; letter-spacing:.14em; color:var(--lgx-text-muted); } /* ============================================================ 8 · CLOSING CTA ============================================================ */ /* White since 2026-08-28 (Ryan). This was the accent-gradient band; the orange moved up to "How we work". Everything here flipped with the surface — ink heading (15.9:1), muted body, accent-deep phone links (5.2:1) — and the button had to change class in the markup: .lgx-btn-light is a white fill, which is nothing on a white band. Recover the gradient variant from git (this commit's parent) if it is ever wanted back. NOTE the paired edit in lgx-inner.css. Its `.lgx-page .lgx-cta a:not(.lgx-btn)` rule painted these links #fff (0,3,1) from AFTER this file in the concatenated lgx-site.css, so nothing here could have won; the .lgx-cta half of that selector was dropped there. The inner-page CTA bands it shared the rule with are still orange and keep theirs. */ .lgx-cta{ background:var(--lgx-white); color:var(--lgx-text); text-align:center; padding:7.5rem 0; overflow:hidden; } /* same 135° hairline texture, inverted to ink. .035, not the .045 it ran at on the gradient: dark-on-light hairlines read stronger than light-on-dark. */ .lgx-cta::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(26,33,35,.035) 0 1px,transparent 1px 64px); pointer-events:none; } .lgx-cta h2{ font-family:var(--lgx-font-display); color:var(--lgx-text) !important; font-size:clamp(2.1rem,4.6vw,3.4rem) !important; font-weight:800 !important; letter-spacing:-.025em !important; line-height:1.06 !important; margin:0 auto 1.2rem !important; max-width:20ch; } .lgx-cta p.sub{ font-size:1.16rem; line-height:1.55; color:var(--lgx-text-muted); max-width:54ch; margin:0 auto 2.6rem; } .lgx-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-cta-phone{ margin-top:2.2rem; font-family:var(--lgx-font-label); font-size:.92rem; letter-spacing:.02em; color:var(--lgx-text-muted); } /* no underline on the phone / send-your-load links (Ryan, 2026-08-11): bold + accent-deep carries the affordance; underline returns on hover. Two classes deep (0,2,1) so it also outranks lgx-inner.css's `.lgx-page p a` (0,1,2), which would otherwise re-underline them from later in lgx-site.css. */ .lgx-page .lgx-cta-phone a{ color:var(--lgx-accent-deep); font-weight:700; } .lgx-page .lgx-cta-phone a:hover{ color:var(--lgx-accent-deeper); text-decoration:underline; text-underline-offset:2px; } /* The eyebrow tick needs no override here any more: it was steel-tinted grey only because --lgx-accent was 1.2:1 against the orange gradient. On white the base .lgx-eyebrow::before accent tick reads correctly. */ /* ---------- Scroll reveal (CSS-only, no inline JS — avoids WAF script-tag block) ---------- */ .lgx-reveal{ opacity:1; transform:none; } @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .lgx-reveal{ opacity:0; transform:translateY(26px); animation:lgxIn .85s cubic-bezier(.2,.8,.2,1) both; animation-timeline:view(); animation-range:entry 0% entry 32%; } } } @keyframes lgxIn{ to{ opacity:1; transform:none; } } /* on the dark reach band since 2026-08-28: the muted ink this used to carry is 1.4:1 on the map plate. */ .lgx-page .lgx-reach-note{ font-size:1rem; line-height:1.6; color:rgba(255,255,255,.72); max-width:60ch; margin:0; } /* is-centered is a LAYOUT modifier only. It used to force white text too, which was fine while its one user — the closing-CTA eyebrow — sat on the orange band. That band went white 2026-08-28, so the colour moved out and the base .lgx-eyebrow rule (accent-deeper, 6.5:1 on white) applies. */ .lgx-eyebrow.is-centered{ justify-content:center; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1000px){ .lgx-motions-grid{ grid-template-columns:1fr; } .lgx-motion-primary{ grid-row:auto; } .lgx-why-grid,.lgx-reach-grid{ grid-template-columns:1fr; gap:2.6rem; } .lgx-why-photo{ min-height:320px; order:-1; } .lgx-process-grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1.4rem; } .lgx-process-grid::before{ display:none; } .lgx-industries-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } /* the divider becomes a stacked gap: padding and border-left both go, or the figure column keeps a 4rem right pad it no longer has a neighbour for. */ .lgx-proof-grid{ grid-template-columns:1fr; gap:2.4rem; } .lgx-proof-figure{ padding-right:0; } .lgx-proof-copy{ padding-left:0; border-left:0; } .lgx-page .lgx-proof-ledger{ grid-template-columns:1fr 1fr; gap:0 2.5rem; } /* two-up: the column rules go, every cell keeps its tick; row 2 gets a hairline */ .lgx-proof-ledger li{ border-left:0; padding-left:0; padding-right:0; } .lgx-proof-ledger li::before{ left:0; } .lgx-proof-ledger li:nth-child(n+3){ border-top:1px solid var(--lgx-line-light); margin-top:2rem; } } @media (max-width:680px){ .lgx-container{ padding:0 1.3rem; } /* min-height:auto lived here until 2026-08-26; the hero now holds 92svh on phones (see the max-width:720px block below) so the map has room to read. */ .lgx-hero{ padding:4rem 0 3.25rem; } .lgx-hero .lgx-lead{ font-size:1.05rem !important; } .lgx-motions,.lgx-process,.lgx-why,.lgx-industries,.lgx-reach,.lgx-cta{ padding:4.8rem 0 !important; } .lgx-proof{ padding:4.8rem 0 !important; } .lgx-proof-grid{ gap:1.9rem; } .lgx-page .lgx-proof-ledger{ grid-template-columns:1fr; margin-top:3rem; } .lgx-proof-ledger li{ padding-top:1.5rem; } .lgx-proof-ledger li:nth-child(n+2){ border-top:1px solid var(--lgx-line-light); margin-top:1.5rem; } .lgx-motion-side{ flex-direction:column; } .lgx-motion-side .lgx-photo{ width:100%; height:150px; } .lgx-process-grid{ grid-template-columns:1fr; } .lgx-hero-tag{ display:none; } .lgx-cta-row{ flex-direction:column; } .lgx-btn{ width:100%; } } /* Hero-only phone rules. 720px, not the 680px above, because that breakpoint is global and moving it would restack every other section's CTA row too. */ @media (max-width:720px){ /* svh, not vh: on iOS the URL bar makes 92vh taller than the visible viewport and pushes the CTA row off-screen. vh first as the fallback for anything that does not know svh. */ .lgx-hero{ min-height:92vh; min-height:92svh; } .lgx-hero .lgx-cta-row{ flex-direction:column; width:100%; } .lgx-hero .lgx-btn{ width:100%; } /* the map's busiest band sits higher in frame once the hero goes tall */ .lgx-hero-photo{ background-position:center 54%; } .lgx-hero .lgx-hero-trust{ font-size:.72rem !important; letter-spacing:.045em; } } @media (prefers-reduced-motion:reduce){ .lgx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .lgx-btn,.lgx-motion,.lgx-ind-card{ transition:none !important; } /* Hero: freeze the ken-burns drift and neutralise the parallax carrier. lgx-hero.js reads the same query and paints the route network as a single static frame, so the whole hero holds still. The entrance stagger needs no override — it only exists inside prefers-reduced-motion:no-preference. */ .lgx-hero-photo{ animation:none !important; } .lgx-hero-photo-wrap{ transform:none !important; transition:none !important; } } /* ============================================================ LGX INNER-PAGE SKIN v3 (2026-09-17) ------------------------------------------------------------ Styles the 23 pages that render-pages.ps1 emits from the copy docs. Concatenated into lgx-site.css by split-home.ps1 AFTER lgx-home.css (tokens + shared primitives: .lgx-container .lgx-eyebrow .lgx-h1 .lgx-h2 .lgx-lead .lgx-btn-* .lgx-cta-row .lgx-photo .lgx-reveal) and BEFORE the three custom page sheets. SCOPE - the .lgx-page collision. All four page types share the .lgx-page wrapper (it carries the design tokens), and this file comes after lgx-home.css, so a rule written against .lgx-page alone silently outranks the home master at equal specificity. Rules in this file therefore fall into exactly two groups: 0. FROZEN SHARED rules that already reach the custom masters (measured 2026-09-17 by running every selector of the previous skin against the live DOM of /, /services/4pl/ and /services/project-logistics-4pl/: `.lgx-page p`, the p a / li a / td a link pair, home's .lgx-cta-phone rule, the canvas trio, and the theme chrome). Their selectors AND declarations are kept byte for byte. Change one and the three protected pages change. 1. RENDERED-PAGE rules scoped to `.lgx-rendered`, a class only the renderer's wrapper carries (

    ). Nothing here can reach a custom master. Acceptance test: the computed-style fingerprint of the three custom pages at 1440 and 390 is identical before and after (Decisions Log 2026-09-17). MARKUP (render-pages.ps1 v3): one wp:html block, no WP block scaffolding.
    ...
    . Surfaces are DECLARED per section in the copy doc (**Surface:**), never computed from position; band-check.mjs enforces the rhythm rule (no two light bands touch, hero and closer distinct). CASCADE TRAPS this file keeps clearing (all learned live): 1. Kadence's inline global CSS has a bare h3{color:var(--global- palette3)} and a global heading colour that beat inheritance: every heading here states its colour. 2. `.lgx-page a{color:inherit}` in lgx-home.css is (0,1,1): button colour overrides stay prefixed with .lgx-page. 3. Kadence content.min.css: `.single-content ul, ol` (0,1,1), `.single-content figure/p/table/h1-h6` (0,1,1). Every list, figure, table and heading rule here is at least (0,2,0), which wins on class count. 4. Kadence's Customizer emits `.entry-content-wrap{padding:2rem}`; the frozen :has() canvas rule zeroes it for every .lgx-page stack, custom or rendered. CONTRAST REFERENCE (WCAG, computed 2026-09-17; AA = 4.5 normal, 3.0 large >=24px or >=18.66px bold). Every pairing used below carries its ratio in a comment at the rule. on ink #161B1D: #fff 17.38 | .82 white 11.93 | .74 white 9.91 .72 white 9.44 | #FF9670 8.15 | #FF7A55 6.76 --lgx-accent 4.41 (large only) ink + accent bloom peak (.18-.20): .74 white 8.33 | #FF9670 6.55 #FF7A55 5.43 on ink-2 #1E2527: #fff 15.57 | .78 white 9.97 | #FF9670 7.30 #FF7A55 6.05 on white: --lgx-text 16.33 | muted 5.28 | deeper 6.47 deep 5.20 | --lgx-accent 3.94 (large only) on paper #F4F4F2: --lgx-text 14.83 | muted 5.07 | deeper 5.88 deep 4.72 | --lgx-accent 3.58 (large only) plate #BE4423: #fff 5.20 on the field, 4.79 on a .05 white grid line, 6.47 where the bloom reaches #A63A1D accent gradient: #fff 5.20 (deep end) to 6.47 (deeper end) washes: plate-contrast.ps1 per file; see the wash rule. DEPLOY ORDER (2026-09-17): additive CSS first (this file with the v2 skin appended as a legacy block during the push, inert against v3 markup and vice versa), then the 23 bodies + Kadence metas, then this file alone. ============================================================ */ /* ============================================================ 0. FROZEN SHARED RULES - these reach home, 4pl and PLHH. Do not edit. ============================================================ */ .lgx-page p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text); } /* content links only (F31): accent-deep passes AA at body size (F34), underlined (F35) */ .lgx-page p a, .lgx-page li a, .lgx-page td a{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:2px; } .lgx-page p a:hover, .lgx-page li a:hover, .lgx-page td a:hover{ color:var(--lgx-accent); } /* home closing band only (Ryan, 2026-08-11): the phone / send-your-load line drops its underline; bold accent-deep carries the affordance and the underline returns on hover. */ .lgx-page .lgx-cta .lgx-cta-phone a{ text-decoration:none; } .lgx-page .lgx-cta .lgx-cta-phone a:hover{ text-decoration:underline; } /* ---- the canvas (2026-08-11): kill Kadence's boxed article ---- The grey box goes on every non-home page, stack or stub; the seams only collapse where a .lgx-page stack spans the page, so the two hub stubs (/about/, /contact/) keep Kadence's gutters. A browser without :has() keeps today's layout - "unfixed", never "broken". The custom masters rely on these three rules as much as the rendered pages do. */ body:not(.home) article.entry.content-bg{ background:transparent; box-shadow:none; } body:not(.home) .content-area:has(.lgx-page){ margin-top:0; margin-bottom:0; } body:not(.home) .entry-content-wrap:has(.lgx-page){ padding:0; } /* ---- theme chrome: Kadence header/footer, OUTSIDE the .lgx-page wrapper ---- */ .header-button, .mobile-header-button{ white-space:nowrap; } /* Kadence's keyboard skip link paints --lgx-accent on white = 3.74:1 (AA fail). accent-deeper takes it to 6.47:1. Only visible on focus, but it is the first thing a keyboard user hits. */ .skip-link, .skip-link:focus{ color:var(--lgx-accent-deeper,#A63A1D) !important; } /* home full-bleed: Kadence's Customizer emits `.entry-content-wrap{padding:2rem}` in its inline global CSS. body.home (0,2,1) outranks it without !important - verified live 2026-08-10. Scoped to the front page on purpose. */ body.home .entry-content-wrap{ padding:0; } /* sticky header. #wrapper carries overflow:clip, which usually kills position:sticky - it does not here, because clip creates a clipping box, not a scroll container (verified live). z-index:100 clears .lgx-hero-media (z 0) and .lgx-container (z 2). The admin bar is fixed only above 782px. */ #masthead{ position:sticky; top:0; z-index:100; } body.admin-bar #masthead{ top:32px; } @media (max-width:782px){ body.admin-bar #masthead{ top:0; } } /* footer: 4 columns of custom-HTML widgets (footer1-4) + legal band. Copy and column order come from Copy doc 25, Global Elements Section 2. */ .site-footer{ background:#161B1D !important; } .site-footer, .site-footer p, .site-footer li{ color:rgba(255,255,255,.78); } .site-footer a{ color:rgba(255,255,255,.78); text-decoration:none; } .site-footer a:hover{ color:#FF7A55; text-decoration:underline; } .lgx-fcol{ font-size:.92rem; line-height:1.65; } .lgx-fh{ font-family:var(--lgx-font-label,inherit); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#FFFFFF; margin:0 0 1rem 0; } .lgx-flist{ list-style:none; margin:0; padding:0; } .lgx-flist li{ margin:0 0 .55rem 0; } .lgx-ftag{ color:#FFFFFF; margin:0 0 1.1rem 0; } .lgx-faddr, .lgx-fcontact, .lgx-freach{ margin:0 0 .9rem 0; } .lgx-freach{ color:rgba(255,255,255,.62); } .lgx-fbtn{ display:inline-block; background:#BE4423; color:#FFFFFF !important; padding:.72rem 1.2rem; border-radius:3px; font-weight:700; font-size:.85rem; letter-spacing:.02em; white-space:nowrap; transition:background .2s ease,transform .15s ease; } .lgx-fbtn:hover{ background:#A63A1D; color:#FFFFFF !important; text-decoration:none; transform:translateY(-2px); } /* social row (2026-09-22): LinkedIn under the Column 1 button (Copy doc 25). The glyph is currentColor, so it takes the footer link colour (~11:1 on the footer ink) and the hover orange. 2.5rem box = 40px target. */ .lgx-fsocial{ display:flex; gap:.6rem; margin:1.2rem 0 0 0; } .lgx-fsocial a{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,.28); border-radius:3px; transition:color .2s ease,border-color .2s ease; } .lgx-fsocial a:hover, .lgx-fsocial a:focus-visible{ color:#FF7A55; border-color:#FF7A55; text-decoration:none; } .lgx-fsocial svg{ display:block; width:1.1rem; height:1.1rem; fill:currentColor; } /* legal band */ .site-bottom-footer-wrap{ font-size:.8rem; color:rgba(255,255,255,.62); } .site-bottom-footer-wrap a{ color:rgba(255,255,255,.62); } /* ---- Fluent Forms: RFQ (id 6) + General Contact (id 7) ---- FF ships its own defaults (blue #1a7efb progress bar, grey buttons). These pull the two forms onto the brand without touching FF's markup. */ .fluentform .ff-el-form-control{ background:#FFFFFF; border:1px solid var(--lgx-line-light,rgba(26,33,35,.13)); border-radius:var(--lgx-radius,3px); padding:.8rem .9rem; font-family:var(--lgx-font-body,inherit); font-size:1rem; } .fluentform .ff-el-form-control:focus{ border-color:var(--lgx-accent-deep,#BE4423); outline:2px solid rgba(190,68,35,.25); outline-offset:1px; } .fluentform .ff-el-input--label label{ font-weight:700; font-size:.92rem; color:var(--lgx-text,#1A2123); } .fluentform .ff-el-input--label.ff-el-is-required label:after{ color:var(--lgx-accent-deep,#BE4423); } .fluentform .ff-el-help-message{ color:var(--lgx-text-muted,rgba(26,33,35,.62)); font-size:.85rem; } /* progress bar */ .fluentform .ff-el-progress{ background:var(--lgx-light-2,#E8E8E4); border-radius:2px; height:6px; } .fluentform .ff-el-progress-bar{ background:var(--lgx-accent-deep,#BE4423); border-radius:2px; } .fluentform .ff-el-progress-status{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--lgx-accent-deep,#BE4423); font-weight:700; } /* step + submit buttons */ .fluentform .ff-btn-submit, .fluentform .ff-btn-next, .fluentform .ff-btn-prev{ border-radius:var(--lgx-radius,3px); font-weight:700; letter-spacing:.02em; padding:.85rem 1.6rem; border:1px solid transparent; transition:background .2s ease,transform .15s ease; } .fluentform .ff-btn-submit, .fluentform .ff-btn-next{ background:#BE4423 !important; color:#FFFFFF !important; } .fluentform .ff-btn-submit:hover, .fluentform .ff-btn-next:hover{ background:#A63A1D !important; transform:translateY(-2px); } .fluentform .ff-btn-prev{ background:transparent !important; color:var(--lgx-text,#1A2123) !important; border-color:var(--lgx-line-light,rgba(26,33,35,.13)) !important; } .fluentform .ff-btn-prev:hover{ border-color:var(--lgx-text,#1A2123) !important; } /* section breaks inside the form */ .fluentform .ff-el-section-title{ font-size:1.35rem; font-weight:700; margin:1.6rem 0 .3rem; } .fluentform .ff_section_break_desc{ color:var(--lgx-text-muted,rgba(26,33,35,.62)); } /* submit confirmation (2026-09-22). Form 7 replaces the form with it; form 6 shows it only while redirecting to /contact/request-a-quote/thank-you/. FF's default is a grey shadowed box. Text 14.8:1, link 4.72:1 on --lgx-light. */ .lgx-form .ff-message-success{ border:0; border-left:3px solid var(--lgx-accent-deep,#BE4423); box-shadow:none; background:var(--lgx-light,#F4F4F2); color:var(--lgx-text,#1A2123); padding:1.4rem 1.6rem; margin:0; } .lgx-form .ff-message-success h3{ font-size:1.25rem; margin:0 0 .5rem; } .lgx-form .ff-message-success p{ margin:0 0 .6rem; } .lgx-form .ff-message-success p:last-child{ margin-bottom:0; } /* validation messages, both forms (2026-09-26): FF's --fluentform-danger #f56c6c is 2.90:1 on white, an AA fail at 12px. #B3261E is 6.5:1. */ .fluentform .ff-el-is-error .error, .fluentform .error.text-danger{ color:#B3261E; font-size:.85rem; } .fluentform .ff-el-is-error .ff-el-form-control{ border-color:#B3261E; } /* ---- RFQ wizard, form 8 (2026-09-26; fields in _build/rfq-form.php) ---- Everything here is under .fluentform, which only the two contact pages carry: 0 elements on the protected masters. Progress bar: FF writes the percentage into the bar (20%, 12px white type). At the 6px height above, only the clipped tops of those glyphs showed, the "letters on the orange line" (Ryan, 2026-09-26). The status line above the bar names the step, so the span goes. */ .fluentform .ff-el-progress-bar span{ display:none; } /* step changes: on Continue FF focus()es the new step and the browser scrolls it to the top edge, under the 80px sticky #masthead, with the step label 51px above it hidden too. The margin makes that scroll stop with the label 16px under the header: 80 + 16 + 51. (Back uses FF's own scroll animation instead; functions.php points that at the same spot.) +32px admin bar, which is fixed from 783px up. */ .lgx-form .fluentform-step{ scroll-margin-top:147px; } @media (min-width:783px){ body.admin-bar .lgx-form .fluentform-step{ scroll-margin-top:179px; } } /* a question heading (section break) already names these groups; the field label stays for screen readers only */ .fluentform .lgx-ff-sr-label > .ff-el-input--label{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* service tiles (step 1) and pill choices (crane / storage duration). The native control stays visible, so the state never rests on colour alone. Selected: accent-deep border + 1px inset ring on a .05 accent tint; the text stays --lgx-text (15.5:1 on the tint). Border #BE4423 on white 5.20:1. */ .fluentform .lgx-ff-tiles .ff-el-input--content{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; } .fluentform .lgx-ff-pills .ff-el-input--content{ display:flex; flex-wrap:wrap; gap:.5rem; } .fluentform .lgx-ff-tiles .ff-el-input--content > .error{ grid-column:1 / -1; } .fluentform .lgx-ff-pills .ff-el-input--content > .error{ flex-basis:100%; } .fluentform .lgx-ff-tiles .ff-el-form-check, .fluentform .lgx-ff-pills .ff-el-form-check{ margin:0; } .fluentform .lgx-ff-tiles .ff-el-form-check label.ff-el-form-check-label, .fluentform .lgx-ff-pills .ff-el-form-check label.ff-el-form-check-label{ display:flex; align-items:center; gap:.7rem; margin:0; background:#FFFFFF; border:1px solid var(--lgx-line-light,rgba(26,33,35,.13)); border-radius:var(--lgx-radius,3px); font-weight:600; line-height:1.3; color:var(--lgx-text,#1A2123); cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; } /* min-height fits a two-line label, so every tile matches (1fr rows would also stretch the error line) */ .fluentform .lgx-ff-tiles .ff-el-form-check label.ff-el-form-check-label{ height:100%; min-height:4.25rem; padding:.75rem .95rem; } .fluentform .lgx-ff-pills .ff-el-form-check label.ff-el-form-check-label{ gap:.55rem; padding:.6rem .95rem; font-size:.95rem; } .fluentform .lgx-ff-tiles .ff-el-form-check label.ff-el-form-check-label:hover, .fluentform .lgx-ff-pills .ff-el-form-check label.ff-el-form-check-label:hover{ border-color:var(--lgx-text,#1A2123); } .fluentform .lgx-ff-tiles .ff-el-form-check-input, .fluentform .lgx-ff-pills .ff-el-form-check-input{ flex:none; top:0; width:1.1rem; height:1.1rem; margin:0; accent-color:var(--lgx-accent-deep,#BE4423); } /* selected: FF's ff_item_selected class, and :has() as a second route. Kept as separate rules: one unsupported selector would drop a whole list. */ .fluentform .lgx-ff-tiles .ff-el-form-check.ff_item_selected label.ff-el-form-check-label, .fluentform .lgx-ff-pills .ff-el-form-check.ff_item_selected label.ff-el-form-check-label{ border-color:var(--lgx-accent-deep,#BE4423); box-shadow:inset 0 0 0 1px var(--lgx-accent-deep,#BE4423); background:rgba(190,68,35,.05); } .fluentform .lgx-ff-tiles .ff-el-form-check label.ff-el-form-check-label:has(input:checked), .fluentform .lgx-ff-pills .ff-el-form-check label.ff-el-form-check-label:has(input:checked){ border-color:var(--lgx-accent-deep,#BE4423); box-shadow:inset 0 0 0 1px var(--lgx-accent-deep,#BE4423); background:rgba(190,68,35,.05); } .fluentform .lgx-ff-tiles .ff-el-form-check label.ff-el-form-check-label:has(input:focus-visible), .fluentform .lgx-ff-pills .ff-el-form-check label.ff-el-form-check-label:has(input:focus-visible){ outline:2px solid rgba(190,68,35,.45); outline-offset:2px; } @media (max-width:760px){ .fluentform .lgx-ff-tiles .ff-el-input--content{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:420px){ .fluentform .lgx-ff-tiles .ff-el-input--content{ grid-template-columns:1fr; } .fluentform .lgx-ff-tiles .ff-el-form-check label.ff-el-form-check-label{ min-height:3.25rem; } } /* cargo list (step 2): FF's repeater table. FF forces table-layout:auto and gives every td 282px, so the widths go on the cells: Description takes the room, Qty is short. Below 768px FF stacks each row into a card (thead hidden, each cell labelled from its data-label), restyled further down. */ @media (min-width:768px){ .fluentform .lgx-ff-items table.ff_repeater_table th{ padding:0 .5rem .35rem 0; } .fluentform .lgx-ff-items table.ff_repeater_table td{ width:auto; padding:0 .5rem .5rem 0; vertical-align:middle; } .fluentform .lgx-ff-items table.ff_repeater_table td:first-child{ width:30%; } .fluentform .lgx-ff-items table.ff_repeater_table td:nth-child(2){ width:8%; } .fluentform .lgx-ff-items table.ff_repeater_table td.repeat_btn{ width:2rem; padding-right:0; } .fluentform .lgx-ff-items table.ff_repeater_table .ff-el-form-control{ padding:.7rem .65rem; } } .fluentform .lgx-ff-items table.ff_repeater_table th .ff-el-input--label label{ font-size:.85rem; } .fluentform .lgx-ff-items .ff-el-repeat-buttons-list{ display:flex; align-items:center; gap:.25rem; } /* FF gives the icon spans a #f0f0f0 chip on phones; its padding stays (a 44x34 tap target), the grey goes */ .fluentform .lgx-ff-items .ff-el-repeat-buttons-list span{ display:inline-flex; background:transparent; } .fluentform .lgx-ff-items.lgx-items-ready .ff-el-repeat-buttons-list .repeat-plus{ display:none; } .fluentform .lgx-ff-items .ff-el-repeat-buttons-list svg{ width:24px; height:24px; } .fluentform .lgx-ff-items .repeat-plus svg{ fill:var(--lgx-accent-deep,#BE4423); } .fluentform .lgx-ff-items .repeat-minus svg{ fill:var(--lgx-text-muted,rgba(26,33,35,.62)); } .fluentform .lgx-ff-items .repeat-minus:hover svg{ fill:var(--lgx-accent-deep,#BE4423); } /* the "+ Add another item" button (functions.php, page 34) replaces the per-row + (hidden by the .lgx-items-ready rule above, which has to outrank the span rule); only once it exists, so the native control is the fallback. Text #BE4423 on white 5.20:1. */ .fluentform .lgx-ff-add{ display:inline-flex; align-items:center; margin:.35rem 0 0; padding:.6rem 1rem; background:transparent; border:1px dashed var(--lgx-accent-deep,#BE4423); border-radius:var(--lgx-radius,3px); box-shadow:none; color:var(--lgx-accent-deep,#BE4423); font-family:inherit; font-size:.92rem; font-weight:700; line-height:1.3; letter-spacing:.01em; text-transform:none; cursor:pointer; transition:background-color .15s ease,border-color .15s ease; } .fluentform .lgx-ff-add:hover, .fluentform .lgx-ff-add:focus{ background:rgba(190,68,35,.06); color:var(--lgx-accent-deep,#BE4423); border-style:solid; } .fluentform .lgx-ff-add:focus-visible{ outline:2px solid rgba(190,68,35,.45); outline-offset:2px; } .fluentform .lgx-ff-items .repeat-maxed + .lgx-ff-add{ display:none; } /* phones: FF's card stacks all six fields; a 6-track grid puts each line in three rows instead - Description + Qty / Length Width Height / Weight + remove */ @media (max-width:767px){ .fluentform .lgx-ff-items table.ff_flexible_table tbody tr{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:.5rem; margin:0 0 .75rem; padding:.8rem .8rem .2rem !important; border:1px solid var(--lgx-line-light,rgba(26,33,35,.13)); border-radius:var(--lgx-radius,3px); } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td{ grid-column:span 2; width:auto; min-width:0; margin:0; padding:0 0 .6rem; } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td:first-child, .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td:nth-child(6){ grid-column:span 4; } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td:before{ margin:0 0 .3rem; font-size:.85rem; font-weight:700; letter-spacing:0; color:var(--lgx-text,#1A2123); } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td .ff-el-form-control{ padding:.7rem .6rem; } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td.repeat_btn{ display:flex; align-items:flex-end; justify-content:flex-end; width:auto !important; background:transparent; padding:0 0 .95rem !important; } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td.repeat_btn:before{ content:none; } .fluentform .lgx-ff-items table.ff_flexible_table tbody tr td.repeat_btn .ff-el-repeat-buttons-list{ width:auto; background:transparent; } } /* file upload button: the step-nav "Back" treatment instead of FF's grey */ .fluentform .ff_upload_btn.ff-btn{ background:transparent; color:var(--lgx-text,#1A2123); border:1px solid var(--lgx-line-light,rgba(26,33,35,.13)); border-radius:var(--lgx-radius,3px); font-weight:700; padding:.7rem 1.2rem; } .fluentform .ff_upload_btn.ff-btn:hover{ background:transparent; color:var(--lgx-text,#1A2123); border-color:var(--lgx-text,#1A2123); } /* 4PL note on the last step (only when 4PL Services is ticked) and the consent link. Note text --lgx-text on --lgx-light 14.8:1; link accent-deep on white 5.20:1, underlined like every content link. (0,3,0) on the note: the rendered-page `.lgx-band-body p` rule (0,2,1, 64ch cap) comes later. */ .fluentform .ff-custom_html .lgx-ff-note{ max-width:none; margin:0; padding:1rem 1.2rem; background:var(--lgx-light,#F4F4F2); border-left:3px solid var(--lgx-accent-deep,#BE4423); font-size:.95rem; line-height:1.55; color:var(--lgx-text,#1A2123); } .fluentform .ff_t_c a{ color:var(--lgx-accent-deep,#BE4423); text-decoration:underline; text-underline-offset:2px; } /* ============================================================ 1. RENDERED PAGES - everything below is scoped to .lgx-rendered ============================================================ */ /* ---- 1.1 bands and surfaces --------------------------------------- */ .lgx-rendered .lgx-band{ position:relative; padding:clamp(3.6rem,6.2vw,6.2rem) 0; } .lgx-rendered .lgx-band .lgx-container{ position:relative; z-index:2; } /* the two light surfaces. background-color is stated even under a wash: it is what shows if the JPG 404s and the base every ratio below assumes. */ .lgx-rendered .lgx-s-white{ background-color:var(--lgx-white); } .lgx-rendered .lgx-s-paper{ background-color:var(--lgx-light); } /* ink: the same accent bloom + survey grid the home hero and the custom pages' dark bands use. z-index 1 sits over the hero photo (z 0) and under the copy (.lgx-container z 2). Text ratios below are quoted on flat ink AND at the bloom's peak (#161B1D + .18 accent), whichever is lower governs. */ .lgx-rendered .lgx-s-ink{ background-color:var(--lgx-ink); color:#fff; overflow:hidden; } .lgx-rendered .lgx-s-ink::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(ellipse 55% 50% at 88% 16%,rgba(220,83,52,.18),transparent 64%), repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } /* a photo hero draws its own grid over the scrim; no bloom underneath it */ .lgx-rendered .lgx-band-hero.has-photo::before{ content:none; } /* plate: the full-strength colour band, CSS only (no plate asset to bake, crop or cache-bust, and nothing shared with the custom pages' plates). Field = --lgx-accent-deep #BE4423: #fff 5.20:1. The survey grid is .05 white, which lightens a grid pixel to #C14D2E where #fff is 4.79:1 - the worst pixel, and still AA. The bloom darkens toward --lgx-accent-deeper (#fff 6.47:1), so every other pixel is better than the field. All text on this surface is pure #fff; rgba(255,255,255,.92) would be 4.64 on the field and under 4.5 on a grid line. */ .lgx-rendered .lgx-s-plate{ background-color:var(--lgx-accent-deep); color:#fff; overflow:hidden; } .lgx-rendered .lgx-s-plate::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(80% 70% at 12% 100%,rgba(166,58,29,.85),transparent 62%), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px); } /* accent: the house closing band (deep -> deeper, 135deg). #fff copy is 5.20:1 at the deep end and 6.47:1 at the deeper end. White body copy on plain --lgx-accent was 3.56:1, which is why the gradient never starts there (measured 2026-08-10, same fix as home's old CTA band). */ .lgx-rendered .lgx-s-accent{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); color:#fff; } /* wash: a blueprint drawing pre-baked onto the band's own surface colour by bake-washes.ps1, so it is a plain cover image. Only white and paper bands carry one, and render-pages.ps1 refuses a wash whose bake base does not match the band. Worst-pixel ratios per file come from plate-contrast.ps1 (Decisions Log 2026-09-17): on the densest line pixels muted body copy (5.07 on clean paper) cannot hold AA, so on a wash band running copy uses --lgx-text (14.83 on clean paper) instead of the muted tone. */ .lgx-rendered .lgx-has-wash{ background-image:var(--bgimg,none); background-size:cover; background-position:center; } /* Measured over every pixel of all 20 washes with plate-contrast-fast.ps1 (2026-09-17): --lgx-text never drops below 4.57:1 (bg-industries.jpg, one pixel; p0.1 >= 7.16 on every file), while muted copy falls to 2.80 and accent-deeper to 1.81 on the darkest drawing lines and misses 4.5 at p1 on nine of the twenty (worst: bg-company.jpg 3.39, bg-heavy-lift-oog.jpg 3.60). So on a wash band every piece of running text, every ledger numeral, every inline and section link is --lgx-text, and the eyebrow keeps its accent by sitting on a chip of the band's own surface colour, where the 6.47 / 5.88 clean-surface figures apply again. */ .lgx-rendered .lgx-has-wash .lgx-lead.on-light, .lgx-rendered .lgx-has-wash .lgx-band-body p, .lgx-rendered .lgx-has-wash .lgx-list li, .lgx-rendered .lgx-has-wash .lgx-faq .a p, .lgx-rendered .lgx-has-wash .lgx-ledger p, .lgx-rendered .lgx-has-wash .lgx-ledger .n, .lgx-rendered .lgx-has-wash .lgx-note, .lgx-rendered .lgx-has-wash .lgx-more a, .lgx-rendered .lgx-has-wash .lgx-band-body p a, .lgx-rendered .lgx-has-wash .lgx-band-body li a{ color:var(--lgx-text) !important; } .lgx-rendered .lgx-has-wash .lgx-band-body p a:hover, .lgx-rendered .lgx-has-wash .lgx-band-body li a:hover, .lgx-rendered .lgx-has-wash .lgx-more a:hover{ color:var(--lgx-accent-deep) !important; } .lgx-rendered .lgx-has-wash .lgx-band-head .lgx-eyebrow{ padding:.32em .6em; margin:0 0 1.4rem -.6em !important; border-radius:2px; } .lgx-rendered .lgx-s-white.lgx-has-wash .lgx-band-head .lgx-eyebrow{ background:var(--lgx-white); } .lgx-rendered .lgx-s-paper.lgx-has-wash .lgx-band-head .lgx-eyebrow{ background:var(--lgx-light); } /* ---- 1.2 hero ------------------------------------------------------ */ .lgx-rendered .lgx-band-hero{ padding:clamp(4.5rem,7vw,6.5rem) 0 clamp(3.4rem,5.5vw,5rem); overflow:hidden; } .lgx-rendered .lgx-band-media{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .lgx-rendered .lgx-band-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center); } /* One scrim for 15 photo heroes (hero-.jpg, all baked 2:1 with the subject centre-right and the left third kept quiet - process-photos.ps1). Left-weighted like the 4PL and PLHH scrims because the copy is left aligned: the guaranteed-dark zone is the left half at every viewport. Literal rgba() stops, not a --var: hero-contrast.ps1 PARSES these out of the stylesheet (-Css lgx-inner.css -Selector ".lgx-rendered .lgx-band-scrim") so the audit cannot go stale. Per-photo results are in the Decisions Log 2026-09-17 entry; a photo that cannot hold AA under this scrim gets a per-page override below rather than a heavier shared scrim. */ .lgx-rendered .lgx-band-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) 44%, rgba(12,15,16,0.70) 70%, rgba(12,15,16,0.52) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.22) 52%, rgba(12,15,16,0.36) 100%); } /* ---- boxed photo hero (2026-09-21 picture pass) --------------------- `cover` on a full-bleed hero can only ever show a horizontal SLICE of the photo: at 2560x614 the band is 4.2:1, so a 2:1 bake showed its middle 48% - every lift lost its boom and rigging and most loads lost their top. The hero cannot get taller, so the photo gets narrower instead: a right-anchored box at the bake's own ratio (render-pages.ps1 emits --ar from the file and adds .is-boxed when the bake is squarer than the legacy 2:1), 1.1x wide so cover trims under 5% top and bottom, faded into the ink on its left edge. Legacy 2:1 heroes never get the class and are untouched. >=1081px only. Below that the box is as wide as the band (max-width:100%), the text runs over the photo, and the shared scrim above still applies. */ .lgx-rendered .lgx-band-hero.is-boxed .lgx-band-photo{ inset:0 0 0 auto; height:100%; width:auto; max-width:100%; aspect-ratio:calc(var(--ar,1.4) * 1.1); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%); mask-image:linear-gradient(90deg,transparent 0,#000 24%); } @media (min-width:1081px){ /* Two dimensions, because the text is an L: the H1 (top half) runs to 50% + 218px, the lead and CTA (lower half) only to 50% + 30px. Layer 2 is the horizontal wash, dark to the end of the lead and clear by 50% + 280px; layer 1 is an elliptical patch that keeps the H1 tail dark without dimming the lower right, where the load sits. Every text box is audited against real composited pixels by hero-audit-shot.mjs (screenshot with the text hidden), since hero-contrast.ps1 models full-bleed cover only. The bottom-up wash moves to ::after and is masked to 35% strength over the photo side - at full strength it sat on the trailer and the ground crew, which is where these photos keep their subject. */ .lgx-rendered .lgx-band-hero.is-boxed .lgx-band-scrim{ background: radial-gradient(ellipse 500px 46% at 50% 30%, rgba(12,15,16,0.84) 0%, rgba(12,15,16,0.84) 52%, rgba(12,15,16,0) 100%), linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) calc(50% + 20px), rgba(12,15,16,0.34) calc(50% + 280px), rgba(12,15,16,0.24) 100%); } .lgx-rendered .lgx-band-hero.is-boxed .lgx-band-scrim::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.22) 52%, rgba(12,15,16,0.36) 100%); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% + 20px),rgba(0,0,0,.35) calc(50% + 280px)); mask-image:linear-gradient(90deg,#000 0,#000 calc(50% + 20px),rgba(0,0,0,.35) calc(50% + 280px)); } } .lgx-rendered .lgx-band-grid{ position:absolute; inset:0; z-index:2; opacity:.5; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px), repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px); } .lgx-rendered .lgx-hero-inner{ max-width:var(--lgx-container); } /* 22ch and a smaller clamp than the shared .lgx-h1: inner-page H1s run to 70 characters, and three lines at 56px keeps the box in the scrim's dark half. */ .lgx-rendered .lgx-band-hero .lgx-h1{ max-width:22ch; font-size:clamp(2.2rem,4.2vw,3.5rem) !important; } .lgx-rendered .lgx-band-hero .lgx-lead{ max-width:62ch; margin-bottom:2rem !important; color:rgba(255,255,255,.82) !important; } /* 11.93 on flat ink; photo heroes audited per file */ .lgx-rendered .lgx-band-hero .lgx-cta-row{ margin:0 0 .4rem; } .lgx-rendered .lgx-band-hero .lgx-band-body{ margin-top:2.2rem; } /* ---- 1.3 section head + running copy ------------------------------- */ .lgx-rendered .lgx-band-head{ max-width:52rem; margin:0 0 clamp(2rem,3.6vw,3rem); } .lgx-rendered .lgx-band-head .lgx-lead{ margin-bottom:0 !important; } /* trap 1: .lgx-h2 states no colour and would inherit Kadence's #1A1A1A */ .lgx-rendered .lgx-h2{ color:var(--lgx-text); } /* 16.33 white, 14.83 paper */ .lgx-rendered .lgx-h3{ font-family:var(--lgx-font-display); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--lgx-text); margin:0 0 1rem; } .lgx-rendered .is-dark .lgx-h2, .lgx-rendered .is-dark .lgx-h3{ color:#fff; } /* 17.38 ink, 5.20 plate */ .lgx-rendered .is-dark .lgx-lead.on-dark{ color:rgba(255,255,255,.82) !important; } /* 11.93 ink */ .lgx-rendered .lgx-s-plate .lgx-lead, .lgx-rendered .lgx-s-accent .lgx-lead{ color:#fff !important; } /* 5.20 worst field, 4.79 grid pixel */ .lgx-rendered .lgx-s-plate .lgx-eyebrow, .lgx-rendered .lgx-s-accent .lgx-eyebrow{ color:#fff !important; } .lgx-rendered .lgx-s-plate .lgx-eyebrow::before, .lgx-rendered .lgx-s-accent .lgx-eyebrow::before{ background:#fff; } .lgx-rendered .lgx-band-body p{ font-size:1.05rem; line-height:1.68; color:var(--lgx-text); margin:0 0 1.1rem; max-width:64ch; } .lgx-rendered .lgx-band-body > p:last-child{ margin-bottom:0; } .lgx-rendered .lgx-band-body strong{ font-weight:700; } .lgx-rendered .is-dark .lgx-band-body p{ color:rgba(255,255,255,.82); } /* 11.93 ink */ .lgx-rendered .lgx-s-plate .lgx-band-body p, .lgx-rendered .lgx-s-accent .lgx-band-body p{ color:#fff; } /* 5.20 / 4.79 */ /* links inside dark running copy: accent-deep is 3.33 on ink; the footer's hover tint #FF7A55 is 6.76 on ink and 5.43 at the bloom's peak */ .lgx-rendered .is-dark p a, .lgx-rendered .is-dark li a, .lgx-rendered .is-dark td a, .lgx-rendered .is-dark dd a{ color:#FF7A55; } .lgx-rendered .lgx-s-plate p a, .lgx-rendered .lgx-s-plate li a, .lgx-rendered .lgx-s-plate dd a, .lgx-rendered .lgx-s-accent p a, .lgx-rendered .lgx-s-accent li a, .lgx-rendered .lgx-s-accent dd a{ color:#fff; text-decoration:underline; text-underline-offset:3px; } /* 5.20 */ .lgx-rendered .is-dark p a:hover, .lgx-rendered .is-dark li a:hover{ color:#fff; } /* every heading inside a band body states its colour (trap 1) */ .lgx-rendered .lgx-band h3{ font-family:var(--lgx-font-display); color:var(--lgx-text); font-weight:700; letter-spacing:-.015em; line-height:1.25; margin:0 0 .5rem; } .lgx-rendered .is-dark .lgx-band h3, .lgx-rendered .is-dark h3{ color:#fff; } /* ---- 1.4 lists (hairline rows with an accent tick) ----------------- */ .lgx-rendered .lgx-list{ list-style:none; margin:0; padding:0; max-width:64ch; } .lgx-rendered .lgx-list li{ position:relative; margin:0; padding:.72rem 0 .72rem 1.6rem; border-top:1px solid var(--lgx-line-light); font-size:1rem; line-height:1.58; color:var(--lgx-text); } .lgx-rendered .lgx-list li:last-child{ border-bottom:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-list li::before{ content:''; position:absolute; left:0; top:1.2rem; width:8px; height:8px; background:var(--lgx-accent); } .lgx-rendered .is-dark .lgx-list li{ border-color:var(--lgx-line-dark); color:rgba(255,255,255,.82); } /* 11.93 ink */ .lgx-rendered .is-dark .lgx-list li strong{ color:#fff; } .lgx-rendered .lgx-s-plate .lgx-list li, .lgx-rendered .lgx-s-accent .lgx-list li{ border-color:rgba(255,255,255,.34); color:#fff; } /* 5.20 */ .lgx-rendered .lgx-s-plate .lgx-list li::before, .lgx-rendered .lgx-s-accent .lgx-list li::before{ background:#fff; } .lgx-rendered .lgx-cols .lgx-list, .lgx-rendered .lgx-sub .lgx-list{ max-width:none; } /* ---- 1.5 numbered stage ledger ------------------------------------- */ /* A numeral in the left gutter with a vertical rail down to the next one, the bold lead as the row title, the body under it: one column that reads top to bottom. Deliberately NOT the PLHH ledger (numeral + name left, body right, hairline rows) and NOT 4pl's four white discs in a row. */ .lgx-rendered .lgx-ledger{ list-style:none; margin:0; padding:0; max-width:52rem; counter-reset:none; } .lgx-rendered .lgx-ledger li{ position:relative; margin:0; padding:0 0 1.9rem 3.6rem; } .lgx-rendered .lgx-ledger li::before{ content:''; position:absolute; left:1rem; top:1.9rem; bottom:.3rem; width:1px; background:var(--lgx-line-light); } .lgx-rendered .lgx-ledger li:last-child{ padding-bottom:0; } .lgx-rendered .lgx-ledger li:last-child::before{ content:none; } .lgx-rendered .lgx-ledger .n{ position:absolute; left:0; top:.05rem; width:2rem; text-align:center; font-family:var(--lgx-font-display); font-size:.95rem; font-weight:800; letter-spacing:.02em; line-height:1.3; color:var(--lgx-accent-deeper); /* 6.47 white, 5.88 paper */ } .lgx-rendered .lgx-ledger h3{ font-size:1.08rem; margin:0 0 .35rem; } .lgx-rendered .lgx-ledger p{ font-size:.98rem; line-height:1.6; color:var(--lgx-text-muted); margin:0; } /* 5.28 white, 5.07 paper */ .lgx-rendered .is-dark .lgx-ledger li::before{ background:rgba(255,255,255,.18); } .lgx-rendered .is-dark .lgx-ledger .n{ color:#FF9670; } /* 8.15 ink; the accent would be 4.41 at this size */ .lgx-rendered .is-dark .lgx-ledger p{ color:rgba(255,255,255,.78); } /* 10.89 ink */ .lgx-rendered .lgx-s-plate .lgx-ledger li::before{ background:rgba(255,255,255,.34); } .lgx-rendered .lgx-s-plate .lgx-ledger .n, .lgx-rendered .lgx-s-plate .lgx-ledger p{ color:#fff; } /* 5.20 */ /* ---- 1.6 columns (two-column blocks from the copy docs) ------------ */ /* Each column opens with a hairline and a short accent tick. Not PLHH's vertical rule with a muted "vendor" side, not 4pl's two ink cards. */ .lgx-rendered .lgx-cols{ display:grid; gap:clamp(1.6rem,4vw,3.4rem); } .lgx-rendered .lgx-cols.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lgx-rendered .lgx-cols.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* One column under a paragraph (export-packing's "Where it shows up" links): hold it to the paragraph's measure so its hairlines stop where the copy does instead of running the full container. Same 64ch at the same 1.05rem as .lgx-band-body p; every size inside the column is rem, so the font-size only sets the ch. */ .lgx-rendered .lgx-cols.cols-1{ font-size:1.05rem; max-width:64ch; } .lgx-rendered .lgx-col{ position:relative; padding-top:1.2rem; border-top:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-col::before{ content:''; position:absolute; top:-1px; left:0; width:48px; height:2px; background:var(--lgx-accent); } .lgx-rendered .lgx-col h3{ font-size:1.22rem; margin:0 0 .75rem; } .lgx-rendered .lgx-col p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text); margin:0 0 1rem; } .lgx-rendered .lgx-col p:last-child{ margin-bottom:0; } .lgx-rendered .lgx-col .lgx-list{ margin-top:.2rem; } .lgx-rendered .lgx-col.is-pull{ border-top:none; padding-top:0; } .lgx-rendered .lgx-col.is-pull::before{ content:none; } .lgx-rendered .lgx-col.is-pull .q{ font-family:var(--lgx-font-display); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--lgx-text); border-left:3px solid var(--lgx-accent); padding-left:1.2rem; margin:0; max-width:24ch; } .lgx-rendered .is-dark .lgx-col{ border-color:var(--lgx-line-dark); } .lgx-rendered .is-dark .lgx-col p{ color:rgba(255,255,255,.82); } /* 11.93 ink */ .lgx-rendered .is-dark .lgx-col.is-pull .q{ color:#fff; } .lgx-rendered .lgx-s-plate .lgx-col{ border-color:rgba(255,255,255,.34); } .lgx-rendered .lgx-s-plate .lgx-col::before{ background:#fff; } .lgx-rendered .lgx-s-plate .lgx-col p{ color:#fff; } /* 5.20 */ /* ---- 1.7 sub-blocks (### headings inside a section) ---------------- */ .lgx-rendered .lgx-subs{ display:grid; gap:clamp(1.6rem,3.5vw,2.8rem); } .lgx-rendered .lgx-subs.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lgx-rendered .lgx-subs.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .lgx-rendered .lgx-subs.is-stack{ grid-template-columns:1fr; max-width:52rem; gap:clamp(1.4rem,2.6vw,2rem); } .lgx-rendered .lgx-sub h3{ font-size:1.18rem; margin:0 0 .6rem; } .lgx-rendered .lgx-sub p{ font-size:1rem; line-height:1.62; color:var(--lgx-text); margin:0 0 .9rem; } .lgx-rendered .lgx-sub p:last-child{ margin-bottom:0; } .lgx-rendered .lgx-subs.is-stack .lgx-sub{ padding-top:1.2rem; border-top:1px solid var(--lgx-line-light); } .lgx-rendered .is-dark .lgx-sub p{ color:rgba(255,255,255,.82); } /* 11.93 ink */ .lgx-rendered .is-dark .lgx-subs.is-stack .lgx-sub{ border-color:var(--lgx-line-dark); } .lgx-rendered .lgx-s-plate .lgx-sub p{ color:#fff; } /* ---- 1.8 cards ----------------------------------------------------- */ /* On white the card is paper (surface delta), on paper it is white, on ink it is ink-2 with the tint label, on the plate it is white with dark text. */ .lgx-rendered .lgx-cards{ display:grid; gap:clamp(1.1rem,2.2vw,1.6rem); } .lgx-rendered .lgx-cards.cols-1{ grid-template-columns:1fr; max-width:40rem; } .lgx-rendered .lgx-cards.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lgx-rendered .lgx-cards.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .lgx-rendered .lgx-card{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.5rem,2.6vw,1.9rem); display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease; } .lgx-rendered .lgx-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.08); border-color:rgba(220,83,52,.34); } .lgx-rendered .lgx-s-white .lgx-card{ background:var(--lgx-light); } .lgx-rendered .lgx-card h3{ font-size:1.14rem; margin:0 0 .55rem; } .lgx-rendered .lgx-card p{ font-size:.95rem; line-height:1.58; color:var(--lgx-text-muted); margin:0 0 1rem; } /* 5.28 on white, 5.07 on paper */ .lgx-rendered .lgx-card p:last-child{ margin-bottom:0; } .lgx-rendered .lgx-card-link{ margin-top:auto; padding-top:.4rem; display:inline-block; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; /* 6.47 white, 5.88 paper */ } .lgx-rendered .lgx-card-link .arw{ display:inline-block; transition:transform .25s ease; } .lgx-rendered .lgx-card:hover .lgx-card-link .arw{ transform:translateX(4px); } .lgx-rendered .lgx-card-link:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-rendered .is-dark .lgx-card{ background:var(--lgx-ink-2); border-color:var(--lgx-line-dark); } .lgx-rendered .is-dark .lgx-card h3{ color:#fff; } /* 15.57 ink-2 */ .lgx-rendered .is-dark .lgx-card p{ color:rgba(255,255,255,.78); } /* 9.97 ink-2 */ .lgx-rendered .is-dark .lgx-card-link{ color:#FF9670; } /* 7.30 ink-2 */ .lgx-rendered .is-dark .lgx-card-link:hover{ color:#fff; } .lgx-rendered .lgx-s-plate .lgx-card, .lgx-rendered .lgx-s-accent .lgx-card{ background:#fff; border-color:transparent; } .lgx-rendered .lgx-s-plate .lgx-card h3, .lgx-rendered .lgx-s-accent .lgx-card h3{ color:var(--lgx-text); } /* 16.33 */ .lgx-rendered .lgx-s-plate .lgx-card p, .lgx-rendered .lgx-s-accent .lgx-card p{ color:var(--lgx-text-muted); } /* 5.28 */ .lgx-rendered .lgx-s-plate .lgx-card-link, .lgx-rendered .lgx-s-accent .lgx-card-link{ color:var(--lgx-accent-deeper); } /* 6.47 */ /* ---- 1.9 hairline fact ledger (regulatory IDs, addresses, expectations) */ .lgx-rendered .lgx-facts{ margin:0; max-width:52rem; border-top:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-fact{ display:grid; grid-template-columns:minmax(9rem,.38fr) minmax(0,1fr); gap:.4rem 2rem; margin:0; padding:.9rem 0; border-bottom:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-fact dt{ font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lgx-accent-deeper); padding-top:.25rem; margin:0; /* 6.47 white, 5.88 paper */ } .lgx-rendered .lgx-fact dd{ margin:0; font-size:1.02rem; line-height:1.55; color:var(--lgx-text); } .lgx-rendered .is-dark .lgx-facts, .lgx-rendered .is-dark .lgx-fact{ border-color:var(--lgx-line-dark); } .lgx-rendered .is-dark .lgx-fact dt{ color:#FF9670; } /* 8.15 ink */ .lgx-rendered .is-dark .lgx-fact dd{ color:rgba(255,255,255,.82); } /* 11.93 ink */ .lgx-rendered .lgx-s-plate .lgx-facts, .lgx-rendered .lgx-s-plate .lgx-fact, .lgx-rendered .lgx-s-accent .lgx-facts, .lgx-rendered .lgx-s-accent .lgx-fact{ border-color:rgba(255,255,255,.34); } .lgx-rendered .lgx-s-plate .lgx-fact dt, .lgx-rendered .lgx-s-plate .lgx-fact dd, .lgx-rendered .lgx-s-accent .lgx-fact dt, .lgx-rendered .lgx-s-accent .lgx-fact dd{ color:#fff; } /* 5.20 */ /* ---- 1.10 router strip (links to sibling pages) -------------------- */ .lgx-rendered .lgx-router{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:0 clamp(1.4rem,3vw,2.6rem); } .lgx-rendered .lgx-router li{ margin:0; padding:0; border-top:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-router a{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.95rem 0 .9rem; font-family:var(--lgx-font-label); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; /* 6.47 white, 5.88 paper */ } .lgx-rendered .lgx-router a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-rendered .lgx-router a:hover{ color:var(--lgx-accent-deep); } .lgx-rendered .lgx-router a:hover .arw{ transform:translateX(4px); } .lgx-rendered .lgx-router small{ display:block; font-size:.86rem; line-height:1.5; color:var(--lgx-text-muted); margin:-.4rem 0 0; padding-bottom:.9rem; } /* 5.28 / 5.07 */ .lgx-rendered .lgx-router .l:only-child{ display:block; padding:.95rem 0 .9rem; font-size:1rem; color:var(--lgx-text); } .lgx-rendered .is-dark .lgx-router li{ border-color:var(--lgx-line-dark); } .lgx-rendered .is-dark .lgx-router a{ color:#FF9670; } /* 8.15 ink */ .lgx-rendered .is-dark .lgx-router a:hover{ color:#fff; } .lgx-rendered .is-dark .lgx-router small{ color:rgba(255,255,255,.72); } /* 9.44 ink */ .lgx-rendered .lgx-s-plate .lgx-router li{ border-color:rgba(255,255,255,.34); } .lgx-rendered .lgx-s-plate .lgx-router a, .lgx-rendered .lgx-s-plate .lgx-router small{ color:#fff; } /* 5.20 */ /* ---- 1.11 stat / proof row ---------------------------------------- */ /* The brand accent carries the figure: 3.94 on white, 3.58 on paper, 4.41 on ink, all above the 3.0 large-text floor because the numeral is >=42px. Never used at label size on a light band. */ .lgx-rendered .lgx-stats{ list-style:none; margin:0 0 1.8rem; padding:0; display:flex; flex-wrap:wrap; gap:1.2rem clamp(2rem,5vw,4rem); } .lgx-rendered .lgx-stats li{ margin:0; padding:0; } .lgx-rendered .lgx-stats .v{ display:block; font-family:var(--lgx-font-display); font-size:clamp(2.6rem,5.5vw,4.2rem); font-weight:800; line-height:.95; letter-spacing:-.04em; color:var(--lgx-accent); } .lgx-rendered .lgx-stats .l{ display:block; margin-top:.55rem; font-size:1rem; font-weight:700; line-height:1.4; color:var(--lgx-text); max-width:22ch; } .lgx-rendered .is-dark .lgx-stats .l{ color:#fff; } .lgx-rendered .lgx-s-plate .lgx-stats .v, .lgx-rendered .lgx-s-accent .lgx-stats .v{ color:#fff; } /* 5.20 */ /* ---- 1.12 notes, section links, secondary line ------------------- */ .lgx-rendered .lgx-note{ font-size:.96rem; line-height:1.6; color:var(--lgx-text-muted); border-top:1px solid var(--lgx-line-light); padding-top:1rem; margin:1.6rem 0 0; max-width:64ch; } /* 5.28 / 5.07 */ .lgx-rendered .is-dark .lgx-note{ color:rgba(255,255,255,.74); border-color:var(--lgx-line-dark); } /* 9.91 ink */ .lgx-rendered .lgx-s-plate .lgx-note{ color:#fff; border-color:rgba(255,255,255,.34); } .lgx-rendered .lgx-more{ margin:1.6rem 0 0; font-size:1rem; } .lgx-rendered .lgx-more a{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--lgx-font-label); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; } /* 6.47 / 5.88 */ .lgx-rendered .lgx-more a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-rendered .lgx-more a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-rendered .lgx-more a:hover .arw{ transform:translateX(4px); } .lgx-rendered .is-dark .lgx-more a{ color:#FF9670; } /* 8.15 ink */ .lgx-rendered .lgx-s-plate .lgx-more a{ color:#fff; } .lgx-rendered .lgx-band-body .lgx-cta-row{ margin-top:1.8rem; } .lgx-rendered .lgx-secondary-line{ font-family:var(--lgx-font-label); font-size:.95rem; letter-spacing:.01em; margin:1.3rem 0 0; color:var(--lgx-text); } .lgx-rendered .lgx-secondary-line a{ font-weight:700; } .lgx-rendered .is-dark .lgx-secondary-line{ color:rgba(255,255,255,.82); } /* ---- 1.13 table ---------------------------------------------------- */ .lgx-rendered .lgx-table{ margin:0; overflow-x:auto; max-width:60rem; } .lgx-rendered .lgx-table table{ border-collapse:collapse; width:100%; font-size:.96rem; margin:0; } .lgx-rendered .lgx-table th{ font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-text-muted); text-align:left; padding:.75rem 1.2rem .75rem 0; border-bottom:2px solid var(--lgx-line-light); /* 5.28 / 5.07 */ } .lgx-rendered .lgx-table td{ padding:.85rem 1.2rem .85rem 0; border-bottom:1px solid var(--lgx-line-light); color:var(--lgx-text); line-height:1.5; vertical-align:top; } .lgx-rendered .lgx-table td:first-child{ font-weight:700; white-space:nowrap; } .lgx-rendered .is-dark .lgx-table th{ color:rgba(255,255,255,.72); border-color:var(--lgx-line-dark); } /* 9.44 ink */ .lgx-rendered .is-dark .lgx-table td{ color:rgba(255,255,255,.82); border-color:var(--lgx-line-dark); } /* 11.93 ink */ /* ---- 1.14 FAQ (hairline question / answer ledger) ----------------- */ /* Question in the left third, answer in the right two thirds, hairline rows, one column. Answers stay visible text: the FAQPage schema on the pages that carry one (schema-map.json) was extracted from the live text. Not 4pl's boxed cards and not PLHH's two-column item grid. */ .lgx-rendered .lgx-faq{ max-width:60rem; border-top:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-faq-item{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:.6rem clamp(1.6rem,3.5vw,3rem); padding:1.4rem 0; border-bottom:1px solid var(--lgx-line-light); } .lgx-rendered .lgx-faq-item h3{ font-size:1.06rem; line-height:1.35; margin:0; } .lgx-rendered .lgx-faq-item .a p{ font-size:.97rem; line-height:1.62; color:var(--lgx-text-muted); margin:0 0 .8rem; } /* 5.28 white, 5.07 paper */ .lgx-rendered .lgx-faq-item .a p:last-child{ margin-bottom:0; } .lgx-rendered .is-dark .lgx-faq, .lgx-rendered .is-dark .lgx-faq-item{ border-color:var(--lgx-line-dark); } .lgx-rendered .is-dark .lgx-faq-item .a p{ color:rgba(255,255,255,.78); } /* 10.89 ink */ /* ---- 1.15 photo split band (photo-left / photo-right) ------------- */ .lgx-rendered .lgx-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2.2rem,5vw,4rem); align-items:center; } .lgx-rendered .is-photo-left .lgx-split-photo{ order:-1; } .lgx-rendered .lgx-split-photo{ min-height:clamp(280px,36vw,440px); } .lgx-rendered .lgx-split .lgx-band-head{ margin-bottom:1.6rem; } /* ---- 1.16 full-bleed photo strip ---------------------------------- */ /* The .lgx-page prefix is load-bearing (trap 3): Kadence's `.single-content figure{margin-bottom:var(--global-md-spacing)}` is (0,1,1) and a bare figure rule loses to it, leaving a 32px strip of body background under the photo. Same construction as the custom pages' photobands. */ /* 2026-09-21 picture pass: the window follows the BAKE. The old clamp(220px,28vw,400px) capped the strip at 400px, so at 2560 wide it was a 6.4:1 slot showing the middle 43% of a 2.75:1 file - vessel crowns, trailer wheels and every sling cropped off. render-pages.ps1 now reads each baked file's pixel size and emits --ar (w/h); with the container at that ratio `cover` has nothing to crop. 88vh stops a squarer bake (band-company is 2:1) from outgrowing a short landscape window - the only case that still crops, and then by under 10% top and bottom. 2.75 is the legacy bake ratio for a strip published before --ar existed. */ .lgx-page .lgx-strip{ display:block; margin:0; width:100%; max-width:none; aspect-ratio:var(--ar,2.75); max-height:88vh; background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ---- 1.17 closing band ------------------------------------------- */ .lgx-rendered .lgx-closer{ text-align:center; } .lgx-rendered .lgx-closer-inner{ max-width:56rem; margin:0 auto; } .lgx-rendered .lgx-closer .lgx-eyebrow{ justify-content:center; } .lgx-rendered .lgx-closer .lgx-h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.9rem) !important; max-width:24ch; margin-left:auto !important; margin-right:auto !important; } /* 5.20 */ .lgx-rendered .lgx-closer .lgx-lead{ max-width:58ch; margin:0 auto 1.9rem !important; } .lgx-rendered .lgx-closer .lgx-band-body p{ margin-left:auto; margin-right:auto; } .lgx-rendered .lgx-closer .lgx-cta-row{ justify-content:center; } /* trap 2: `.lgx-page a{color:inherit}` is (0,1,1); these are (0,3,0) */ .lgx-page.lgx-rendered .lgx-closer .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 on the white fill */ .lgx-page.lgx-rendered .lgx-closer .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-page.lgx-rendered .lgx-closer .lgx-btn-outline{ color:#fff; border-color:rgba(255,255,255,.5); } .lgx-page.lgx-rendered .lgx-closer .lgx-btn-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; } .lgx-rendered .lgx-closer .lgx-secondary-line{ color:#fff; margin-top:1.5rem; } /* 5.20 */ /* a body paragraph straight in the closer (no .lgx-band-body; request-a-quote and general contact, 2026-09-26) fell to the frozen `.lgx-page p` --lgx-text, 3.1:1 on the orange. White: 5.20 at the deep end of the accent. */ .lgx-rendered .lgx-s-accent.lgx-closer .lgx-closer-inner > p:not([class]){ color:#fff; } .lgx-rendered .lgx-closer .lgx-secondary-line a{ color:#fff; text-decoration:underline; text-underline-offset:3px; } /* 2026-09-22: a closer on WHITE, for a page whose last content band is plate. Plate and accent are the same orange, so the two ran together as one band (industrial-fabrication). Same centred layout; the renderer gives it the primary button and the on-light lead (muted 5.28). */ .lgx-rendered .lgx-s-white.lgx-closer .lgx-h2{ color:var(--lgx-text); } /* 16.33 */ .lgx-rendered .lgx-s-white.lgx-closer .lgx-secondary-line, .lgx-rendered .lgx-s-white.lgx-closer .lgx-secondary-line a{ color:var(--lgx-text); } /* 16.33 */ /* a primary button on the plate would be deep-on-deep: white fill there too */ .lgx-page.lgx-rendered .lgx-s-plate .lgx-btn-primary{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page.lgx-rendered .lgx-s-plate .lgx-btn-primary:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-page.lgx-rendered .lgx-s-plate .lgx-btn-outline{ border-color:rgba(255,255,255,.5); } /* ---- 1.18 forms --------------------------------------------------- */ .lgx-rendered .lgx-form{ max-width:52rem; } /* ---- 1.19 responsive ---------------------------------------------- */ @media (max-width:1080px){ .lgx-rendered .lgx-cards.cols-3, .lgx-rendered .lgx-subs.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px){ .lgx-rendered .lgx-cols.cols-2, .lgx-rendered .lgx-cols.cols-3, .lgx-rendered .lgx-subs.cols-2, .lgx-rendered .lgx-subs.cols-3, .lgx-rendered .lgx-cards.cols-2{ grid-template-columns:1fr; } .lgx-rendered .lgx-split{ grid-template-columns:1fr; } .lgx-rendered .lgx-split-photo{ order:-1; min-height:260px; } .lgx-rendered .lgx-faq-item{ grid-template-columns:1fr; gap:.5rem; } .lgx-rendered .lgx-fact{ grid-template-columns:1fr; gap:.2rem; } .lgx-rendered .lgx-col.is-pull .q{ max-width:none; } } @media (max-width:680px){ .lgx-rendered .lgx-cards.cols-3{ grid-template-columns:1fr; } .lgx-rendered .lgx-band-hero .lgx-h1{ max-width:none; } .lgx-rendered .lgx-ledger li{ padding-left:3rem; } .lgx-rendered .lgx-stats .v{ font-size:2.6rem; } /* a 2.5:1 strip is a 156px sliver at 390; 200px trims the sides instead (under 22%), and every strip is baked with its subject centred */ .lgx-page .lgx-strip{ min-height:200px; } /* On a phone the H1 spans the full width and `cover` on a portrait box shows the WHOLE height of a 2:1 photo (open sky, white modules), so the left-weighted desktop scrim leaves the right half of the headline over bright pixels. Near-flat wash with a heavier top, the fix the 4PL and PLHH heroes needed; audited with hero-contrast.ps1 -Occurrence 2. */ .lgx-rendered .lgx-band-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.86) 0%, rgba(12,15,16,0.84) 50%, rgba(12,15,16,0.80) 100%), linear-gradient(0deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.50) 55%, rgba(12,15,16,0.74) 100%); } } /* ============================================================ LGX /services/4pl/ - 4PL & MANAGED LOGISTICS ------------------------------------------------------------ Scoped to .lgx-4pl. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-*, .lgx-photo and .lgx-reveal all come from lgx-home.css, which is concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them, so anything here outranks both on a tie. Three cascade traps this file has to keep clearing (all learned live): 1. Kadence's inline global CSS carries a bare `h3{color:var(--global-palette3)}` that beats inheritance. Every heading below therefore states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1) outranks a bare `.lgx-btn-*` (0,1,0). Button colour rules stay prefixed with .lgx-page. 3. Kadence content.min.css has `.single-content ul,.single-content ol {margin:0 0 var(--global-md-spacing);padding-left:2em}` at (0,1,1). Every list rule here is prefixed with .lgx-page to reach (0,2,x). BAND RHYTHM (the reason the page was rebuilt - Ryan, 2026-09-09: "almost all sections are white or off-white"): 1 hero ink + photo 2 proof white 3 3PL vs 4PL ink 4 scope paper + blueprint wash 5 how it runs terracotta plate 6 asset-backed white + photo 7 photo band full-bleed 8 industries paper 9 fork ink 10 FAQ white 11 CTA accent gradient No two light bands ever touch except 6/8, and the photo band splits those. ============================================================ */ .lgx-4pl section{ position:relative; } /* ============================================================ 1 - HERO ============================================================ */ /* Same four-layer construction as the home hero minus the : lgx-hero.js is enqueued on is_front_page() only, so an inner page must be complete without it. Height is capped so band 2 always peeks above the fold. */ .lgx-4pl-hero{ background:var(--lgx-ink); overflow:hidden; padding:clamp(4.5rem,7vw,6.5rem) 0 clamp(2.2rem,3vw,3rem); } .lgx-4pl-hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .lgx-4pl-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center 58%); } /* hero-4pl.jpg is the brightest hero on the site - open sky over white modular units - and this hero's copy is LEFT aligned, not centred like the home one. So the scrim is left-weighted rather than a flat wash: the guaranteed-dark zone has to be the left half of the frame at every viewport. Weights were set by hero-contrast.ps1, which re-composites this photo under both gradients and scores every text box against the pixels that land behind it. The numbers are in the Decisions Log; the binding constraint is the accent half of the H1 (--lgx-accent is 4.41:1 even on flat ink, and the photo only pulls that down), not the white copy, which sits around 14:1 here. Put a darker photo in this slot and these can come down. Literal rgba(), not a --var: hero-contrast.ps1 PARSES these stops out of the stylesheet so the audit can never go stale against the design, and rgba(var(--x),.95) is two levels of nesting it would have to unpick. The var saved nothing but three characters a line. */ .lgx-4pl-hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.91) 0%, rgba(12,15,16,0.88) 38%, rgba(12,15,16,0.66) 66%, rgba(12,15,16,0.50) 100%), linear-gradient(0deg, rgba(12,15,16,0.78) 0%, rgba(12,15,16,0.18) 52%, rgba(12,15,16,0.32) 100%); } .lgx-4pl-hero-grid{ position:absolute; inset:0; z-index:2; opacity:.5; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px), repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px); } .lgx-4pl-hero-inner{ max-width:var(--lgx-container); } .lgx-4pl-hero .lgx-h1{ max-width:19ch; } .lgx-4pl-hero .lgx-lead{ max-width:58ch; margin-bottom:2.2rem !important; } /* The lifecycle rail: the six stages an LGX-managed program covers, stated as the hero's last line instead of buried in section 4. It is the whole product in one strip, and nothing like it exists on the home page - which is the point, since the home trust band links straight here. */ .lgx-4pl-rail{ margin:clamp(2.4rem,4vw,3.4rem) 0 0; padding:1.5rem 0 0; border-top:1px solid rgba(255,255,255,.17); } .lgx-4pl-rail-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 1rem 0 !important; } .lgx-page .lgx-4pl-rail-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:0; } .lgx-page .lgx-4pl-rail-steps li{ position:relative; margin:0; padding:.85rem 1rem 0 0; display:flex; align-items:baseline; gap:.6rem; } /* The connector is a per-item rule, not one absolute line, so it cannot fall out of register when the grid rewraps at the two breakpoints below. It sits at the item's own top edge with the padding above holding the text clear; an earlier version put it at top:-1.5rem, which landed it exactly on the baseline of the "The lifecycle we manage" label and struck it through. */ .lgx-page .lgx-4pl-rail-steps li::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:var(--lgx-accent); } /* Every segment is accent, so at desktop the six abut (gap:0) into one unbroken orange bar - Ryan, 2026-09-15. The first version lit only segment one, as a "sequence starts here" mark, and it read as a sixth of a bar. On the wrapped layouts each row simply carries its own orange rule. */ .lgx-4pl-rail-steps .k{ font-family:var(--lgx-font-label); font-size:.7rem; font-weight:700; letter-spacing:.12em; color:#FF9670; /* 8.15:1 on ink. --lgx-accent is 4.41:1: under AA's 4.5 at this size */ } .lgx-4pl-rail-steps .v{ font-size:.92rem; font-weight:700; color:rgba(255,255,255,.88); letter-spacing:-.01em; } /* ============================================================ 2 - PROOF ============================================================ */ /* Deliberately NOT the home trust band. Same headline number, because it is the page's proof and the home band promises it, but a different figure treatment (one oversized all-accent numeral) and entirely different prose: the home paragraph was reproduced here word for word and Ryan flagged it. 2026-09-15, also Ryan: the three-up proof strip under the split came out, and with it the hairline that divided them; the numeral lost its short accent underline; and the "+" went from accent-deeper to the numeral's own accent. */ .lgx-4pl-proof{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-4pl-proof-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-4pl-stat{ font-family:var(--lgx-font-display); font-size:clamp(3.6rem,8vw,6.2rem) !important; font-weight:800 !important; line-height:.9 !important; letter-spacing:-.045em !important; /* 3.94:1 on white. Large-text AA is 3:1, so the brand accent (not the deeper button fill) can carry the number - and should: it is the loudest mark on the page and the only place the pure brand orange appears on a light band. */ color:var(--lgx-accent) !important; margin:0 0 1rem 0 !important; } .lgx-4pl-stat-label{ font-size:1rem !important; line-height:1.45 !important; font-weight:700; color:var(--lgx-text) !important; margin:0 !important; max-width:20ch; } .lgx-4pl .lgx-4pl-proof-copy p{ font-size:1.12rem; line-height:1.62; color:var(--lgx-text); margin:0 0 1.1rem; } .lgx-4pl .lgx-4pl-proof-copy p:last-child{ margin-bottom:0; color:var(--lgx-text-muted); } .lgx-4pl .lgx-4pl-proof-copy em{ font-style:normal; font-weight:700; } /* Two short sentences as one headline. `balance` makes a two-line wrap fall between them ("Your equipment." / "Our responsibility.") instead of stranding "Our" at the end of line one on a phone; one line where it fits. */ .lgx-4pl-proof .lgx-h2{ text-wrap:balance; } /* ============================================================ 3 - WHAT 4PL ACTUALLY MEANS (ink) ============================================================ */ .lgx-4pl-vs{ background:var(--lgx-ink); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-4pl-vs::before{ /* same accent bloom + survey grid the ink bands use elsewhere */ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(90% 70% at 84% 8%, rgba(220,83,52,.16), transparent 60%), repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-4pl-vs .lgx-container{ z-index:2; } .lgx-4pl-head{ max-width:52rem; margin:0 0 clamp(2.4rem,4vw,3.4rem); } .lgx-4pl-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-4pl-head.is-centered .lgx-eyebrow{ justify-content:center; } .lgx-4pl-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } .lgx-4pl-vs .lgx-h2{ color:#fff !important; } .lgx-4pl-vs .lgx-lead{ color:rgba(255,255,255,.78) !important; margin-bottom:0 !important; } .lgx-4pl-vs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); align-items:stretch; } .lgx-4pl-card{ background:var(--lgx-ink-2); border:1px solid var(--lgx-line-dark); border-radius:var(--lgx-radius); padding:clamp(1.7rem,3vw,2.3rem); display:flex; flex-direction:column; } /* the "one program" side is the argument, so it gets the accent edge and a raised surface. The vendor-stack side stays deliberately flat and unlit. */ .lgx-4pl-card.is-lit{ background:var(--lgx-ink-3); border-color:rgba(220,83,52,.55); box-shadow:inset 0 0 0 1px rgba(220,83,52,.14); } .lgx-4pl-card-tag{ font-family:var(--lgx-font-label); font-size:.68rem !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase; margin:0 0 .9rem 0 !important; color:rgba(255,255,255,.55) !important; } .lgx-4pl-card.is-lit .lgx-4pl-card-tag{ color:#FF9670 !important; } /* 6.24:1 on ink-3; --lgx-accent would be 3.38:1 */ .lgx-4pl-card h3{ font-family:var(--lgx-font-display); font-size:1.32rem !important; font-weight:700 !important; letter-spacing:-.02em !important; color:#fff !important; margin:0 0 .8rem 0 !important; } .lgx-4pl .lgx-4pl-card p{ font-size:.98rem; line-height:1.6; color:rgba(255,255,255,.78); margin:0 0 1.5rem; } /* The seam diagram. Card A is four detached chips - four vendors, four systems, and the gaps between them are the point. Card B is one unbroken bar. This is the copy's "programs fail in the seams" argument drawn rather than asserted; it is CSS, so there is no asset to ship or crop. */ .lgx-page .lgx-4pl-chain{ list-style:none; margin:auto 0 0; padding:1.4rem 0 0; border-top:1px solid var(--lgx-line-dark); display:flex; gap:.4rem; } .lgx-page .lgx-4pl-chain li{ margin:0; flex:1 1 0; text-align:center; padding:.5rem .2rem; border-radius:2px; font-family:var(--lgx-font-label); font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px dashed rgba(255,255,255,.3); color:rgba(255,255,255,.72); } .lgx-page .lgx-4pl-chain.is-one{ gap:0; } .lgx-page .lgx-4pl-chain.is-one li{ border:none; border-radius:0; background:var(--lgx-accent-deep); color:#fff; /* 5.2:1 */ border-right:1px solid rgba(255,255,255,.28); } .lgx-page .lgx-4pl-chain.is-one li:first-child{ border-radius:2px 0 0 2px; } .lgx-page .lgx-4pl-chain.is-one li:last-child{ border-radius:0 2px 2px 0; border-right:none; } .lgx-4pl-chain-note{ font-size:.78rem !important; color:rgba(255,255,255,.6) !important; margin:.7rem 0 0 0 !important; } .lgx-4pl-card.is-lit .lgx-4pl-chain-note{ color:rgba(255,255,255,.72) !important; } .lgx-4pl-pull{ margin:clamp(2.4rem,4vw,3.4rem) 0 0; padding-top:clamp(2rem,3vw,2.6rem); border-top:1px solid var(--lgx-line-dark); text-align:center; } .lgx-4pl .lgx-4pl-pull p{ font-family:var(--lgx-font-display); font-size:clamp(1.25rem,2.4vw,1.8rem) !important; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:#fff; margin:0 auto; max-width:34ch; } /* Brand accent, the same orange as the hero H1 (Ryan, 2026-09-15; it was the #FF9670 tint). 4.41:1 on ink, and this line is >=20px bold at every width - large text, whose AA floor is 3:1. The tint stays on the SMALL labels on the dark bands (rail numbers, card tag, fork link), where the accent would miss the 4.5:1 that normal-size text needs. */ .lgx-4pl-pull p .accent{ color:var(--lgx-accent); } /* ============================================================ 4 - PROGRAM SCOPE (paper + blueprint wash) ============================================================ */ /* bg-4pl.jpg was baked onto #F4F4F2 at alpha .45 for exactly this surface (bake-washes.ps1), so it is reused unchanged - the band it was made for just moved from the renderer's stack to this one. */ .lgx-4pl-scope{ background-color:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-page .lgx-4pl-scope-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(1.6rem,4vw,3.4rem); row-gap:0; } .lgx-page .lgx-4pl-scope-grid li{ margin:0; padding:1.4rem 0; border-top:1px solid var(--lgx-line-light); display:grid; grid-template-columns:2.6rem 1fr; align-items:start; } .lgx-page .lgx-4pl-scope-grid li:nth-last-child(-n+2){ border-bottom:1px solid var(--lgx-line-light); } .lgx-4pl-scope-grid .n{ font-family:var(--lgx-font-display); font-size:.82rem; font-weight:800; letter-spacing:.02em; color:var(--lgx-accent-deeper); padding-top:.25rem; /* 5.27:1 on paper */ } .lgx-4pl-scope-grid h3{ font-family:var(--lgx-font-display); font-size:1.06rem !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--lgx-text) !important; margin:0 0 .3rem 0 !important; } .lgx-4pl .lgx-4pl-scope-grid p{ font-size:.93rem; line-height:1.55; color:var(--lgx-text-muted); margin:0; } .lgx-4pl .lgx-4pl-scope-grid a{ display:inline-block; margin-top:.45rem; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; } .lgx-4pl .lgx-4pl-scope-grid a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } /* ============================================================ 5 - HOW A PROGRAM RUNS (terracotta plate) ============================================================ */ /* background-color MUST equal the plate's own field colour: it is what shows if the JPG 404s and what every ratio below assumes. bg-4pl-program.jpg is "Monochrome Orange Industrial Site Plan.png" darkened 0.78 in the bake, which puts the field at #AC391A (white 6.26:1) and its brightest region - the warehouse blocks, lower right - at 4.68:1. Body copy on this band is therefore PURE #fff, not the home band's rgba(255,255,255,.92), which would drop that worst case to about 4.1:1. See bake-washes.ps1 $bandArt. */ .lgx-4pl-how{ background-color:#AC391A; color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-4pl-how .lgx-eyebrow{ color:#fff !important; } .lgx-4pl-how .lgx-eyebrow::before{ background:#fff; } .lgx-4pl-how .lgx-h2{ color:#fff !important; } .lgx-4pl-how .lgx-lead{ color:#fff !important; margin-bottom:0 !important; } .lgx-page .lgx-4pl-steps{ list-style:none; margin:0; padding:0; --rail-gap:clamp(1.4rem,3vw,2.2rem); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--rail-gap); } .lgx-page .lgx-4pl-steps li{ margin:0; padding:0; position:relative; } /* Connector drawn per item, from this numeral's centre across the gap to the next one, rather than as one absolute line over the whole list. The home band's single-line version (left:3%/right:3%) works there because five columns leave little slack; with four it overhangs the last numeral by ~210px at 1440 and reads as a loose end. Per item it is exact at every width and needs no magic percentages. */ .lgx-page .lgx-4pl-steps li::before{ content:''; position:absolute; z-index:0; top:31px; left:31px; height:1px; right:calc(-1 * var(--rail-gap)); background:rgba(255,255,255,.34); } .lgx-page .lgx-4pl-steps li:last-child::before{ content:none; } /* the numeral is in normal flow, so it would paint UNDER the absolutely positioned connector; positioning it puts the white disc back on top. */ .lgx-4pl-step-num{ position:relative; z-index:1; font-family:var(--lgx-font-display); font-size:1.5rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.03em !important; margin:0 0 1.1rem 0 !important; color:#A63A1D !important; /* deeper orange on a white disc: 6.5:1 */ width:62px; height:62px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; } .lgx-4pl-steps h3{ font-family:var(--lgx-font-display); font-size:1.08rem !important; font-weight:700 !important; letter-spacing:-.01em !important; color:#fff !important; margin:0 0 .5rem 0 !important; } .lgx-4pl .lgx-4pl-steps p{ font-size:.92rem; line-height:1.55; color:#fff; margin:0; } /* ============================================================ 6 - ASSET-BACKED (white + photo) ============================================================ */ .lgx-4pl-yard{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-4pl-yard-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(2.2rem,5vw,4rem); align-items:center; } .lgx-4pl .lgx-4pl-yard-copy p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text-muted); margin:0 0 1.1rem; max-width:56ch; } .lgx-4pl-yard-photo{ min-height:clamp(280px,38vw,440px); } .lgx-page .lgx-4pl-yard-links{ list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem; } .lgx-page .lgx-4pl-yard-links li{ margin:0; padding:0; } .lgx-4pl .lgx-4pl-yard-links a{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:.7rem 1.05rem; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; transition:border-color .2s ease,background .2s ease; } .lgx-4pl .lgx-4pl-yard-links a:hover{ border-color:var(--lgx-accent); background:var(--lgx-accent-soft); } /* ============================================================ 7 - PHOTO BAND ============================================================ */ /* Same construction as the renderer's .lgx-photo-band figure so the two look identical wherever a reader crosses between page types — INCLUDING the .lgx-page prefix, which is load-bearing: Kadence's content.min.css carries `.single-content figure{margin-top:0;margin-bottom:var(--global-md-spacing)}` at (0,1,1), and a bare `.lgx-4pl-photoband{margin:0}` at (0,1,0) loses to it. Symptom is a 32px strip of body background under the photo strip. Caught in the preview only because 4pl-preview.html loads Kadence's real stylesheets. */ /* 2026-09-21 picture pass: the window follows the bake (2000x869), so `cover` has nothing to crop. clamp(210px,26vw,360px) capped the strip at a fixed height, which at 2560 wide showed barely 40% of the file's height. 88vh only bites on a short landscape window; <=680px takes a 200px floor and trims the sides instead. */ .lgx-page .lgx-4pl-photoband{ display:block; margin:0; width:100%; max-width:none; aspect-ratio:2000 / 869; max-height:88vh; background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 8 - WHO RUNS ON 4PL (paper) ============================================================ */ .lgx-4pl-who{ background:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-4pl-who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); } .lgx-4pl-who-card{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease; } .lgx-4pl-who-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(0,0,0,.09); border-color:rgba(220,83,52,.34); } .lgx-4pl-who-card .lgx-photo{ height:190px; border-radius:0; flex:none; } .lgx-4pl-who-body{ padding:1.7rem 1.6rem 1.5rem; display:flex; flex-direction:column; flex:1; } .lgx-4pl-who-card h3{ font-family:var(--lgx-font-display); font-size:1.2rem !important; font-weight:700 !important; letter-spacing:-.02em !important; color:var(--lgx-text) !important; margin:0 0 .6rem 0 !important; } .lgx-4pl .lgx-4pl-who-card p{ font-size:.93rem; line-height:1.55; color:var(--lgx-text-muted); margin:0 0 1.2rem; } .lgx-4pl-who-link{ margin-top:auto; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); } .lgx-4pl-who-card:hover .lgx-4pl-who-link .arw{ transform:translateX(4px); } .lgx-4pl-who-link .arw{ display:inline-block; transition:transform .25s ease; } /* ============================================================ 9 - PROGRAM OR PROJECT (ink fork) ============================================================ */ /* A router, not a paragraph. Two sibling pages compete for the same search ("4PL"), and the copy doc's whole job for this section is to send the reader to the right one - so it is built as a choice with a you-are-here marker. */ .lgx-4pl-fork{ background:var(--lgx-ink); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-4pl-fork::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 16% 100%, rgba(220,83,52,.14), transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-4pl-fork .lgx-container{ z-index:2; } .lgx-4pl-fork .lgx-h2{ color:#fff !important; } .lgx-4pl-fork-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.5vw,1.8rem); } .lgx-4pl-fork-panel{ border:1px solid var(--lgx-line-dark); border-radius:var(--lgx-radius); padding:clamp(1.7rem,3vw,2.2rem); background:var(--lgx-ink-2); display:flex; flex-direction:column; } .lgx-4pl-fork-panel.is-here{ background:var(--lgx-ink-3); border-color:rgba(255,255,255,.2); } a.lgx-4pl-fork-panel:hover{ border-color:rgba(220,83,52,.6); background:var(--lgx-ink-3); } .lgx-4pl-fork-mark{ display:inline-flex; align-self:flex-start; align-items:center; gap:.5rem; font-family:var(--lgx-font-label); font-size:.66rem !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase; margin:0 0 1rem 0 !important; padding:.34rem .6rem; border-radius:2px; } .lgx-4pl-fork-panel.is-here .lgx-4pl-fork-mark{ background:var(--lgx-accent-deep); color:#fff !important; } a.lgx-4pl-fork-panel .lgx-4pl-fork-mark{ border:1px solid rgba(255,255,255,.26); color:rgba(255,255,255,.72) !important; } .lgx-4pl-fork-panel h3{ font-family:var(--lgx-font-display); font-size:1.3rem !important; font-weight:700 !important; letter-spacing:-.02em !important; color:#fff !important; margin:0 0 .7rem 0 !important; } .lgx-4pl .lgx-4pl-fork-panel p{ font-size:.98rem; line-height:1.6; color:rgba(255,255,255,.78); margin:0; } .lgx-4pl-fork-go{ margin-top:1.4rem; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FF9670; } .lgx-4pl-fork-go .arw{ display:inline-block; transition:transform .25s ease; } a.lgx-4pl-fork-panel:hover .lgx-4pl-fork-go .arw{ transform:translateX(4px); } .lgx-4pl .lgx-4pl-fork-foot{ margin:clamp(1.8rem,3vw,2.4rem) 0 0; text-align:center; font-size:1rem; color:rgba(255,255,255,.78); } .lgx-4pl .lgx-4pl-fork-foot strong{ color:#fff; font-weight:700; } /* ============================================================ 10 - FAQ (white) ============================================================ */ /* Answers stay visible text, never a JS accordion: the FAQPage schema on this page (schema-map.json, id 301) is extracted from the LIVE rendered page, and Google requires the marked-up answer to be the visible one. */ .lgx-4pl-faq{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-4pl-faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); } .lgx-4pl-faq-item{ background:var(--lgx-light); border:1px solid var(--lgx-line-light); border-left:3px solid var(--lgx-accent); border-radius:var(--lgx-radius); padding:clamp(1.5rem,2.6vw,1.9rem); } .lgx-4pl-faq-item h3{ font-family:var(--lgx-font-display); font-size:1.08rem !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--lgx-text) !important; margin:0 0 .6rem 0 !important; } .lgx-4pl .lgx-4pl-faq-item p{ font-size:.95rem; line-height:1.6; color:var(--lgx-text-muted); margin:0; } /* ============================================================ 11 - CLOSING CTA (accent gradient) ============================================================ */ /* The accent gradient is the house closing band on every inner page. The home page's own CTA went white on 2026-08-28; that was a home-only change and this page keeps the inner-page convention on purpose. Gradient runs deep->deeper because white body copy on --lgx-accent is 3.56:1 (AA fail). */ .lgx-4pl-cta{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:#fff; } .lgx-4pl-cta .lgx-eyebrow{ color:#fff !important; justify-content:center; } .lgx-4pl-cta .lgx-eyebrow::before{ background:#fff; } .lgx-4pl-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:#fff !important; margin:0 0 1rem 0 !important; } .lgx-4pl .lgx-4pl-cta .sub{ font-size:1.1rem; line-height:1.6; color:#fff; max-width:58ch; margin:0 auto 2rem; } .lgx-4pl-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-4pl-cta .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } .lgx-page .lgx-4pl-cta .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-4pl .lgx-4pl-cta-phone{ margin:1.5rem 0 0; font-size:.98rem; color:#fff; } .lgx-4pl .lgx-4pl-cta-phone a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .lgx-page .lgx-4pl-rail-steps{ grid-template-columns:repeat(3,1fr); row-gap:1.5rem; } .lgx-4pl-who-grid{ grid-template-columns:1fr; } .lgx-4pl-who-card .lgx-photo{ height:220px; } } @media (max-width:900px){ .lgx-4pl-proof-grid{ grid-template-columns:1fr; } .lgx-4pl-stat-label{ max-width:none; } .lgx-4pl-vs-grid, .lgx-4pl-fork-grid, .lgx-4pl-faq-grid{ grid-template-columns:1fr; } .lgx-page .lgx-4pl-scope-grid{ grid-template-columns:1fr; } .lgx-page .lgx-4pl-scope-grid li:nth-last-child(-n+2){ border-bottom:none; } .lgx-page .lgx-4pl-scope-grid li:last-child{ border-bottom:1px solid var(--lgx-line-light); } .lgx-4pl-yard-grid{ grid-template-columns:1fr; } .lgx-4pl-yard-photo{ min-height:260px; order:-1; } .lgx-page .lgx-4pl-steps{ grid-template-columns:repeat(2,1fr); row-gap:2.2rem; } .lgx-page .lgx-4pl-steps li::before{ content:none; } } @media (max-width:680px){ .lgx-page .lgx-4pl-photoband{ min-height:200px; } .lgx-page .lgx-4pl-rail-steps{ grid-template-columns:repeat(2,1fr); } .lgx-page .lgx-4pl-steps{ grid-template-columns:1fr; row-gap:1.8rem; } .lgx-4pl-hero .lgx-h1{ max-width:none; } /* The desktop scrim is left-weighted because the copy occupies the left half and the yard should stay photographic on the right. On a phone there is no right half - the H1 spans the full 390px - and `cover` on a portrait box shows the WHOLE height of a 2:1 photo, which puts open sky directly behind the headline. Audited at 390: the accent half of the H1 came out at 2.98:1 against the desktop scrim, i.e. AA-large by a hundredth. So the phone gets a near-flat horizontal wash and a heavier top, and the same audit puts it at 4.4:1. Re-run hero-contrast.ps1 -Nodes hero-nodes-390.json -Occurrence 2 after touching this. */ .lgx-4pl-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.80) 50%, rgba(12,15,16,0.76) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.46) 55%, rgba(12,15,16,0.72) 100%); } /* four dashed chips at 0.6rem stop being readable under ~420px of card */ .lgx-page .lgx-4pl-chain{ flex-wrap:wrap; } .lgx-page .lgx-4pl-chain li{ flex:1 1 44%; } .lgx-page .lgx-4pl-chain.is-one li{ flex:1 1 0; } } /* ============================================================ LGX /services/project-logistics-4pl/ - PROJECT & HEAVY-HAUL LOGISTICS ------------------------------------------------------------ Scoped to .lgx-plhh. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-*, .lgx-photo and .lgx-reveal come from lgx-home.css, concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them, so anything here outranks both on a tie. Three cascade traps this file keeps clearing (all learned live on the two earlier custom pages): 1. Kadence's inline global CSS carries a bare `h3{color:var(--global-palette3)}` that beats inheritance. Every heading below states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1) outranks a bare `.lgx-btn-*` (0,1,0). Button colour rules stay prefixed with .lgx-page. 3. Kadence content.min.css has `.single-content ul,.single-content ol` and `.single-content figure` at (0,1,1). Every list and figure rule here is prefixed with .lgx-page to reach (0,2,x). BAND RHYTHM (the reason the page was rebuilt: the rendered version ran the ink hero into EIGHT consecutive white/paper bands): 1 hero ink + photo (hero-plhh-lift.jpg, boxed) 2 load vs project white 3 how it moves ink + crane-blueprint plate (bg-plhh-lift.jpg) #how-a-project-moves 4 cargo paper + blueprint wash (bg-project-logistics-4pl.jpg) 5 promise colour plate (bg-plhh-promise.jpg) 6 asset-backed white + photo (column-haul.jpg) 7 photo strip full-bleed (band-project-logistics-4pl.jpg) 8 industries paper 9 reach ink 10 FAQ white 11 CTA accent gradient No two light bands touch: 6 and 8 are split by the photo strip. CONTRAST REFERENCE (measured, not derived - see the Decisions Log 2026-09-15 entry; the 4PL entry's "2.72 on ink" figure was a wrong surface): on ink #161B1D: #fff 17.3 .82 white 12.1 .74 white 9.9 --lgx-accent 4.41 #FF9670 8.15 on ink-2 #1E2527: --lgx-accent 3.95 #FF9670 7.30 on white: --lgx-accent 3.94 accent-deep 5.20 accent-deeper 6.47 --lgx-text-muted 5.33 on paper #F4F4F2: --lgx-text-muted 5.08 accent-deeper 5.27 on the plates: stated at each band, from plate-contrast.ps1 over the JPGs. AA: 4.5 for normal text, 3.0 for large (>=24px, or >=18.66px bold). ============================================================ */ .lgx-plhh section{ position:relative; } /* Trap 1 in practice: on the light bands .lgx-h2 has no colour of its own and inherits Kadence's global heading colour (#1A1A1A) instead of --lgx-text. Stated here once for the whole page; the dark bands override to #fff. */ .lgx-plhh .lgx-h2{ color:var(--lgx-text) !important; } .lgx-plhh-head{ max-width:52rem; margin:0 0 clamp(2.4rem,4vw,3.4rem); } .lgx-plhh-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-plhh-head.is-centered .lgx-eyebrow{ justify-content:center; } .lgx-plhh-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } /* ============================================================ 1 - HERO (ink + photo) ============================================================ */ /* Same four-layer construction as the 4PL hero (no canvas: lgx-hero.js is enqueued on the front page only). Height capped so band 2 peeks above the fold at 1440x900. */ .lgx-plhh-hero{ background:var(--lgx-ink); overflow:hidden; padding:clamp(4.5rem,7vw,6.5rem) 0 clamp(2.2rem,3vw,3rem); } .lgx-plhh-hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .lgx-plhh-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,82% center); } /* Desktop only: the bake is 2:1 and this hero is ~1.8:1 at 1440, so cover scales by HEIGHT and the whole bottom edge of the photo is in frame - which puts a crane-rental company's vest logo (bottom right, source y>93%) on the page. The renderer's shorter hero cropped it; process-photos.ps1's crop note assumed that. auto 118% at 22% crops the bottom 12% of the image (and 3% of the top) at every desktop width and takes the logo with it. Below 1081px the box is narrow enough that cover scales by width instead and the logo sits outside the frame on its own. hero-contrast.ps1 -Zoom 1.18 -FocusY 0.22 reproduces exactly this crop for the audit. */ /* 2026-09-21 picture pass - SUPERSEDES the `auto 118%` hack described above. Full-bleed `cover` could only show a horizontal slice of the lift: at 2560 the band is 3.2:1, the bake was 2:1, and the boom, the spreader frame and the carrier were all outside the window. The hero cannot grow, so the photo narrows: a right-anchored box at the bake's own ratio (2000x1407), 1.06x wide so cover trims under 3% top and bottom, faded into the ink on its left. The re-bake ends at source y=73%, above the vest logo, so there is nothing left for a background-size trick to hide. Below 1081px the box is the whole band (max-width:100%) and 82% keeps the module in a narrow window. */ @media (min-width:1081px){ .lgx-plhh-hero-photo{ inset:0 0 0 auto; height:100%; width:auto; max-width:100%; aspect-ratio:calc(2000 / 1407 * 1.06); background-position:center; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%); mask-image:linear-gradient(90deg,transparent 0,#000 22%); } } /* hero-project-logistics-4pl.jpg: an e-house module mid-air under a mobile crane, with open sky and white cloud across the whole top half and the white module centre-right. Like hero-4pl.jpg it is one of the brightest heroes on the site and the copy is LEFT aligned, so the scrim is left-weighted: the guaranteed-dark zone is the left half at every viewport, and the three-input strip under the CTAs is capped at 40rem so it stays inside that zone too. Stops were set with hero-contrast.ps1 (-Css lgx-project-logistics-4pl.css -Selector .lgx-plhh-hero-scrim -Photo hero-project-logistics-4pl.jpg -FocusY 0.52), which re-composites the photo under these exact gradients and scores every text box against the pixels behind it. Figures in the Decisions Log 2026-09-15 entry; the binding constraint is the accent half of the H1 (4.41:1 even on flat ink). The 4PL hero could fall to .66 by 66% because its H1 is 46 characters; this one is 68 and its box runs to ~71%, over the white module, so the wash has to hold .84 to 75% before it lets the sky through on the right. Literal rgba(), not a --var: hero-contrast.ps1 PARSES these stops out of the stylesheet so the audit cannot go stale against the design. */ .lgx-plhh-hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.90) 45%, rgba(12,15,16,0.84) 75%, rgba(12,15,16,0.50) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.20) 50%, rgba(12,15,16,0.36) 100%); } /* 2026-09-21: desktop stops are anchored to the CONTAINER, because that is what the text is anchored to - the H1 tail sits at 50% + 270px at every width from 1300 up (measured 1300/1440/1920/2560), so the wash holds .88 to 50% + 285px and is clear by 50% + 540px, where the module hangs. The old % stops held .84 to 75% at every width, which on a 2560 screen buried the module 640px past the last character. The bottom-up layer is masked to 35% over the photo side. Audited on real composited pixels with hero-audit-shot.mjs (hero-contrast.ps1 models full-bleed cover only). */ @media (min-width:1081px){ .lgx-plhh-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) calc(50% + 285px), rgba(12,15,16,0.32) calc(50% + 540px), rgba(12,15,16,0.22) 100%); } .lgx-plhh-hero-scrim::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.20) 50%, rgba(12,15,16,0.36) 100%); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% + 285px),rgba(0,0,0,.35) calc(50% + 540px)); mask-image:linear-gradient(90deg,#000 0,#000 calc(50% + 285px),rgba(0,0,0,.35) calc(50% + 540px)); } } .lgx-plhh-hero-grid{ position:absolute; inset:0; z-index:2; opacity:.5; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px), repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 38px); } .lgx-plhh-hero-inner{ max-width:var(--lgx-container); } /* 24ch and a smaller clamp than the shared .lgx-h1 (3.9rem). The first draft was 82 characters at 21ch/62px: FOUR lines, a 919px hero, nothing above a 900px fold. At 28ch/56px it made three lines but the box reached 81% of the frame and the audit put the accent sentence at 2.65:1 over the white module. 68 characters at 24ch/56px holds three lines with the box ending near 71%, where the scrim below is still at .84. */ .lgx-plhh-hero .lgx-h1{ max-width:24ch; font-size:clamp(2.2rem,4.2vw,3.5rem) !important; } .lgx-plhh-hero .lgx-lead{ max-width:64ch; margin-bottom:2rem !important; } /* The three-input strip: what a project needs to start. The whole intake in one line, stated above the fold, and nothing like it exists on home or on 4pl (whose hero carries a six-stage lifecycle rail instead). Capped at 40rem so every box stays in the scrim's dark left half; the audit scores it. */ .lgx-plhh-start{ max-width:40rem; margin:clamp(2rem,3.2vw,2.6rem) 0 0; padding:1.3rem 0 0; border-top:1px solid rgba(255,255,255,.17); } .lgx-plhh-start-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 1rem 0 !important; /* 6.6:1 on ink; the photo only sits under it through the scrim's .92 */ } .lgx-page .lgx-plhh-start-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } .lgx-page .lgx-plhh-start-grid li{ margin:0; padding:0; } .lgx-plhh-start-grid .k{ display:block; font-family:var(--lgx-font-label); font-size:.7rem; font-weight:700; letter-spacing:.12em; color:#FF9670; /* 8.15:1 on ink. --lgx-accent is 4.41: under AA's 4.5 at this size */ margin:0 0 .35rem; } .lgx-plhh-start-grid h3{ font-family:var(--lgx-font-display); font-size:1rem !important; font-weight:700 !important; letter-spacing:-.01em !important; color:#fff !important; margin:0 0 .3rem 0 !important; } .lgx-plhh .lgx-plhh-start-grid p{ font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.74); margin:0; } /* 9.9:1 on ink */ /* ============================================================ 2 - MOVING A LOAD vs OWNING A PROJECT (white) ============================================================ */ /* The copy doc asks for an editorial two-column comparison with a thin vertical rule and the left side subordinated. 4pl renders ITS version of this comparison as two ink cards with a seam diagram; this one is text on white with no cards, so the sibling pages do not share a component. */ .lgx-plhh-vs{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-plhh-vs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; } .lgx-plhh-vs-col{ padding:0 clamp(1.6rem,4vw,3.6rem); } .lgx-plhh-vs-col:first-child{ padding-left:0; border-right:1px solid var(--lgx-line-light); } .lgx-plhh-vs-col:last-child{ padding-right:0; } .lgx-plhh-vs-tag{ font-family:var(--lgx-font-label); font-size:.68rem !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase; margin:0 0 .9rem 0 !important; color:var(--lgx-text-muted) !important; /* 5.33:1 on white */ } .lgx-plhh-vs-col.is-lit .lgx-plhh-vs-tag{ color:var(--lgx-accent-deeper) !important; } /* 6.47:1 */ .lgx-plhh-vs-col h3{ font-family:var(--lgx-font-display); font-size:1.42rem !important; font-weight:700 !important; letter-spacing:-.02em !important; margin:0 0 .9rem 0 !important; color:var(--lgx-text-muted) !important; /* the vendor stack side is deliberately muted; 5.33:1, and 22.7px bold is large text anyway */ } .lgx-plhh-vs-col.is-lit h3{ color:var(--lgx-text) !important; } .lgx-plhh .lgx-plhh-vs-col p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text-muted); margin:0; } .lgx-plhh .lgx-plhh-vs-col.is-lit p{ color:var(--lgx-text); } .lgx-plhh-pull{ margin:clamp(2.4rem,4vw,3.4rem) 0 0; padding-top:clamp(2rem,3vw,2.6rem); border-top:1px solid var(--lgx-line-light); text-align:center; } .lgx-plhh .lgx-plhh-pull p{ font-family:var(--lgx-font-display); font-size:clamp(1.25rem,2.4vw,1.8rem) !important; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--lgx-text); margin:0 auto; max-width:34ch; } /* Brand accent on white is 3.94:1: fine for this line, which is >=20px bold at every width (large text, AA 3:1), and NOT usable for anything small on a light band - the small light-band labels below use accent-deeper. */ .lgx-plhh .lgx-plhh-pull p .accent{ color:var(--lgx-accent); } /* The router to the sibling page. 4pl closes with a two-panel fork pointing here; this reciprocates as one strip at the foot of the comparison, where a reader who has just learned what "owning a project" means can see that a standing flow of equipment is a different page. Paper on white is a surface delta inside the band, not a second light band. */ .lgx-plhh-router{ margin:clamp(2.2rem,3.5vw,3rem) auto 0; max-width:60rem; display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem clamp(1.2rem,3vw,2.4rem); align-items:center; background:var(--lgx-light); border:1px solid var(--lgx-line-light); border-left:3px solid var(--lgx-accent); border-radius:var(--lgx-radius); padding:1.2rem clamp(1.2rem,3vw,1.8rem); } .lgx-plhh-router-mark{ font-family:var(--lgx-font-label); font-size:.68rem !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase; margin:0 !important; white-space:nowrap; color:var(--lgx-text) !important; } .lgx-plhh .lgx-plhh-router p.body{ font-size:.95rem; line-height:1.55; color:var(--lgx-text-muted); margin:0; } /* 5.08:1 on paper */ .lgx-plhh .lgx-plhh-router a{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; /* 5.27:1 on paper */ } .lgx-plhh .lgx-plhh-router a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-plhh .lgx-plhh-router a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-plhh .lgx-plhh-router a:hover .arw{ transform:translateX(4px); } /* ============================================================ 3 - HOW A PROJECT MOVES (ink + crane-blueprint plate) #how-a-project-moves ============================================================ */ /* background-color MUST equal the plate's field: it is what shows if the JPG 404s and what every ratio below assumes. bg-plhh-lift.jpg is "Crane Blueprint with Suspended Load.png" composited at alpha .45 over --lgx-ink (bake-washes.ps1 $plan), so the field IS ink. At full strength the drawing's crane bodies peak at #A1A5A8 and .82 white copy over them fell to 2.15:1; at .45 the brightest pixel is #55595C and, measured over the baked JPG with plate-contrast.ps1 (every 3rd pixel): .82 white min 5.41 p0.1 7.81 p1 9.87 median 11.82 .72 white min 4.60 p0.1 6.44 p1 7.98 median 9.36 so body copy on this band can be .82 white and the small notes .72 white with AA held at the WORST pixel, not the average. --lgx-accent over that same pixel is 1.8:1, so nothing on this band sets text in the accent: the accent is confined to the diagram's lines and the node disc (decoration), and the ledger numerals use #FF9670 - 3.3:1 at the worst pixel, which clears large-text AA because they are >=25px bold. */ .lgx-plhh-how{ background-color:var(--lgx-ink); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-plhh-how .lgx-container{ z-index:2; } .lgx-plhh-how .lgx-h2{ color:#fff !important; } .lgx-plhh-how .lgx-lead{ color:rgba(255,255,255,.82) !important; margin-bottom:0 !important; } /* THE CONVERGENCE DIAGRAM. Five workstream labels across the top, five lines meeting at one node at the bottom: the set date. Pure CSS: each line is an absolutely positioned span whose background is a corner-to-corner gradient with a 2px band at 50%, which draws that span's diagonal at whatever aspect the span has - so the geometry is exact at every viewport with no SVG to ship (and no risk of the WAF choking on inline SVG in the REST payload). `to top right` draws top-left -> bottom-right; `to top left` the reverse. Column centres are at 10/30/50/70/90%; the node is at 50%. */ .lgx-plhh-conv{ margin:0 0 clamp(2.6rem,4.5vw,3.8rem); } .lgx-page .lgx-plhh-conv-labels{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); text-align:center; } .lgx-page .lgx-plhh-conv-labels li{ margin:0; padding:0 .3rem; } .lgx-plhh-conv-labels .k{ display:block; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.12em; color:#FF9670; margin:0 0 .25rem; } /* 8.15:1 on ink; small text, so not the accent */ .lgx-plhh-conv-labels .v{ display:block; font-size:.92rem; font-weight:700; color:#fff; letter-spacing:-.01em; } .lgx-plhh-conv-lines{ position:relative; height:clamp(64px,8vw,104px); margin:.9rem 0 0; } .lgx-plhh-conv-lines span{ position:absolute; top:0; bottom:0; } .lgx-plhh-conv-lines .l1{ left:10%; width:40%; background:linear-gradient(to top right,transparent calc(50% - 1px),var(--lgx-accent) calc(50% - 1px),var(--lgx-accent) calc(50% + 1px),transparent calc(50% + 1px)); } .lgx-plhh-conv-lines .l2{ left:30%; width:20%; background:linear-gradient(to top right,transparent calc(50% - 1px),var(--lgx-accent) calc(50% - 1px),var(--lgx-accent) calc(50% + 1px),transparent calc(50% + 1px)); } .lgx-plhh-conv-lines .l3{ left:50%; width:2px; margin-left:-1px; background:var(--lgx-accent); } .lgx-plhh-conv-lines .l4{ left:50%; width:20%; background:linear-gradient(to top left,transparent calc(50% - 1px),var(--lgx-accent) calc(50% - 1px),var(--lgx-accent) calc(50% + 1px),transparent calc(50% + 1px)); } .lgx-plhh-conv-lines .l5{ left:50%; width:40%; background:linear-gradient(to top left,transparent calc(50% - 1px),var(--lgx-accent) calc(50% - 1px),var(--lgx-accent) calc(50% + 1px),transparent calc(50% + 1px)); } /* the origin ticks: a dot at the top of each column so the lines visibly START at the labels rather than floating */ .lgx-plhh-conv-lines .t{ top:-5px; bottom:auto; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--lgx-accent); } .lgx-plhh-conv-lines .t1{ left:10%; } .lgx-plhh-conv-lines .t2{ left:30%; } .lgx-plhh-conv-lines .t3{ left:50%; } .lgx-plhh-conv-lines .t4{ left:70%; } .lgx-plhh-conv-lines .t5{ left:90%; } .lgx-plhh-conv-node{ text-align:center; margin:-8px 0 0; position:relative; } .lgx-plhh-conv-node .dot{ display:block; width:16px; height:16px; margin:0 auto .6rem; border-radius:50%; background:var(--lgx-accent); box-shadow:0 0 0 5px var(--lgx-ink), 0 0 0 6px rgba(220,83,52,.55); } .lgx-plhh-conv-node .v{ display:block; font-family:var(--lgx-font-display); font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:#fff; } .lgx-plhh .lgx-plhh-conv-node p{ font-size:.86rem; color:rgba(255,255,255,.72); margin:.3rem 0 0; } /* min 4.60 on the plate's worst pixel */ /* THE LEDGER. Five rows, numeral + stage name left, the deep body right, the copy doc's "~70% copy column on the right". A vertical sequence that reads as one, against 4pl's four white discs in a row and home's five-across process grid. Prefixed .lgx-page throughout: Kadence's .single-content ol rule is (0,1,1). */ .lgx-page .lgx-plhh-steps{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.16); } .lgx-page .lgx-plhh-steps li{ margin:0; padding:clamp(1.5rem,2.6vw,2.1rem) 0; border-bottom:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); gap:1rem clamp(1.4rem,3vw,3rem); align-items:start; } .lgx-plhh-step-head{ display:flex; align-items:baseline; gap:1rem; } .lgx-plhh-step-num{ font-family:var(--lgx-font-display); font-size:clamp(1.6rem,2.6vw,2.1rem) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.03em !important; margin:0 !important; color:#FF9670 !important; /* 8.15:1 on ink; 3.3:1 at the plate's worst pixel, and this is >=25px bold: large-text AA */ } .lgx-plhh-steps h3{ font-family:var(--lgx-font-display); font-size:1.22rem !important; font-weight:700 !important; letter-spacing:-.015em !important; color:#fff !important; margin:0 !important; line-height:1.2 !important; } .lgx-plhh .lgx-plhh-steps p{ font-size:1rem; line-height:1.62; color:rgba(255,255,255,.82); margin:0; } /* min 5.41 at the plate's worst pixel */ .lgx-plhh-how-foot{ margin:clamp(2rem,3.5vw,2.8rem) 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 2rem; } .lgx-plhh .lgx-plhh-how-foot p{ font-size:1.05rem; line-height:1.55; color:rgba(255,255,255,.82); margin:0; max-width:52ch; } .lgx-plhh .lgx-plhh-how-foot p strong{ color:#fff; font-weight:700; } /* ============================================================ 4 - CARGO WE HANDLE (paper + blueprint wash) ============================================================ */ /* bg-project-logistics-4pl.jpg was baked on WHITE at alpha .4 for the renderer's band 3, which was the copy-heaviest band on the site; that is the wrong surface for this band and too strong under small copy. Re-baked 2026-09-15 onto #F4F4F2. Muted body copy is only 5.08:1 on clean paper, so a wash has almost no margin to eat: at .26 the 0.1th percentile was 4.22:1 (body) / 3.93:1 (eyebrow and links), at .18 4.48 / 4.45 - both under AA. At .14, measured over the baked JPG (every 2nd pixel): --lgx-text-muted p0.1 4.62 p1 4.80 median 5.07 (single worst pixel 4.40) accent-deeper p0.1 4.76 p1 5.18 median 5.88 (single worst pixel 4.28) The cards themselves are opaque white, so the wash only ever sits under the band head and the gutters. Same filename as before on purpose (the slot was already wired); the ?v= on the inline URL is what defeats the ten-year Cache-Control on uploads/lgx/ for anyone who has the old white bake. */ .lgx-plhh-cargo{ background-color:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-plhh-cargo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.2vw,1.6rem); } .lgx-plhh-cargo-card{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.5rem,2.6vw,1.9rem); display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease; } .lgx-plhh-cargo-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.08); border-color:rgba(220,83,52,.34); } .lgx-plhh-cargo-card .n{ font-family:var(--lgx-font-display); font-size:.8rem; font-weight:800; letter-spacing:.04em; color:var(--lgx-accent-deeper); margin:0 0 .8rem; /* 6.47:1 on the white card */ } .lgx-plhh-cargo-card h3{ font-family:var(--lgx-font-display); font-size:1.14rem !important; font-weight:700 !important; letter-spacing:-.015em !important; color:var(--lgx-text) !important; margin:0 0 .55rem 0 !important; } .lgx-plhh .lgx-plhh-cargo-card p{ font-size:.94rem; line-height:1.58; color:var(--lgx-text-muted); margin:0 0 1rem; } /* 5.33:1 on white */ .lgx-plhh .lgx-plhh-cargo-card a{ margin-top:auto; display:inline-block; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; } .lgx-plhh .lgx-plhh-cargo-card a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-plhh .lgx-plhh-cargo-card a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-plhh .lgx-plhh-cargo-card:hover a .arw{ transform:translateX(4px); } /* ============================================================ 5 - THE ACCOUNTABILITY PROMISE (colour plate) ============================================================ */ /* The page's full-strength colour band. background-color MUST equal the plate's field: bg-plhh-promise.jpg is "Orange Circuit Flow Background.png" composited at alpha .22 over #A63A1D (bake-washes.ps1 $plan), which puts the field at #B43E22. As a darkened full-strength plate (Scale .78) its pale circuit lines sat at 2.69:1 against white and reaching 4.5 needed a brick-brown field; as a wash the lines are pulled toward the field and the field keeps the brand orange. Measured over the baked JPG with plate-contrast.ps1 (every 2nd pixel), pure #fff text: min 4.60 p0.1 5.19 p1 5.53 median 5.75 so every text box on this band is PURE #fff (the home band's rgba(255,255,255,.92) would take the worst pixel below 4.5), and the worst pixel - not the field - is what clears AA. Deliberately not the 4PL page's plate ("Monochrome Orange Industrial Site Plan"): sibling pages sharing a plate would read as one page. */ .lgx-plhh-promise{ background-color:#B43E22; color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-plhh-promise .lgx-eyebrow{ color:#fff !important; } .lgx-plhh-promise .lgx-eyebrow::before{ background:#fff; } .lgx-plhh-promise .lgx-h2{ color:#fff !important; } .lgx-plhh-promise-inner{ max-width:56rem; margin:0 auto; } /* The ledger: five "when X, that's ours" lines as large type. The clause before the comma runs regular, the consequence bold, so the eye reads the right-hand column as a list of what LGX owns. Large text at every width (>=19.2px bold / >=20px regular at 390), but the ratios above hold for normal text anyway. */ .lgx-page .lgx-plhh-ledger{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.34); } .lgx-page .lgx-plhh-ledger li{ margin:0; padding:clamp(1.1rem,1.8vw,1.4rem) 0; border-bottom:1px solid rgba(255,255,255,.34); font-family:var(--lgx-font-display); font-size:clamp(1.2rem,2.1vw,1.6rem); line-height:1.3; letter-spacing:-.015em; color:#fff; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:.4rem clamp(1.2rem,3vw,2.4rem); align-items:baseline; } .lgx-plhh-ledger .when{ font-weight:400; } .lgx-plhh-ledger strong{ font-weight:800; color:#fff; } .lgx-plhh .lgx-plhh-promise-note{ font-size:1.02rem; line-height:1.62; color:#fff; margin:clamp(1.8rem,3vw,2.4rem) 0 0; max-width:60ch; } .lgx-plhh .lgx-plhh-promise-note strong{ font-weight:700; } /* ============================================================ 6 - ASSET-BACKED (white + photo) ============================================================ */ .lgx-plhh-yard{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-plhh-yard-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.2rem,5vw,4rem); align-items:center; } .lgx-plhh-yard .lgx-lead{ margin-bottom:1.8rem !important; } /* Four facts as a 2x2 grid with a hairline over each, not home's ul of h3/p rows and not 4pl's paragraphs-plus-chips. */ .lgx-page .lgx-plhh-facts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.2rem,2.5vw,2rem); } .lgx-page .lgx-plhh-facts li{ margin:0; padding:1.1rem 0 1.2rem; border-top:1px solid var(--lgx-line-light); } .lgx-plhh-facts h3{ font-family:var(--lgx-font-display); font-size:1.02rem !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--lgx-text) !important; margin:0 0 .4rem 0 !important; } .lgx-plhh .lgx-plhh-facts p{ font-size:.93rem; line-height:1.55; color:var(--lgx-text-muted); margin:0; } /* 5.33:1 on white */ .lgx-plhh .lgx-plhh-facts a{ display:inline-block; margin-top:.45rem; font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; /* 6.47:1 */ } .lgx-plhh .lgx-plhh-facts a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } /* 2026-09-21: the slot takes column-haul.jpg's own ratio (1600x1231) and centres against the copy, so the column shows end to end. It used to stretch to the copy's height - nearly square at 1440 - and crop the sides. */ .lgx-plhh-yard-photo{ aspect-ratio:1600 / 1231; min-height:0; align-self:center; } /* ============================================================ 7 - PHOTO BAND ============================================================ */ /* Same construction as the renderer's .lgx-photo-band and 4pl's photoband, INCLUDING the .lgx-page prefix, which is load-bearing: Kadence's `.single-content figure{margin-bottom:var(--global-md-spacing)}` is (0,1,1) and a bare figure rule loses to it, leaving a 32px strip of body background under the strip. */ /* 2026-09-21 picture pass: the window follows the bake (2000x800), so `cover` has nothing to crop. clamp(210px,26vw,360px) capped the strip at 360px, which at 2560 wide showed 39% of the file's height. */ .lgx-page .lgx-plhh-photoband{ display:block; margin:0; width:100%; max-width:none; aspect-ratio:2000 / 800; max-height:88vh; background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 8 - INDUSTRIES (paper) ============================================================ */ .lgx-plhh-ind{ background:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-plhh-ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); } .lgx-plhh-ind-card{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease; } .lgx-plhh-ind-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(0,0,0,.09); border-color:rgba(220,83,52,.34); } .lgx-plhh-ind-card .lgx-photo{ height:180px; border-radius:0; flex:none; } .lgx-plhh-ind-body{ padding:1.6rem 1.6rem 1.5rem; display:flex; flex-direction:column; flex:1; } .lgx-plhh-ind-card .n{ font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .6rem; /* 6.47:1 on the white card */ } .lgx-plhh-ind-card h3{ font-family:var(--lgx-font-display); font-size:1.2rem !important; font-weight:700 !important; letter-spacing:-.02em !important; color:var(--lgx-text) !important; margin:0 0 .6rem 0 !important; } .lgx-plhh .lgx-plhh-ind-card p{ font-size:.93rem; line-height:1.55; color:var(--lgx-text-muted); margin:0 0 1.2rem; } .lgx-plhh-ind-link{ margin-top:auto; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); } .lgx-plhh-ind-link .arw{ display:inline-block; transition:transform .25s ease; } .lgx-plhh-ind-card:hover .lgx-plhh-ind-link .arw{ transform:translateX(4px); } /* ============================================================ 9 - REACH (ink) ============================================================ */ .lgx-plhh-reach{ background:var(--lgx-ink); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-plhh-reach::before{ /* the accent bloom + survey grid the ink bands use elsewhere */ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 14% 100%, rgba(220,83,52,.14), transparent 62%), repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-plhh-reach .lgx-container{ z-index:2; } .lgx-plhh-reach-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-plhh-reach .lgx-h2{ color:#fff !important; } .lgx-plhh .lgx-plhh-reach-body p{ font-size:1.02rem; line-height:1.65; color:rgba(255,255,255,.78); margin:0 0 1rem; max-width:56ch; } /* 11:1 on ink */ .lgx-plhh .lgx-plhh-reach-body p:last-child{ margin-bottom:0; } /* The lanes drawn as lanes: origin, a rule with an arrowhead, destination. Home's reach band lists MODES (ocean / air / door to door) as key-value rows; this lists the two proof lanes plus "everywhere else" as routes. */ .lgx-page .lgx-plhh-lanes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--lgx-line-dark); } .lgx-page .lgx-plhh-lanes li{ margin:0; padding:1.2rem 0; border-bottom:1px solid var(--lgx-line-dark); } .lgx-plhh-lane{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.9rem; } .lgx-plhh-lane .o, .lgx-plhh-lane .d{ font-family:var(--lgx-font-display); font-size:1.08rem; font-weight:700; letter-spacing:-.01em; color:#fff; white-space:nowrap; } .lgx-plhh-lane .ln{ position:relative; height:2px; background:var(--lgx-accent); } .lgx-plhh-lane .ln::after{ content:''; position:absolute; right:-1px; top:-4px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid var(--lgx-accent); } .lgx-plhh .lgx-plhh-lanes small{ display:block; margin:.5rem 0 0; font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.72); } /* 9.4:1 on ink */ .lgx-plhh .lgx-plhh-lanes a{ display:inline-block; margin-top:.5rem; font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FF9670; text-decoration:none; /* 8.15:1; the accent would be 4.41 at this size */ } .lgx-plhh .lgx-plhh-lanes a:hover{ text-decoration:underline; text-underline-offset:3px; } /* ============================================================ 10 - FAQ (white) ============================================================ */ /* Answers stay visible text, never an accordion: the FAQPage schema on page 17 (schema-map.json, 9 pairs) was extracted from the LIVE rendered page and Google requires the marked-up answer to be the visible one. The nine pairs in the markup are byte-identical to the pre-rewrite text for that reason; reword any of them and the schema has to be re-extracted and re-pushed by hand. Hairline ledger items, not 4pl's boxed cards. */ .lgx-plhh-faq{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-plhh-faq-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,4vw,3.5rem); max-width:72rem; margin:0 auto; } .lgx-plhh-faq-item{ padding:1.5rem 0 1.6rem; border-top:1px solid var(--lgx-line-light); } .lgx-plhh-faq-item h3{ font-family:var(--lgx-font-display); font-size:1.08rem !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--lgx-text) !important; margin:0 0 .6rem 0 !important; } .lgx-plhh .lgx-plhh-faq-item p{ font-size:.95rem; line-height:1.6; color:var(--lgx-text-muted); margin:0; } /* 5.33:1 */ .lgx-plhh .lgx-plhh-faq-item p a{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:2px; } /* 5.20:1 */ .lgx-plhh .lgx-plhh-faq-item p a:hover{ color:var(--lgx-accent-deeper); } /* ============================================================ 11 - CLOSING CTA (accent gradient) ============================================================ */ /* The house inner-page closer. Gradient runs deep->deeper because white body copy on --lgx-accent is 3.56:1 (AA fail); on accent-deep 5.20, on accent-deeper 6.47. */ .lgx-plhh-cta{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:#fff; } .lgx-plhh-cta .lgx-eyebrow{ color:#fff !important; justify-content:center; } .lgx-plhh-cta .lgx-eyebrow::before{ background:#fff; } .lgx-plhh-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:#fff !important; margin:0 0 1rem 0 !important; } .lgx-plhh .lgx-plhh-cta .sub{ font-size:1.1rem; line-height:1.6; color:#fff; max-width:58ch; margin:0 auto 2rem; } .lgx-plhh-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-plhh-cta .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } .lgx-page .lgx-plhh-cta .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-plhh .lgx-plhh-cta-phone{ margin:1.5rem 0 0; font-size:.98rem; color:#fff; } .lgx-plhh .lgx-plhh-cta-phone a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .lgx-plhh-cargo-grid{ grid-template-columns:repeat(2,1fr); } .lgx-plhh-ind-grid{ grid-template-columns:1fr; } .lgx-plhh-ind-card .lgx-photo{ height:220px; } } @media (max-width:900px){ .lgx-plhh-vs-grid{ grid-template-columns:1fr; } /* the one-team column first on a phone (copy doc: "stacked mobile, right column first"); the rule moves from the column's right edge to its top */ .lgx-plhh-vs-col:first-child{ order:2; padding:2rem 0 0; border-right:none; border-top:1px solid var(--lgx-line-light); margin-top:2rem; } .lgx-plhh-vs-col:last-child{ order:1; padding:0; } .lgx-plhh-router{ grid-template-columns:1fr; gap:.7rem; } .lgx-page .lgx-plhh-steps li{ grid-template-columns:1fr; gap:.6rem; } .lgx-plhh-yard-grid{ grid-template-columns:1fr; } .lgx-plhh-yard-photo{ order:-1; } .lgx-plhh-reach-grid{ grid-template-columns:1fr; } .lgx-plhh-faq-grid{ grid-template-columns:1fr; } .lgx-page .lgx-plhh-ledger li{ grid-template-columns:1fr; gap:.15rem; } } @media (max-width:680px){ .lgx-page .lgx-plhh-photoband{ min-height:200px; } .lgx-plhh-hero .lgx-h1{ max-width:none; } .lgx-page .lgx-plhh-start-grid{ grid-template-columns:1fr; gap:.9rem; } .lgx-plhh-cargo-grid{ grid-template-columns:1fr; } .lgx-page .lgx-plhh-facts{ grid-template-columns:1fr; } .lgx-plhh-conv-labels .v{ font-size:.78rem; } .lgx-plhh-conv-lines{ height:56px; } .lgx-plhh-lane .o, .lgx-plhh-lane .d{ font-size:.98rem; } /* The desktop scrim is left-weighted because the copy occupies the left half. On a phone the H1 spans the full width and `cover` on a portrait box shows the whole height of this 2:1 photo, which puts cloud and the white module behind the headline. Near-flat wash with a heavier top, the same fix the 4PL hero needed; audited with hero-contrast.ps1 -Nodes hero-nodes-plhh-390.json -Occurrence 2. */ .lgx-plhh-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.84) 0%, rgba(12,15,16,0.82) 50%, rgba(12,15,16,0.78) 100%), linear-gradient(0deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.48) 55%, rgba(12,15,16,0.74) 100%); } } /* ============================================================ LGX /services/ - SERVICES HUB ------------------------------------------------------------ Scoped to .lgx-svc. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-*, .lgx-photo and .lgx-reveal come from lgx-home.css, concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them (scoped to .lgx-rendered since 2026-09-17, so it cannot reach here except for the frozen `.lgx-page p` and link rules). Cascade traps this file keeps clearing (learned live on the earlier pages): 1. Kadence's inline global CSS has a bare h3{color:var(--global-palette3)} and a global heading colour: every heading here states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1) outranks a bare `.lgx-btn-*`: button colour rules stay prefixed with .lgx-page. 3. Kadence `.single-content ul,ol` and `.single-content figure` are (0,1,1): every list and figure rule here is prefixed with .lgx-page. BAND RHYTHM: 1 hero ink (text-led, priority ladder; no photo file exists) 2 project white + child hero photo right 3 4PL program plate + stat 4 forwarding white + child hero photo left 5 domestic ink + phone block + child hero photo 6 matrix paper (the three lines side by side) 7 photo strip full-bleed (band-services.jpg) 8 where next white + blueprint wash (bg-services.jpg, baked on white) 9 CTA accent gradient No two light bands touch: 6 and 8 are split by the strip. CONTRAST REFERENCE (computed 2026-09-17, Decisions Log of that date): on ink #161B1D: #fff 17.38 .82 white 11.93 .74 white 9.91 #FF9670 8.15 #FF7A55 6.76 --lgx-accent 4.41 (large only) ink + bloom peak: .74 white 8.33 #FF9670 6.55 on white: --lgx-text 16.33 muted 5.28 deeper 6.47 deep 5.20 --lgx-accent 3.94 (large only) on paper #F4F4F2: --lgx-text 14.83 muted 5.07 deeper 5.88 deep 4.72 plate #BE4423: #fff 5.20 field, 4.79 on a .05 white grid line bg-services.jpg (white bake, every pixel): --lgx-text min 5.70 / p1 12.62; muted min 3.15 (NOT used on it); accent-deeper min 2.26 (eyebrow sits on a white chip there) AA: 4.5 normal, 3.0 large (>=24px, or >=18.66px bold). ============================================================ */ .lgx-svc section{ position:relative; } .lgx-svc .lgx-h2{ color:var(--lgx-text); } /* trap 1: 16.33 white, 14.83 paper */ .lgx-svc-head{ max-width:52rem; margin:0 0 clamp(2rem,3.6vw,3rem); } .lgx-svc-head .lgx-lead{ margin-bottom:0 !important; } .lgx-svc-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-svc-head.is-centered .lgx-eyebrow{ justify-content:center; } .lgx-svc-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } /* ============================================================ 1 - HERO (ink, text-led, priority ladder) ============================================================ */ /* No hero-services.jpg exists and the copy doc wants the writing to carry this page, so the hero is the same ink + accent bloom + survey grid the other dark bands use, with the ladder as its picture. */ .lgx-svc-hero{ background:var(--lgx-ink); overflow:hidden; padding:clamp(4.5rem,7vw,6.5rem) 0 clamp(3rem,5vw,4.5rem); } .lgx-svc-hero::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(ellipse 55% 50% at 88% 16%,rgba(220,83,52,.20),transparent 64%), repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-svc-hero .lgx-container{ z-index:2; } .lgx-svc-hero .lgx-h1{ max-width:22ch; font-size:clamp(2.2rem,4.4vw,3.6rem) !important; } .lgx-svc-hero .lgx-h1 .accent{ color:var(--lgx-accent); } /* 4.41 on ink; 3.54 at the bloom peak (88% x), which the span never reaches: large text (>=35px bold), AA large is 3.0 */ .lgx-svc-hero .lgx-lead{ max-width:66ch; margin-bottom:2rem !important; color:rgba(255,255,255,.82) !important; } /* 11.93 */ /* THE PRIORITY LADDER. Three rows, one per service line, each with an accent bar whose length is the line's weight (100 / 66 / 33) and a short phrase beside it; a fourth dashed row for the managed program, which is not a motion but a standing arrangement. The copy guide's motion-order rule ("if Domestic appears above Forwarding, the layout is wrong"), drawn. */ .lgx-svc-ladder{ margin:clamp(2.4rem,4vw,3.4rem) 0 0; padding:1.4rem 0 0; border-top:1px solid rgba(255,255,255,.17); max-width:56rem; } .lgx-svc-ladder-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 1rem 0 !important; /* 7.28 */ } .lgx-page .lgx-svc-rungs{ list-style:none; margin:0; padding:0; } .lgx-page .lgx-svc-rungs li{ margin:0; padding:.75rem 0; display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:.4rem 1rem; align-items:center; border-top:1px solid rgba(255,255,255,.1); } .lgx-page .lgx-svc-rungs li:first-child{ border-top:none; } .lgx-svc-rungs .k{ font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.12em; color:#FF9670; } /* 8.15; the accent would be 4.41 at this size */ .lgx-svc-rungs .row{ display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:.4rem 1.2rem; align-items:center; } .lgx-svc-rungs .bar{ position:relative; height:10px; width:100%; } /* the column must be sized: an auto column round an empty span is 0 wide */ .lgx-svc-rungs .bar::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--w,100%); background:var(--lgx-accent); border-radius:2px; } .lgx-svc-rungs .bar.is-dashed::before{ background:none; border-top:2px dashed rgba(255,255,255,.34); top:4px; bottom:auto; height:0; } .lgx-svc-rungs .t{ display:block; font-family:var(--lgx-font-display); font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.01em; white-space:nowrap; } .lgx-svc-rungs .s{ display:block; font-size:.86rem; color:rgba(255,255,255,.72); line-height:1.4; } /* 9.43; 7.95 at the bloom peak */ /* frozen `.lgx-page li a` (0,1,2) would underline and recolour these: (0,2,1) */ .lgx-page .lgx-svc-rungs a{ color:inherit; text-decoration:none; } .lgx-page .lgx-svc-rungs a:hover .t{ text-decoration:underline; text-underline-offset:3px; } /* ============================================================ 2 - PROJECT & HEAVY-HAUL (white + photo right) 4 - FORWARDING (white + photo left) ============================================================ */ .lgx-svc-motion{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-svc-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2.2rem,5vw,4rem); align-items:center; } .lgx-svc-split.is-photo-left .lgx-svc-photo{ order:-1; } .lgx-svc-photo{ min-height:clamp(280px,36vw,440px); } .lgx-svc .lgx-svc-copy p{ font-size:1.05rem; line-height:1.68; color:var(--lgx-text); margin:0 0 1.1rem; max-width:62ch; } /* 16.33 */ /* highlights: hairline rows with the accent tick, the renderer's list shape (this hub previews renderer pages, so the two should agree) */ .lgx-page .lgx-svc-points{ list-style:none; margin:1.4rem 0 0; padding:0; max-width:62ch; } .lgx-page .lgx-svc-points li{ position:relative; margin:0; padding:.7rem 0 .7rem 1.6rem; border-top:1px solid var(--lgx-line-light); font-size:1rem; line-height:1.55; color:var(--lgx-text); } .lgx-page .lgx-svc-points li:last-child{ border-bottom:1px solid var(--lgx-line-light); } .lgx-page .lgx-svc-points li::before{ content:''; position:absolute; left:0; top:1.15rem; width:8px; height:8px; background:var(--lgx-accent); } .lgx-svc .lgx-svc-more{ margin:1.6rem 0 0; } /* Kadence .single-content p margin is (0,1,1) */ .lgx-svc .lgx-svc-more a{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--lgx-font-label); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; /* 6.47 white, 5.88 paper */ } .lgx-svc .lgx-svc-more a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-svc .lgx-svc-more a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-svc .lgx-svc-more a:hover .arw{ transform:translateX(4px); } /* ============================================================ 3 - 4PL & MANAGED LOGISTICS (plate + stat) ============================================================ */ /* Same CSS-only plate as the rendered pages: field --lgx-accent-deep (#fff 5.20), .05 white grid (worst pixel 4.79), bloom toward deeper (6.47). Every text box on it is pure #fff. */ .lgx-svc-program{ background-color:var(--lgx-accent-deep); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-svc-program::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 12% 100%,rgba(166,58,29,.85),transparent 62%), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px); } .lgx-svc-program .lgx-container{ z-index:2; } .lgx-svc-program .lgx-eyebrow{ color:#fff !important; } .lgx-svc-program .lgx-eyebrow::before{ background:#fff; } .lgx-svc-program .lgx-h2{ color:#fff; } .lgx-svc-program .lgx-lead{ color:#fff !important; } .lgx-svc-program-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-svc-stat{ font-family:var(--lgx-font-display); font-size:clamp(3.4rem,7.5vw,5.8rem) !important; font-weight:800 !important; line-height:.92 !important; letter-spacing:-.045em !important; color:#fff !important; margin:0 0 .8rem 0 !important; } .lgx-svc-stat-label{ font-size:1rem !important; line-height:1.45 !important; font-weight:700; color:#fff !important; margin:0 !important; max-width:22ch; } .lgx-svc .lgx-svc-program-copy p{ font-size:1.05rem; line-height:1.68; color:#fff; margin:0 0 1.1rem; max-width:60ch; } .lgx-page .lgx-svc-program .lgx-svc-points li{ border-color:rgba(255,255,255,.34); color:#fff; } .lgx-page .lgx-svc-program .lgx-svc-points li::before{ background:#fff; } .lgx-svc .lgx-svc-program .lgx-svc-more a{ color:#fff; } /* ============================================================ 5 - DOMESTIC FREIGHT (ink + the phone + child hero photo) ============================================================ */ .lgx-svc-domestic{ background:var(--lgx-ink); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-svc-domestic::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 16% 100%,rgba(220,83,52,.14),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-svc-domestic .lgx-container{ z-index:2; } .lgx-svc-domestic .lgx-h2{ color:#fff; } .lgx-svc-domestic .lgx-lead{ color:rgba(255,255,255,.82) !important; } /* 11.93 */ .lgx-svc .lgx-svc-domestic .lgx-svc-copy p{ color:rgba(255,255,255,.82); } /* The fast path, drawn as what it is: a phone number you can read from across the room, and one button. Not the project intake. */ .lgx-svc-fast{ margin:1.8rem 0 0; padding:1.4rem 0 0; border-top:1px solid rgba(255,255,255,.17); } .lgx-svc-fast-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 .6rem 0 !important; /* 7.28 */ } .lgx-svc .lgx-svc-phone{ display:inline-block; font-family:var(--lgx-font-display); font-size:clamp(2rem,4.2vw,3.2rem); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; text-decoration:none; margin:0 0 1.1rem; } .lgx-svc .lgx-svc-phone:hover{ color:#FF9670; } /* 8.15 */ .lgx-svc-fast .lgx-cta-row{ margin:0; } .lgx-svc-domestic .lgx-svc-more a{ color:#FF9670; } /* 8.15 on ink; the accent would be 4.41 at this size */ .lgx-svc-domestic .lgx-svc-more a:hover{ color:#fff; } /* ============================================================ 6 - THE MATRIX (paper) ============================================================ */ /* The three lines side by side: row labels down the left, one column per line, hairline rows. A hub device: nothing on the child pages compares them, and home's motion cards describe each in isolation. */ .lgx-svc-matrix{ background:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-svc-matrix-wrap{ overflow-x:auto; } .lgx-svc-matrix table{ border-collapse:collapse; width:100%; min-width:46rem; font-size:.96rem; margin:0; } .lgx-svc-matrix th, .lgx-svc-matrix td{ text-align:left; vertical-align:top; padding:1rem 1.4rem 1rem 0; border-bottom:1px solid var(--lgx-line-light); } .lgx-svc-matrix thead th{ font-family:var(--lgx-font-display); font-size:1.08rem; font-weight:700; letter-spacing:-.01em; color:var(--lgx-text); /* 14.83 */ border-bottom:2px solid var(--lgx-line-light); padding-top:0; } .lgx-svc-matrix thead th small{ display:block; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .35rem; } /* 5.88 */ .lgx-svc-matrix tbody th{ font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lgx-text-muted); padding-top:1.15rem; width:9rem; /* 5.07 */ } .lgx-svc-matrix td{ color:var(--lgx-text); line-height:1.55; } .lgx-page .lgx-svc-matrix td a{ font-family:var(--lgx-font-label); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; } /* 5.88 */ .lgx-page .lgx-svc-matrix td a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-svc .lgx-svc-matrix-note{ font-size:.96rem; line-height:1.6; color:var(--lgx-text); margin:1.6rem 0 0; max-width:64ch; } .lgx-svc .lgx-svc-matrix-note a{ color:var(--lgx-accent-deeper); font-weight:700; } /* 5.88 */ /* ============================================================ 7 - PHOTO STRIP ============================================================ */ /* .lgx-page prefix is load-bearing (trap 3) */ .lgx-page .lgx-svc-strip{ display:block; margin:0; width:100%; max-width:none; height:clamp(220px,28vw,400px); background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 8 - WHERE TO GO NEXT (white + wash) ============================================================ */ /* bg-services.jpg was baked on white for exactly this surface. Running copy on it is --lgx-text (min 5.70 over every pixel); the cards are opaque paper; the eyebrow sits on a white chip because accent-deeper dips to 2.26 on the drawing's darkest lines. */ .lgx-svc-next{ background-color:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-svc-next .lgx-eyebrow{ background:var(--lgx-white); padding:.32em .6em; margin:0 0 1.4rem -.6em !important; border-radius:2px; } .lgx-svc-next-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.1rem,2.2vw,1.6rem); } .lgx-svc-card{ background:var(--lgx-light); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.5rem,2.6vw,1.9rem); display:flex; flex-direction:column; color:inherit; text-decoration:none; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease; } .lgx-svc-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.08); border-color:rgba(220,83,52,.34); } .lgx-svc-card h3{ font-family:var(--lgx-font-display); font-size:1.14rem !important; font-weight:700 !important; letter-spacing:-.015em !important; color:var(--lgx-text) !important; margin:0 0 .55rem 0 !important; } .lgx-svc .lgx-svc-card p{ font-size:.95rem; line-height:1.58; color:var(--lgx-text-muted); margin:0 0 1rem; } /* 5.07 on the paper card */ .lgx-svc-card-link{ margin-top:auto; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); } /* 5.88 */ .lgx-svc-card-link .arw{ display:inline-block; transition:transform .25s ease; } .lgx-svc-card:hover .lgx-svc-card-link .arw{ transform:translateX(4px); } /* ============================================================ 9 - CLOSING CTA (accent gradient) ============================================================ */ .lgx-svc-cta{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:#fff; } .lgx-svc-cta .lgx-eyebrow{ color:#fff !important; justify-content:center; } .lgx-svc-cta .lgx-eyebrow::before{ background:#fff; } .lgx-svc-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:#fff !important; margin:0 auto 1rem !important; max-width:24ch; } .lgx-svc .lgx-svc-cta .sub{ font-size:1.1rem; line-height:1.6; color:#fff; max-width:58ch; margin:0 auto 2rem; } /* 5.20 at the deep end */ .lgx-svc-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-svc-cta .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-svc-cta .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-svc .lgx-svc-cta-phone{ margin:1.5rem 0 0; font-size:.98rem; color:#fff; } .lgx-svc .lgx-svc-cta-phone a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .lgx-svc-next-grid{ grid-template-columns:1fr; } } @media (max-width:900px){ .lgx-svc-split, .lgx-svc-program-grid{ grid-template-columns:1fr; } .lgx-svc-photo{ min-height:260px; order:-1; } .lgx-svc-split.is-photo-left .lgx-svc-photo{ order:-1; } .lgx-svc-stat-label{ max-width:none; } } @media (max-width:680px){ .lgx-svc-hero .lgx-h1{ max-width:none; } .lgx-svc-rungs .row{ grid-template-columns:1fr; gap:.3rem; } .lgx-svc-rungs .t{ white-space:normal; } .lgx-svc-matrix table{ min-width:40rem; } } /* ============================================================ LGX /industries/data-center-power-infrastructure/ - PRIORITY VERTICAL ------------------------------------------------------------ Scoped to .lgx-dc. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-*, .lgx-photo and .lgx-reveal come from lgx-home.css, concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them, scoped to .lgx-rendered, and cannot reach here except for the frozen `.lgx-page p` and `.lgx-page p a / li a / td a` rules. Cascade traps this file keeps clearing: 1. Kadence's bare h3{color:var(--global-palette3)} and global heading colour: every heading here states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1) outranks a bare class: link and button colour rules stay at (0,2,1) or better. 3. Kadence `.single-content ul,ol,figure,p` (0,1,1): every list, figure and paragraph-margin rule here is prefixed with .lgx-page or .lgx-dc. 4. Frozen `.lgx-page li a` underlines links inside list items: the legs and the manifest are div grids, not lists, on purpose. BAND RHYTHM (declared in the copy doc, unchanged from the render): 1 hero ink + photo (hero-data-center-power-infrastructure.jpg) + manifest strip 2 manifest white + blueprint wash (bg-data-center-power-infrastructure.jpg) 3 why ink: problem / handling + the buffer window 4 legs paper, six owned legs -- strip band-data-center-power-infrastructure.jpg 5 reach plate 6 faq white, native accordion 7 cta accent gradient No two light bands touch (paper -> strip -> plate). CONTRAST REFERENCE (Decisions Log 2026-09-17): on ink #161B1D: #fff 17.38 .82 white 11.93 .72 white 9.43 .62 white 7.28 #FF9670 8.15 accent 4.41 (large only) on white: --lgx-text 16.33 muted 5.28 deeper 6.47 deep 5.20 on paper #F4F4F2: --lgx-text 14.83 muted 5.07 deeper 5.88 plate #BE4423: #fff 5.20 field / 4.79 on the .05 grid line accent gradient: #fff 5.20 (deep) to 6.47 (deeper) bg-data-center-power-infrastructure.jpg, white bake, every pixel: --lgx-text min 8.98 (p1 11.46); muted min 4.02 and accent-deeper min 3.56 -> NOT used as running text on the wash (eyebrow on a white chip, cards opaque white) hero photo: scrim stops are the audited renderer stops (0 of 5 boxes below AA at 1440 and 390 in Phase 1); re-audited for this hero's boxes with hero-contrast-fast.ps1 -Css lgx-data-center-power-infrastructure.css -Selector .lgx-dc-hero-scrim (-Occurrence 2 for 390). AA: 4.5 normal, 3.0 large (>=24px, or >=18.66px bold). ============================================================ */ .lgx-dc section{ position:relative; } .lgx-dc .lgx-h2{ color:var(--lgx-text); } /* trap 1: 16.33 white, 14.83 paper */ .lgx-dc-head{ max-width:52rem; margin:0 0 clamp(2rem,3.6vw,3rem); } .lgx-dc-head .lgx-lead{ margin-bottom:0 !important; } .lgx-dc-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-dc-head.is-centered .lgx-eyebrow{ justify-content:center; } .lgx-dc-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } /* ============================================================ 1 - HERO (ink + photo right + manifest strip) ============================================================ */ .lgx-dc-hero{ background:var(--lgx-ink); color:#fff; overflow:hidden; min-height:560px; display:flex; align-items:center; padding:clamp(4.5rem,7vw,6.5rem) 0 clamp(2.6rem,4vw,3.4rem); } .lgx-dc-hero-media{ position:absolute; inset:0; z-index:0; } .lgx-dc-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center); } /* Same stops as the audited renderer scrim (lgx-inner.css 1.2): heavy left where the copy sits, easing to .52 at the right edge; vertical layer darkens the bottom for the manifest strip. Parsed by hero-contrast-fast.ps1, so the values stay literal. */ .lgx-dc-hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) 44%, rgba(12,15,16,0.70) 70%, rgba(12,15,16,0.52) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.22) 52%, rgba(12,15,16,0.36) 100%); } .lgx-dc-hero-grid{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.55; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px); } .lgx-dc-hero-inner{ z-index:3; width:100%; } .lgx-dc-hero .lgx-h1{ max-width:22ch; font-size:clamp(2.2rem,4.4vw,3.6rem) !important; color:#fff; } .lgx-dc-hero .lgx-lead{ max-width:60ch; margin-bottom:2rem !important; color:rgba(255,255,255,.82) !important; } /* 11.93 on ink; audited on the photo */ /* the manifest strip: six chips, the cargo classes, read left to right */ .lgx-dc-manifest-strip{ margin:clamp(2.4rem,4vw,3.4rem) 0 0; padding:1.2rem 0 0; border-top:1px solid rgba(255,255,255,.17); } .lgx-dc-manifest-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 .8rem 0 !important; /* 7.28 */ } .lgx-page .lgx-dc-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .55rem; } .lgx-page .lgx-dc-chips li{ margin:0; padding:.5rem .8rem; border:1px solid rgba(255,255,255,.22); border-radius:2px; background:rgba(12,15,16,.55); font-family:var(--lgx-font-label); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; line-height:1.2; } .lgx-page .lgx-dc-chips li .c{ color:#FF9670; margin-right:.5em; } /* 8.15 on ink */ /* ============================================================ 2 - THE MANIFEST (white + wash, six opaque cards) ============================================================ */ .lgx-dc-manifest{ background-color:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-dc-manifest .lgx-eyebrow{ background:var(--lgx-white); padding:.32em .6em; margin:0 0 1.4rem -.6em !important; border-radius:2px; } /* deeper dips to 3.56 on the drawing: chip */ .lgx-dc-manifest .lgx-h2{ color:var(--lgx-text); } /* 8.98 min on the wash */ .lgx-dc-manifest-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem); } .lgx-dc-item{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.4rem,2.4vw,1.8rem); position:relative; } .lgx-dc-item::before{ content:''; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--lgx-accent); border-radius:var(--lgx-radius) var(--lgx-radius) 0 0; } .lgx-dc-item .code{ display:block; font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .7rem; /* 6.47 on the white card */ } .lgx-dc-item h3{ font-family:var(--lgx-font-display); font-size:1.18rem !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.2 !important; color:var(--lgx-text) !important; margin:0 0 .55rem 0 !important; } .lgx-dc .lgx-dc-item p{ font-size:.97rem; line-height:1.6; color:var(--lgx-text); margin:0; } /* 16.33 */ /* ============================================================ 3 - WHY IT IS NOT JUST FREIGHT (ink: two columns + the buffer window) ============================================================ */ .lgx-dc-why{ background:var(--lgx-ink); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-dc-why::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 60% at 100% 0%,rgba(220,83,52,.14),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-dc-why .lgx-container{ z-index:2; } .lgx-dc-why .lgx-h2{ color:#fff; } .lgx-dc-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); } .lgx-dc-col h3{ font-family:var(--lgx-font-label); font-size:.74rem !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase; color:#FF9670 !important; margin:0 0 .9rem 0 !important; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.17); } /* 8.15 */ .lgx-dc .lgx-dc-col p{ font-size:1.05rem; line-height:1.68; color:rgba(255,255,255,.82); margin:0; max-width:56ch; } /* 11.93 */ /* THE BUFFER WINDOW. A track from ship date to set. The yard is drawn as the window in the middle: arrive earlier and it is a storage problem, later and it is a schedule problem. Five stations on a 5-column grid; the accent bar spans the yard-to-crane stations. */ .lgx-dc-window{ margin:clamp(2.6rem,4.5vw,3.8rem) 0 0; } .lgx-dc-window-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 1.6rem 0 !important; /* 7.28 */ } .lgx-dc-track{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; padding-top:1.6rem; } .lgx-dc-track::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.22); } .lgx-dc-track .win{ position:absolute; top:-5px; height:11px; left:20%; width:60%; background:rgba(220,83,52,.32); border-left:2px solid var(--lgx-accent); border-right:2px solid var(--lgx-accent); } .lgx-dc-station{ position:relative; } .lgx-dc-station::before{ content:''; position:absolute; left:0; top:-2.15rem; width:9px; height:9px; border-radius:50%; background:#fff; } .lgx-dc-station.is-yard::before{ background:var(--lgx-accent); box-shadow:0 0 0 4px rgba(220,83,52,.28); } .lgx-dc-station .k{ display:block; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#FF9670; margin:0 0 .3rem; } /* 8.15 */ .lgx-dc-station .t{ display:block; font-family:var(--lgx-font-display); font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.2; margin:0 0 .35rem; } .lgx-dc-station .s{ display:block; font-size:.86rem; line-height:1.45; color:rgba(255,255,255,.72); } /* 9.43 */ .lgx-dc-window-notes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; margin:1.8rem 0 0; } .lgx-dc .lgx-dc-window-notes p{ position:relative; padding-left:1.2rem; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.82); margin:0; } .lgx-dc .lgx-dc-window-notes p::before{ content:''; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--lgx-accent); } .lgx-dc .lgx-dc-window-notes p strong{ color:#fff; } /* ============================================================ 4 - THE SIX LEGS (paper) ============================================================ */ .lgx-dc-legs{ background:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-dc-legs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem); } .lgx-dc-leg{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.4rem,2.4vw,1.8rem); display:flex; flex-direction:column; } .lgx-dc-leg .n{ display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--lgx-accent-deeper); font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--lgx-accent-deeper); margin:0 0 1rem; /* 6.47 on the white tile */ } .lgx-dc-leg h3{ font-family:var(--lgx-font-display); font-size:1.14rem !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.2 !important; color:var(--lgx-text) !important; margin:0 0 .5rem 0 !important; } .lgx-dc .lgx-dc-leg p{ font-size:.96rem; line-height:1.6; color:var(--lgx-text); margin:0 0 1rem; } /* 16.33 */ .lgx-dc .lgx-dc-leg a{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; /* 6.47 */ } .lgx-dc .lgx-dc-leg a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-dc .lgx-dc-leg a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-dc .lgx-dc-leg a:hover .arw{ transform:translateX(4px); } .lgx-dc .lgx-dc-leg .end{ margin-top:auto; font-family:var(--lgx-font-label); font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-text-muted); } /* 5.28 */ /* ============================================================ PHOTO STRIP (.lgx-page prefix is load-bearing, trap 3) ============================================================ */ /* 2026-09-21 picture pass: the window follows the bake (2000x800), so `cover` has nothing to crop. clamp(220px,28vw,400px) capped the strip at a fixed height, which at 2560 wide showed barely 40% of the file's height. 88vh only bites on a short landscape window; <=680px takes a 200px floor and trims the sides instead. */ .lgx-page .lgx-dc-strip{ display:block; margin:0; width:100%; max-width:none; aspect-ratio:2000 / 800; max-height:88vh; background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 5 - REACH (plate) 2026-09-22: left-aligned like every other section head on the site. It was built centred, but the shared `.lgx-h2` margin shorthand is !important and beat this sheet's margin auto, so the heading sat left under a centred eyebrow and paragraph. ============================================================ */ .lgx-dc-reach{ background-color:var(--lgx-accent-deep); color:#fff; padding:clamp(4.2rem,7vw,6rem) 0; overflow:hidden; } .lgx-dc-reach::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 50% 120%,rgba(166,58,29,.85),transparent 62%), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px); } .lgx-dc-reach .lgx-container{ z-index:2; } .lgx-dc-reach .lgx-eyebrow{ color:#fff !important; } .lgx-dc-reach .lgx-eyebrow::before{ background:#fff; } .lgx-dc-reach .lgx-h2{ color:#fff; max-width:22ch; } .lgx-dc .lgx-dc-reach-body{ font-size:1.1rem; line-height:1.65; color:#fff; max-width:52rem; margin:0; } /* 5.20 field, 4.79 grid */ .lgx-page .lgx-dc-facts{ list-style:none; margin:2.2rem 0 0; padding:1.4rem 0 0; border-top:1px solid rgba(255,255,255,.34); max-width:52rem; display:flex; flex-wrap:wrap; gap:.8rem 2.6rem; } .lgx-page .lgx-dc-facts li{ margin:0; padding:0; font-family:var(--lgx-font-label); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; } /* ============================================================ 6 - FAQ (white, native accordion) ============================================================ */ .lgx-dc-faq{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-dc-faq-list{ max-width:54rem; border-top:1px solid var(--lgx-line-light); } .lgx-dc-faq-list details{ border-bottom:1px solid var(--lgx-line-light); } .lgx-dc-faq-list summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) 1.6rem; gap:1rem; align-items:center; padding:1.15rem 0; font-family:var(--lgx-font-display); font-size:1.12rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; color:var(--lgx-text); /* 16.33 */ } .lgx-dc-faq-list summary::-webkit-details-marker{ display:none; } .lgx-dc-faq-list summary::after{ content:'+'; font-family:var(--lgx-font-label); font-size:1.3rem; font-weight:700; line-height:1; color:var(--lgx-accent-deeper); text-align:center; transition:transform .25s ease; } /* 6.47 */ .lgx-dc-faq-list details[open] summary::after{ content:'\2212'; } .lgx-dc-faq-list summary:hover{ color:var(--lgx-accent-deeper); } .lgx-dc .lgx-dc-faq-list details p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text); margin:0 2.6rem 1.3rem 0; max-width:62ch; } /* ============================================================ 7 - CLOSING CTA (accent gradient) ============================================================ */ .lgx-dc-cta{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:#fff; } .lgx-dc-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:#fff !important; margin:0 auto 1rem !important; max-width:22ch; } .lgx-dc .lgx-dc-cta .sub{ font-size:1.1rem; line-height:1.6; color:#fff; max-width:58ch; margin:0 auto 2rem; } /* 5.20 at the deep end */ .lgx-dc-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-dc-cta .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-dc-cta .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-dc .lgx-dc-cta-phone{ margin:1.5rem 0 0; font-size:.98rem; color:#fff; } .lgx-dc .lgx-dc-cta-phone a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .lgx-dc-manifest-grid, .lgx-dc-legs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px){ .lgx-dc-cols{ grid-template-columns:1fr; } .lgx-dc-track{ grid-template-columns:1fr; gap:1.2rem; padding-top:0; padding-left:1.6rem; } .lgx-dc-track::before{ left:4px; right:auto; top:0; bottom:0; width:1px; height:auto; } .lgx-dc-track .win{ left:-1px; width:11px; top:20%; height:60%; border:none; border-top:2px solid var(--lgx-accent); border-bottom:2px solid var(--lgx-accent); } .lgx-dc-station::before{ left:-1.6rem; top:.35rem; } .lgx-dc-window-notes{ grid-template-columns:1fr; } } @media (max-width:680px){ .lgx-page .lgx-dc-strip{ min-height:200px; } .lgx-dc-hero{ min-height:0; } .lgx-dc-hero .lgx-h1{ max-width:none; } /* near-flat wash with a heavier top: the audited renderer phone scrim */ .lgx-dc-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.86) 0%, rgba(12,15,16,0.84) 50%, rgba(12,15,16,0.80) 100%), linear-gradient(0deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.50) 55%, rgba(12,15,16,0.74) 100%); } .lgx-dc-manifest-grid, .lgx-dc-legs-grid{ grid-template-columns:1fr; } .lgx-dc-faq-list summary{ font-size:1.04rem; } } /* ============================================================ LGX /services/international-freight-forwarding/ ------------------------------------------------------------ Scoped to .lgx-iff. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-*, .lgx-photo and .lgx-reveal come from lgx-home.css, concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them, scoped to .lgx-rendered, and cannot reach here except for the frozen `.lgx-page p` and `.lgx-page p a / li a / td a` rules. Cascade traps this file keeps clearing: 1. Kadence's bare h3{color:var(--global-palette3)} and global heading colour: every heading here states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1): link and button colour rules stay at (0,2,1) or better. 3. Kadence `.single-content ul,ol,figure,p` (0,1,1): every list, figure and paragraph-margin rule is prefixed with .lgx-page or .lgx-iff. 4. Frozen `.lgx-page li a` / `p a` recolour and underline links inside li/p: the lane cards and the FAQ "Reach" link set their own at (0,2,1)+. BAND RHYTHM (the copy doc's declared surfaces, unchanged from the render): 1 hero ink + photo + status line 2 consultative white: body left, decision list right 3 register ink: the scope register 4 lanes paper: two lane strips -- strip band-international-freight-forwarding.jpg 5 fcl white + wash (bg-international-freight-forwarding.jpg): stowage gauge 6 air ink, compact 7 customs paper: the handoff 8 why plate: three columns 9 faq white 10 cta accent gradient No two light bands touch (paper -> strip -> white; paper -> plate -> white). CONTRAST REFERENCE (Decisions Log 2026-09-17): on ink #161B1D: #fff 17.38 .82 white 11.93 .72 white 9.43 .62 white 7.28 #FF9670 8.15 accent 4.41 (large only) on white: --lgx-text 16.33 muted 5.28 deeper 6.47 deep 5.20 on paper #F4F4F2: --lgx-text 14.83 muted 5.07 deeper 5.88 plate #BE4423: #fff 5.20 field / 4.79 on the .05 grid line accent gradient: #fff 5.20 (deep) to 6.47 (deeper) bg-international-freight-forwarding.jpg, white bake, every pixel: --lgx-text min 6.36 (p1 12.62); muted min 3.37 and accent-deeper min 2.52 -> only --lgx-text runs on the wash; the eyebrow sits on a white chip; the gauge silhouettes sit in opaque white cells. hero photo: renderer's audited scrim stops, re-audited for this hero's boxes (hero-contrast-fast.ps1 -Css lgx-international-freight-forwarding.css -Selector .lgx-iff-hero-scrim, -Occurrence 2 for 390). AA: 4.5 normal, 3.0 large (>=24px, or >=18.66px bold). ============================================================ */ .lgx-iff section{ position:relative; } .lgx-iff .lgx-h2{ color:var(--lgx-text); } /* trap 1: 16.33 white, 14.83 paper */ .lgx-iff-head{ max-width:52rem; margin:0 0 clamp(2rem,3.6vw,3rem); } .lgx-iff-head .lgx-lead{ margin-bottom:0 !important; } .lgx-iff-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-iff-head.is-centered .lgx-eyebrow{ justify-content:center; } .lgx-iff-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } .lgx-iff-head.is-narrow{ max-width:46rem; } /* status marks: the register's language, used in the hero line and section 3. offered = filled square; secondary = half square; partner = outlined square with a bar; not offered = struck square; pending = dashed square. */ .lgx-iff-mark{ display:inline-block; width:12px; height:12px; flex:0 0 12px; position:relative; border:2px solid #FF9670; box-sizing:border-box; } /* #FF9670 8.15 on ink */ .lgx-iff-mark.is-on{ background:#FF9670; } .lgx-iff-mark.is-half{ background:linear-gradient(90deg,#FF9670 50%,transparent 50%); } .lgx-iff-mark.is-partner::after{ content:''; position:absolute; left:1px; right:1px; top:3px; height:2px; background:#FF9670; } .lgx-iff-mark.is-off::after{ content:''; position:absolute; left:-3px; right:-3px; top:3px; height:2px; background:#FF9670; transform:rotate(-45deg); } .lgx-iff-mark.is-pending{ border-style:dashed; } /* ============================================================ 1 - HERO (ink + photo + status line) ============================================================ */ .lgx-iff-hero{ background:var(--lgx-ink); color:#fff; overflow:hidden; min-height:520px; display:flex; align-items:center; padding:clamp(4.5rem,7vw,6.5rem) 0 clamp(2.6rem,4vw,3.4rem); } .lgx-iff-hero-media{ position:absolute; inset:0; z-index:0; } .lgx-iff-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center); } /* audited renderer stops, literal so hero-contrast-fast.ps1 can parse them */ .lgx-iff-hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) 44%, rgba(12,15,16,0.70) 70%, rgba(12,15,16,0.52) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.22) 52%, rgba(12,15,16,0.36) 100%); } .lgx-iff-hero-grid{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.55; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px); } .lgx-iff-hero-inner{ z-index:3; width:100%; } .lgx-iff-hero .lgx-h1{ max-width:22ch; font-size:clamp(2.2rem,4.4vw,3.6rem) !important; color:#fff; } .lgx-iff-hero .lgx-lead{ max-width:62ch; margin-bottom:2rem !important; color:rgba(255,255,255,.82) !important; } /* 11.93 on ink; audited on the photo */ .lgx-iff-status{ margin:clamp(2.2rem,4vw,3.2rem) 0 0; padding:1.1rem 0 0; border-top:1px solid rgba(255,255,255,.17); } .lgx-iff-status-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:rgba(255,255,255,.62) !important; margin:0 0 .8rem 0 !important; /* 7.28 */ } .lgx-page .lgx-iff-status-line{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 2rem; } .lgx-page .lgx-iff-status-line li{ margin:0; padding:0; display:inline-flex; align-items:center; gap:.55rem; font-family:var(--lgx-font-label); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; } .lgx-page .lgx-iff-status-line li .s{ color:rgba(255,255,255,.72); font-weight:700; } /* 9.43 */ /* ============================================================ 2 - CONSULTATIVE (white: body left, decision list right) ============================================================ */ .lgx-iff-consult{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-iff-cols{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-iff .lgx-iff-body p{ font-size:1.05rem; line-height:1.68; color:var(--lgx-text); margin:0 0 1.1rem; max-width:58ch; } /* 16.33 */ .lgx-iff-decisions h3{ font-family:var(--lgx-font-label); font-size:.74rem !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase; color:var(--lgx-accent-deeper) !important; margin:0 0 .6rem 0 !important; } /* 6.47 */ .lgx-page .lgx-iff-decisions ol{ list-style:none; margin:0; padding:0; counter-reset:dec; } .lgx-page .lgx-iff-decisions li{ counter-increment:dec; position:relative; margin:0; padding:.7rem 0 .7rem 2.6rem; border-top:1px solid var(--lgx-line-light); font-size:.98rem; line-height:1.5; color:var(--lgx-text); } .lgx-page .lgx-iff-decisions li:last-child{ border-bottom:1px solid var(--lgx-line-light); } .lgx-page .lgx-iff-decisions li::before{ content:counter(dec,decimal-leading-zero); position:absolute; left:0; top:.85rem; font-family:var(--lgx-font-label); font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-iff-decisions li strong{ color:var(--lgx-text); } /* ============================================================ 3 - THE SCOPE REGISTER (ink) ============================================================ */ .lgx-iff-register{ background:var(--lgx-ink); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-iff-register::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 60% at 100% 100%,rgba(220,83,52,.14),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-iff-register .lgx-container{ z-index:2; } .lgx-iff-register .lgx-h2{ color:#fff; } .lgx-iff-register .lgx-lead{ color:rgba(255,255,255,.82) !important; } /* 11.93 */ .lgx-iff-reg{ border-top:1px solid rgba(255,255,255,.22); } .lgx-iff-reg-group{ display:grid; grid-template-columns:13rem minmax(0,1fr); gap:1rem 2rem; padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,.14); } .lgx-iff-reg-state{ display:flex; align-items:flex-start; gap:.6rem; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#FF9670; line-height:1.4; padding-top:.15rem; } /* 8.15 */ .lgx-iff-reg-state .lgx-iff-mark{ margin-top:.2em; } .lgx-iff-reg-state small{ display:block; font-size:.66rem; letter-spacing:.14em; color:rgba(255,255,255,.62); margin-top:.2rem; } /* 7.28 */ .lgx-iff-reg-rows{ display:grid; gap:.9rem; } .lgx-iff-reg-row{ display:grid; grid-template-columns:12rem minmax(0,1fr); gap:.3rem 1.4rem; } .lgx-iff-reg-row b{ font-family:var(--lgx-font-display); font-size:1.02rem; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.3; } .lgx-iff .lgx-iff-reg-row p{ font-size:.96rem; line-height:1.55; color:rgba(255,255,255,.82); margin:0; max-width:64ch; } /* 11.93 */ .lgx-iff-reg-group.is-off .lgx-iff-reg-row b{ color:rgba(255,255,255,.72); text-decoration:line-through; text-decoration-color:#FF9670; text-decoration-thickness:2px; } /* 9.43 */ /* ============================================================ 4 - LANES (paper: two lane strips) ============================================================ */ .lgx-iff-lanes{ background:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-iff-lane-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.1rem,2.2vw,1.6rem); } .lgx-iff-lane{ background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.5rem,2.6vw,2rem); display:flex; flex-direction:column; } .lgx-iff-lane h3{ font-family:var(--lgx-font-display); font-size:1.3rem !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.15 !important; color:var(--lgx-text) !important; margin:0 0 1.1rem 0 !important; } /* the lane strip: stops on a dashed track, the ship marker on the sea leg */ .lgx-page .lgx-iff-track{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); position:relative; } .lgx-page .lgx-iff-track::before{ content:''; position:absolute; left:6px; right:6px; top:5px; border-top:2px dashed var(--lgx-line-light); } .lgx-page .lgx-iff-track li{ margin:0; padding:1.2rem 0 0; position:relative; } .lgx-page .lgx-iff-track li::before{ content:''; position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; background:var(--lgx-white); border:2px solid var(--lgx-accent-deeper); box-sizing:border-box; } .lgx-page .lgx-iff-track li.is-origin::before{ background:var(--lgx-accent-deeper); } .lgx-page .lgx-iff-track li.is-sea::after{ content:''; position:absolute; left:-1.1rem; top:-2px; width:0; height:0; border-left:10px solid var(--lgx-accent); border-top:8px solid transparent; border-bottom:8px solid transparent; } .lgx-page .lgx-iff-track .k{ display:block; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .2rem; } /* 6.47 on the white card */ .lgx-page .lgx-iff-track .v{ display:block; font-size:.86rem; line-height:1.4; font-weight:700; color:var(--lgx-text); padding-right:.6rem; } .lgx-iff .lgx-iff-lane p{ font-size:.98rem; line-height:1.6; color:var(--lgx-text); margin:0 0 1.2rem; } /* 16.33 */ .lgx-iff .lgx-iff-lane a{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-family:var(--lgx-font-label); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); text-decoration:none; } /* 6.47 */ .lgx-iff .lgx-iff-lane a .arw{ display:inline-block; transition:transform .25s ease; } .lgx-iff .lgx-iff-lane a:hover{ color:var(--lgx-accent-deep); text-decoration:underline; text-underline-offset:3px; } .lgx-iff .lgx-iff-lane a:hover .arw{ transform:translateX(4px); } .lgx-iff .lgx-iff-lane-note{ font-size:.96rem; line-height:1.6; color:var(--lgx-text); margin:1.6rem 0 0; max-width:68ch; } /* 14.83 */ .lgx-iff .lgx-iff-lane-note a{ color:var(--lgx-accent-deeper); font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* 5.88 */ /* ============================================================ PHOTO STRIP (.lgx-page prefix is load-bearing, trap 3) ============================================================ */ .lgx-page .lgx-iff-strip{ display:block; margin:0; width:100%; max-width:none; height:clamp(220px,28vw,400px); background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 5 - OCEAN FCL: THE STOWAGE GAUGE (white + wash) ============================================================ */ .lgx-iff-fcl{ background-color:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-iff-fcl .lgx-eyebrow{ background:var(--lgx-white); padding:.32em .6em; margin:0 0 1.4rem -.6em !important; border-radius:2px; } /* deeper is 2.52 on the drawing: chip */ .lgx-iff .lgx-iff-fcl .lgx-iff-body p{ color:var(--lgx-text); } /* 6.36 min on the wash */ .lgx-iff-gauge{ max-width:54rem; margin:2.2rem 0 0; border-top:1px solid var(--lgx-line-light); } .lgx-iff-gauge-row{ display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1.2rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--lgx-line-light); } .lgx-iff-box{ height:3.4rem; background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:2px; display:flex; align-items:flex-end; justify-content:center; padding:0 .5rem .45rem; } /* silhouettes: a box is a stroked rectangle; variants change its shape */ .lgx-iff-sil{ position:relative; display:block; border:2px solid var(--lgx-text); box-sizing:border-box; } .lgx-iff-sil.is-20{ width:2rem; height:1.25rem; } .lgx-iff-sil.is-40{ width:4rem; height:1.25rem; } .lgx-iff-sil.is-hc{ width:4rem; height:1.55rem; } .lgx-iff-sil.is-fr{ width:4rem; height:1.25rem; border-top:none; border-left:none; border-right:none; } .lgx-iff-sil.is-fr::before, .lgx-iff-sil.is-fr::after{ content:''; position:absolute; bottom:0; width:2px; height:100%; background:var(--lgx-text); } .lgx-iff-sil.is-fr::before{ left:0; } .lgx-iff-sil.is-fr::after{ right:0; } .lgx-iff-sil.is-ot{ width:4rem; height:1.25rem; border-top:2px dashed var(--lgx-accent-deeper); } .lgx-iff-sil.is-soc{ width:4rem; height:1.25rem; border-style:dashed; } .lgx-iff-sil.is-bb{ width:5rem; height:1.25rem; border:none; border-bottom:2px solid var(--lgx-text); } .lgx-iff-sil.is-bb::before{ content:''; position:absolute; left:1rem; bottom:2px; width:1.2rem; height:.7rem; border:2px solid var(--lgx-text); box-sizing:border-box; } .lgx-iff-sil.is-bb::after{ content:''; position:absolute; left:2.6rem; bottom:2px; width:.8rem; height:.5rem; border:2px solid var(--lgx-text); box-sizing:border-box; } .lgx-iff-sil.is-ch{ width:5.4rem; height:1.5rem; border:none; } .lgx-iff-sil.is-ch::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:.7rem; background:var(--lgx-text); clip-path:polygon(0 0,100% 0,88% 100%,8% 100%); } .lgx-iff-sil.is-ch::after{ content:''; position:absolute; left:3.2rem; bottom:.7rem; width:1.1rem; height:.6rem; background:var(--lgx-text); } .lgx-iff-gauge-row b{ display:block; font-family:var(--lgx-font-display); font-size:1.04rem; font-weight:700; letter-spacing:-.01em; color:var(--lgx-text); margin:0 0 .2rem; } /* 6.36 min on the wash */ .lgx-iff .lgx-iff-gauge-row p{ font-size:.95rem; line-height:1.5; color:var(--lgx-text); margin:0; max-width:64ch; } .lgx-iff .lgx-iff-fcl-note{ font-size:.98rem; line-height:1.6; color:var(--lgx-text); margin:1.6rem 0 0; max-width:64ch; padding-left:1rem; border-left:3px solid var(--lgx-accent); } /* ============================================================ 6 - AIR (ink, compact) ============================================================ */ .lgx-iff-air{ background:var(--lgx-ink); color:#fff; padding:clamp(3.4rem,5.5vw,5rem) 0; overflow:hidden; } .lgx-iff-air::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-iff-air .lgx-container{ z-index:2; } .lgx-iff-air .lgx-h2{ color:#fff; } .lgx-iff .lgx-iff-air .lgx-iff-body p{ color:rgba(255,255,255,.82); } /* 11.93 */ .lgx-iff-air .lgx-iff-mark{ vertical-align:middle; margin-right:.5rem; } /* ============================================================ 7 - CUSTOMS: THE HANDOFF (paper) ============================================================ */ .lgx-iff-customs{ background:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-page .lgx-iff-handoff{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; max-width:52rem; } .lgx-page .lgx-iff-handoff li{ margin:0; padding:1.2rem 1.3rem; background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); position:relative; } .lgx-page .lgx-iff-handoff li .k{ display:block; font-family:var(--lgx-font-label); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .5rem; } /* 6.47 on the white cell */ .lgx-page .lgx-iff-handoff li b{ display:block; font-family:var(--lgx-font-display); font-size:1.02rem; font-weight:700; color:var(--lgx-text); letter-spacing:-.01em; line-height:1.3; margin:0 0 .3rem; } .lgx-page .lgx-iff-handoff li span.d{ display:block; font-size:.9rem; line-height:1.5; color:var(--lgx-text); } .lgx-page .lgx-iff-handoff li.is-partner{ border-color:var(--lgx-accent-deeper); } .lgx-page .lgx-iff-handoff li.is-partner .k{ color:#fff; background:var(--lgx-accent-deeper); display:inline-block; padding:.25em .5em; border-radius:2px; } /* 6.47 */ /* ============================================================ 8 - WHY (plate, three columns) ============================================================ */ .lgx-iff-why{ background-color:var(--lgx-accent-deep); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-iff-why::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 0% 100%,rgba(166,58,29,.85),transparent 62%), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px); } .lgx-iff-why .lgx-container{ z-index:2; } .lgx-iff-why .lgx-eyebrow{ color:#fff !important; } .lgx-iff-why .lgx-eyebrow::before{ background:#fff; } .lgx-iff-why .lgx-h2{ color:#fff; } .lgx-iff-why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.6rem); } .lgx-iff-why-col{ border-top:1px solid rgba(255,255,255,.4); padding-top:1.1rem; } .lgx-iff-why-col h3{ font-family:var(--lgx-font-display); font-size:1.16rem !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.25 !important; color:#fff !important; margin:0 0 .7rem 0 !important; } .lgx-iff .lgx-iff-why-col p{ font-size:.98rem; line-height:1.6; color:#fff; margin:0; } /* 5.20 field, 4.79 grid */ /* ============================================================ 9 - FAQ (white) ============================================================ */ .lgx-iff-faq{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-iff-faq-list{ max-width:54rem; } .lgx-iff-faq-item{ padding:1.4rem 0; border-top:1px solid var(--lgx-line-light); } .lgx-iff-faq-item:last-child{ border-bottom:1px solid var(--lgx-line-light); } .lgx-iff-faq-item h3{ font-family:var(--lgx-font-display); font-size:1.14rem !important; font-weight:700 !important; letter-spacing:-.01em !important; line-height:1.3 !important; color:var(--lgx-text) !important; margin:0 0 .7rem 0 !important; } .lgx-iff .lgx-iff-faq-item p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text); margin:0; max-width:64ch; padding-left:1rem; border-left:2px solid var(--lgx-accent); } /* 16.33 */ .lgx-iff .lgx-iff-faq-item p a{ color:var(--lgx-accent-deeper); font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* 6.47 */ /* ============================================================ 10 - CLOSING CTA (accent gradient) ============================================================ */ .lgx-iff-cta{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:#fff; } .lgx-iff-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:#fff !important; margin:0 auto 1rem !important; max-width:22ch; } .lgx-iff .lgx-iff-cta .sub{ font-size:1.1rem; line-height:1.6; color:#fff; max-width:56ch; margin:0 auto 2rem; } /* 5.20 at the deep end */ .lgx-iff-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-iff-cta .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-iff-cta .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-iff .lgx-iff-cta-phone{ margin:1.5rem 0 0; font-size:.98rem; color:#fff; } .lgx-iff .lgx-iff-cta-phone a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .lgx-iff-why-grid{ grid-template-columns:1fr; } } @media (max-width:900px){ .lgx-iff-cols, .lgx-iff-lane-grid{ grid-template-columns:1fr; } .lgx-iff-reg-group{ grid-template-columns:1fr; gap:.8rem; } .lgx-iff-reg-row{ grid-template-columns:1fr; gap:.2rem; } .lgx-page .lgx-iff-handoff{ grid-template-columns:1fr; } } @media (max-width:680px){ .lgx-iff-hero{ min-height:0; } .lgx-iff-hero .lgx-h1{ max-width:none; } /* near-flat wash with a heavier top: the audited renderer phone scrim */ .lgx-iff-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.86) 0%, rgba(12,15,16,0.84) 50%, rgba(12,15,16,0.80) 100%), linear-gradient(0deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.50) 55%, rgba(12,15,16,0.74) 100%); } .lgx-page .lgx-iff-status-line{ gap:.6rem 1.2rem; } .lgx-page .lgx-iff-track{ grid-auto-flow:row; grid-auto-columns:auto; padding-left:1.4rem; } .lgx-page .lgx-iff-track::before{ left:5px; right:auto; top:6px; bottom:6px; border-top:none; border-left:2px dashed var(--lgx-line-light); } .lgx-page .lgx-iff-track li{ padding:.3rem 0 .8rem; } .lgx-page .lgx-iff-track li::before{ left:-1.4rem; top:.45rem; } .lgx-page .lgx-iff-track li.is-sea::after{ left:-1.75rem; top:-.6rem; transform:rotate(90deg); } .lgx-iff-gauge-row{ grid-template-columns:6rem minmax(0,1fr); gap:.8rem; } } /* ============================================================ LGX /services/domestic-freight-brokerage/ - DOMESTIC FREIGHT (fast path) ------------------------------------------------------------ Scoped to .lgx-dom. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-* and .lgx-reveal come from lgx-home.css, concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them, scoped to .lgx-rendered, and cannot reach here except for the frozen `.lgx-page p` and `.lgx-page p a / li a / td a` rules. Cascade traps this file keeps clearing: 1. Kadence's bare h3{color:var(--global-palette3)} and global heading colour: every heading here states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1): link and button colour rules stay at (0,2,1) or better. 3. Kadence `.single-content ul,ol,figure,p` (0,1,1): every list, figure and paragraph-margin rule is prefixed with .lgx-page or .lgx-dom. 4. Frozen `.lgx-page p a` recolours and underlines links inside p: the regulatory note's mailto and the closer's phone set their own. BAND RHYTHM (the copy doc's declared surfaces, unchanged from the render): 1 hero ink + photo (hero-domestic-freight-brokerage.jpg) + load ticket 2 equip paper + wash (bg-domestic-freight-brokerage.jpg, paper bake): picker 3 how ink: one-off / lane with cadence strips -- strip band-domestic-freight-brokerage.jpg 4 fork plate: when it is really a project 5 reg white: licence plates 6 cta accent gradient No two light bands touch (paper -> ink; white -> accent). CONTRAST REFERENCE (Decisions Log 2026-09-17): on ink #161B1D: #fff 17.38 .82 white 11.93 .72 white 9.43 .62 white 7.28 #FF9670 8.15 accent 4.41 (large only) on white: --lgx-text 16.33 muted 5.28 deeper 6.47 deep 5.20 on paper #F4F4F2: --lgx-text 14.83 muted 5.07 deeper 5.88 plate #BE4423: #fff 5.20 field / 4.79 on the .05 grid line accent gradient: #fff 5.20 (deep) to 6.47 (deeper) bg-domestic-freight-brokerage.jpg, paper bake, every pixel: --lgx-text min 6.79 (p1 11.58); muted min 3.48 and accent-deeper min 2.69 -> only --lgx-text runs on the wash; eyebrow on a paper chip; picker rows are opaque white cells. hero photo: renderer's audited scrim stops, re-audited for this hero's boxes incl. the ticket (hero-contrast-fast.ps1 -Css lgx-domestic-freight-brokerage.css -Selector .lgx-dom-hero-scrim, -Occurrence 2 for 390). The ticket itself is an .86 ink card, darker than any scrimmed pixel behind it, so the audit is conservative. AA: 4.5 normal, 3.0 large (>=24px, or >=18.66px bold). ============================================================ */ .lgx-dom section{ position:relative; } .lgx-dom .lgx-h2{ color:var(--lgx-text); } /* trap 1 */ .lgx-dom-head{ max-width:52rem; margin:0 0 clamp(2rem,3.6vw,3rem); } .lgx-dom-head .lgx-lead{ margin-bottom:0 !important; } .lgx-dom-head.is-centered{ margin-left:auto; margin-right:auto; text-align:center; } .lgx-dom-head.is-centered .lgx-eyebrow{ justify-content:center; } .lgx-dom-head.is-centered .lgx-lead{ margin-left:auto; margin-right:auto; } /* ============================================================ 1 - HERO (ink + photo + the load ticket) ============================================================ */ .lgx-dom-hero{ background:var(--lgx-ink); color:#fff; overflow:hidden; display:flex; align-items:center; padding:clamp(4rem,6.5vw,6rem) 0 clamp(3rem,5vw,4.5rem); } .lgx-dom-hero-media{ position:absolute; inset:0; z-index:0; } .lgx-dom-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center); } /* audited renderer stops, literal so hero-contrast-fast.ps1 can parse them */ .lgx-dom-hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) 44%, rgba(12,15,16,0.70) 70%, rgba(12,15,16,0.52) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.22) 52%, rgba(12,15,16,0.36) 100%); } .lgx-dom-hero-grid{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.55; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px); } .lgx-dom-hero-inner{ z-index:3; width:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .lgx-dom-hero .lgx-h1{ max-width:16ch; font-size:clamp(2.3rem,4.6vw,3.8rem) !important; color:#fff; } .lgx-dom-hero .lgx-lead{ max-width:52ch; margin-bottom:2rem !important; color:rgba(255,255,255,.82) !important; } /* 11.93 on ink; audited on the photo */ /* THE LOAD TICKET: the six things to send, as a stub. The doc's "give us the origin, destination, equipment type…" as a checklist the reader can tick off before they call. */ .lgx-dom-ticket{ background:rgba(12,15,16,.86); border:1px solid rgba(255,255,255,.2); border-radius:var(--lgx-radius); padding:clamp(1.4rem,2.4vw,1.9rem); position:relative; } .lgx-dom-ticket::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--lgx-accent); border-radius:var(--lgx-radius) 0 0 var(--lgx-radius); } .lgx-dom-ticket-label{ font-family:var(--lgx-font-label); font-size:.7rem !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase; color:#FF9670 !important; margin:0 0 .9rem 0 !important; /* 8.15 on ink */ } .lgx-page .lgx-dom-fields{ list-style:none; margin:0; padding:0; counter-reset:fld; } .lgx-page .lgx-dom-fields li{ counter-increment:fld; margin:0; padding:.55rem 0 .55rem 2.1rem; position:relative; border-top:1px dashed rgba(255,255,255,.18); font-family:var(--lgx-font-display); font-size:1rem; font-weight:700; letter-spacing:-.01em; color:#fff; line-height:1.3; } .lgx-page .lgx-dom-fields li:first-child{ border-top:none; } .lgx-page .lgx-dom-fields li::before{ content:counter(fld,decimal-leading-zero); position:absolute; left:0; top:.7rem; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.06em; color:#FF9670; } /* 8.15 */ .lgx-page .lgx-dom-fields li small{ display:block; font-family:var(--lgx-font-body); font-size:.82rem; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.72); margin-top:.1rem; } /* 9.43 */ .lgx-dom .lgx-dom-ticket-foot{ font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.82); margin:1rem 0 0; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.18); } /* 11.93 */ /* ============================================================ 2 - WHAT WE MOVE: THE EQUIPMENT PICKER (paper + wash) ============================================================ */ .lgx-dom-equip{ background-color:var(--lgx-light); padding:clamp(4.2rem,7vw,6.5rem) 0; background-image:var(--bgimg,none); background-size:cover; background-position:center; } .lgx-dom-equip .lgx-eyebrow{ background:var(--lgx-light); padding:.32em .6em; margin:0 0 1.4rem -.6em !important; border-radius:2px; } /* deeper is 2.69 on the drawing: chip */ .lgx-dom-equip .lgx-h2{ color:var(--lgx-text); } /* 6.79 min on the wash */ .lgx-dom .lgx-dom-equip .lgx-dom-body p{ font-size:1.05rem; line-height:1.68; color:var(--lgx-text); margin:0 0 1.1rem; max-width:60ch; } .lgx-dom-picker{ margin:2rem 0 0; display:grid; gap:.6rem; } .lgx-dom-pick{ display:grid; grid-template-columns:minmax(0,1fr) 2.4rem minmax(0,1fr); gap:.6rem 1rem; align-items:center; background:var(--lgx-white); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:.9rem 1.2rem; } .lgx-dom-pick .load{ font-size:.97rem; line-height:1.5; color:var(--lgx-text); } /* 16.33 on the white cell */ .lgx-dom-pick .load .k{ display:block; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .2rem; } /* 6.47 */ .lgx-dom-pick .arw{ font-family:var(--lgx-font-display); font-size:1.3rem; font-weight:700; color:var(--lgx-accent); text-align:center; line-height:1; } /* decorative, aria-hidden */ .lgx-dom-pick .rig b{ display:block; font-family:var(--lgx-font-display); font-size:1.08rem; font-weight:700; letter-spacing:-.01em; color:var(--lgx-text); line-height:1.25; } .lgx-dom-pick .rig span{ display:block; font-size:.88rem; line-height:1.45; color:var(--lgx-text); margin-top:.15rem; } /* ============================================================ 3 - HOW WE RUN IT (ink, cadence strips) ============================================================ */ .lgx-dom-how{ background:var(--lgx-ink); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-dom-how::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 60% at 100% 0%,rgba(220,83,52,.14),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-dom-how .lgx-container{ z-index:2; } .lgx-dom-how .lgx-h2{ color:#fff; } .lgx-dom-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); } .lgx-dom-col{ border-top:1px solid rgba(255,255,255,.17); padding-top:1.2rem; } .lgx-dom-cadence{ display:flex; align-items:center; gap:.5rem; height:14px; margin:0 0 1rem; } .lgx-dom-cadence i{ display:block; width:12px; height:12px; border-radius:50%; background:var(--lgx-accent); } .lgx-dom-cadence i.is-ghost{ background:none; border:2px solid rgba(255,255,255,.34); box-sizing:border-box; } .lgx-dom-cadence .line{ flex:1; height:1px; background:rgba(255,255,255,.22); } .lgx-dom-col h3{ font-family:var(--lgx-font-display); font-size:1.3rem !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.15 !important; color:#fff !important; margin:0 0 .7rem 0 !important; } .lgx-dom-col h3 small{ display:block; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#FF9670; margin:0 0 .5rem; } /* 8.15 */ .lgx-dom .lgx-dom-col p{ font-size:1.02rem; line-height:1.65; color:rgba(255,255,255,.82); margin:0; max-width:52ch; } /* 11.93 */ /* ============================================================ PHOTO STRIP (.lgx-page prefix is load-bearing, trap 3) ============================================================ */ /* 2026-09-21 picture pass: the window follows the bake (2000x816), so `cover` has nothing to crop. clamp(220px,28vw,400px) capped the strip at a fixed height, which at 2560 wide showed barely 40% of the file's height. 88vh only bites on a short landscape window; <=680px takes a 200px floor and trims the sides instead. */ .lgx-page .lgx-dom-strip{ display:block; margin:0; width:100%; max-width:none; aspect-ratio:2000 / 816; max-height:88vh; background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 4 - WHEN IT IS REALLY A PROJECT (plate) ============================================================ */ .lgx-dom-fork{ background-color:var(--lgx-accent-deep); color:#fff; padding:clamp(4.2rem,7vw,6rem) 0; overflow:hidden; } .lgx-dom-fork::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 70% at 100% 100%,rgba(166,58,29,.85),transparent 62%), repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px); } .lgx-dom-fork .lgx-container{ z-index:2; } .lgx-dom-fork .lgx-eyebrow{ color:#fff !important; } .lgx-dom-fork .lgx-eyebrow::before{ background:#fff; } .lgx-dom-fork .lgx-h2{ color:#fff; max-width:24ch; } .lgx-dom-fork-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem,4vw,3.5rem); align-items:center; } .lgx-dom .lgx-dom-fork p{ font-size:1.05rem; line-height:1.68; color:#fff; margin:0; max-width:60ch; } /* 5.20 field, 4.79 grid */ .lgx-dom-fork-go{ display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; } .lgx-page .lgx-dom-fork .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-dom-fork .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-dom .lgx-dom-fork-go small{ font-size:.86rem; line-height:1.45; color:#fff; } /* ============================================================ 5 - REGULATORY: THE PLATES (white) ============================================================ */ .lgx-dom-reg{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6rem) 0; } .lgx-page .lgx-dom-plates{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-wrap:wrap; gap:1rem; } .lgx-page .lgx-dom-plates li{ margin:0; padding:1rem 1.4rem; border:2px solid var(--lgx-text); border-radius:4px; min-width:14rem; } .lgx-page .lgx-dom-plates .k{ display:block; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .3rem; } /* 6.47 */ .lgx-page .lgx-dom-plates .v{ display:block; font-family:var(--lgx-font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; letter-spacing:.04em; color:var(--lgx-text); line-height:1; } /* 16.33 */ .lgx-dom .lgx-dom-reg-note{ font-size:.98rem; line-height:1.6; color:var(--lgx-text); margin:0; max-width:60ch; } .lgx-dom .lgx-dom-reg-note a{ color:var(--lgx-accent-deeper); font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* 6.47 */ /* ============================================================ 6 - SEND THE LOAD (accent gradient) ============================================================ */ .lgx-dom-cta{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:#fff; } .lgx-dom-cta .lgx-eyebrow{ color:#fff !important; justify-content:center; } .lgx-dom-cta .lgx-eyebrow::before{ background:#fff; } .lgx-dom-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:#fff !important; margin:0 auto 1rem !important; max-width:22ch; } .lgx-dom .lgx-dom-cta .sub{ font-size:1.1rem; line-height:1.6; color:#fff; max-width:58ch; margin:0 auto 2rem; } /* 5.20 at the deep end */ .lgx-dom-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-dom-cta .lgx-btn-light{ background:#fff; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-dom-cta .lgx-btn-light:hover{ background:rgba(255,255,255,.9); color:var(--lgx-accent-deeper); } .lgx-page .lgx-dom-cta .lgx-btn-outline{ color:#fff; border-color:rgba(255,255,255,.6); } .lgx-page .lgx-dom-cta .lgx-btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:900px){ .lgx-dom-hero-inner{ grid-template-columns:1fr; } .lgx-dom-cols, .lgx-dom-fork-grid{ grid-template-columns:1fr; } } @media (max-width:680px){ .lgx-page .lgx-dom-strip{ min-height:200px; } .lgx-dom-hero .lgx-h1{ max-width:none; } /* near-flat wash with a heavier top: the audited renderer phone scrim */ .lgx-dom-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.86) 0%, rgba(12,15,16,0.84) 50%, rgba(12,15,16,0.80) 100%), linear-gradient(0deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.50) 55%, rgba(12,15,16,0.74) 100%); } .lgx-dom-pick{ grid-template-columns:1fr; gap:.4rem; } .lgx-dom-pick .arw{ text-align:left; transform:rotate(90deg); width:1.3rem; } .lgx-page .lgx-dom-plates li{ min-width:0; flex:1 1 100%; } } /* ============================================================ LGX /capabilities/heavy-lift-oog/ - HEAVY HAUL & OOG ------------------------------------------------------------ Scoped to .lgx-hl. Tokens, .lgx-container, .lgx-eyebrow, .lgx-h1/.lgx-h2, .lgx-lead, .lgx-btn-* and .lgx-reveal come from lgx-home.css, concatenated BEFORE this file in lgx-site.css. lgx-inner.css sits between them, scoped to .lgx-rendered, and cannot reach here except for the frozen `.lgx-page p` and `.lgx-page p a / li a / td a` rules. Cascade traps this file keeps clearing: 1. Kadence's bare h3{color:var(--global-palette3)} and global heading colour: every heading here states its colour. 2. `.lgx-page a{color:inherit}` (0,1,1): link and button colour rules stay at (0,2,1) or better. 3. Kadence `.single-content ul,ol,figure,p` (0,1,1): every list, figure and paragraph-margin rule is prefixed with .lgx-page or .lgx-hl. 4. Frozen `.lgx-page li a` / `p a` recolour and underline links inside li/p: the checklist's two links and the link rail set their own. BAND RHYTHM - RESURFACED 2026-09-20 (Ryan). Was: ink/white/ink/paper+wash /strip/white/ink/paper/accent. Now: 1 hero ink + photo (hero-heavy-lift-oog.jpg) unchanged 2 defs white: definitions + the gauge envelope unchanged 3 roster ACCENT: nine cargo types was ink 4 plan WHITE, no wash: the checklist was paper + wash -- strip band-heavy-lift-oog.jpg, uncropped was 23.6% cropped 5 roles INK: body + roles roster was white 6 where WHITE: body + link rail was ink 7 related ACCENT: three related capabilities was paper 8 cta WHITE was accent gradient No two light bands touch: white(2) -> accent(3) -> white(4) -> strip -> ink(5) -> white(6) -> accent(7) -> white(8) -> dark footer. This page DELIBERATELY breaks the house "accent closer" rule: section 7 carries the accent and the page closes on white. Ryan's call, not a bug. The bg-heavy-lift-oog.jpg wash is no longer referenced by this page. The file still ships in uploads/lgx/ - leave it there; bake-washes.ps1 and the Base-must-match-surface check still know about it. CONTRAST REFERENCE (2026-09-17, extended 2026-09-20): on ink #161B1D: #fff 17.38 .82 white 11.93 .72 white 9.43 .62 white 7.28 #FF9670 8.15 accent 4.41 (large only) accent-deeper 1.50 -> NEVER on ink on white: --lgx-text 16.33 muted 5.28 deeper 6.47 deep 5.20 #FF9670 2.13 -> NEVER on white on paper #F4F4F2: --lgx-text 14.83 muted 5.07 deeper 5.88 accent gradient (quote against the DEEP end #BE4423, the limiting stop): #fff 5.20 .95 white 4.84 .92 white 4.64 .9 white 4.51 .86 white 4.25 FAIL .82 white 4.01 FAIL #FF9670 2.44 FAIL on the deeper end #A63A1D everything gains ~1.25. accent-soft panel (rgba(220,83,52,.13) over white, the sign-off row): --lgx-text 13.86 accent-deeper 5.49 hero photo: renderer's audited scrim stops, re-audited for this hero's boxes (hero-contrast-fast.ps1 -Css lgx-heavy-lift-oog.css -Selector .lgx-hl-hero-scrim, -Occurrence 2 for 390). AA: 4.5 normal, 3.0 large (>=24px, or >=18.66px bold). ============================================================ */ .lgx-hl section{ position:relative; } .lgx-hl .lgx-h2{ color:var(--lgx-text); } /* trap 1 */ .lgx-hl-head{ max-width:52rem; margin:0 0 clamp(2rem,3.6vw,3rem); } .lgx-hl-head .lgx-lead{ margin-bottom:0 !important; } /* ============================================================ 1 - HERO (ink + photo) ============================================================ */ .lgx-hl-hero{ background:var(--lgx-ink); color:#fff; overflow:hidden; min-height:520px; display:flex; align-items:center; padding:clamp(4.5rem,7vw,6.5rem) 0; } .lgx-hl-hero-media{ position:absolute; inset:0; z-index:0; } .lgx-hl-hero-photo{ position:absolute; inset:0; background-image:var(--img,none); background-size:cover; background-position:var(--imgpos,center); } /* audited renderer stops, literal so hero-contrast-fast.ps1 can parse them */ .lgx-hl-hero-scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(12,15,16,0.92) 0%, rgba(12,15,16,0.88) 44%, rgba(12,15,16,0.70) 70%, rgba(12,15,16,0.52) 100%), linear-gradient(0deg, rgba(12,15,16,0.80) 0%, rgba(12,15,16,0.22) 52%, rgba(12,15,16,0.36) 100%); } .lgx-hl-hero-grid{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.55; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px); } .lgx-hl-hero-inner{ z-index:3; width:100%; } .lgx-hl-hero .lgx-h1{ max-width:20ch; font-size:clamp(2.2rem,4.4vw,3.6rem) !important; color:#fff; } .lgx-hl-hero .lgx-lead{ max-width:58ch; margin-bottom:2rem !important; color:rgba(255,255,255,.82) !important; } /* 11.93 on ink; audited on the photo */ /* ============================================================ 2 - DEFINITIONS + THE GAUGE ENVELOPE (white) ============================================================ */ .lgx-hl-defs{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-hl-defs-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-hl-def h3{ font-family:var(--lgx-font-display); font-size:1.3rem !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.15 !important; color:var(--lgx-text) !important; margin:0 0 .6rem 0 !important; padding-top:1rem; border-top:1px solid var(--lgx-line-light); } .lgx-hl-def h3 small{ display:block; font-family:var(--lgx-font-label); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .5rem; } /* 6.47 */ .lgx-hl .lgx-hl-def p{ font-size:1.02rem; line-height:1.65; color:var(--lgx-text); margin:0 0 1.6rem; max-width:56ch; } /* 16.33 */ .lgx-hl .lgx-hl-defs-close{ font-size:1.02rem; line-height:1.6; color:var(--lgx-text); margin:0; max-width:56ch; padding-left:1rem; border-left:3px solid var(--lgx-accent); } /* THE GAUGE ENVELOPE. A dashed box is the standard container gauge; the solid block is the piece, breaking it on height and width; a scale under it carries the weight threshold. Every label is --lgx-text or deeper on white. */ .lgx-hl-env{ background:var(--lgx-light); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:clamp(1.4rem,2.4vw,2rem); } .lgx-hl-env-label{ font-family:var(--lgx-font-label); font-size:.66rem !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase; color:var(--lgx-accent-deeper) !important; margin:0 0 1.2rem 0 !important; } /* 5.88 on paper */ .lgx-hl-stage{ position:relative; height:15rem; } .lgx-hl-gauge{ position:absolute; left:12%; right:22%; top:30%; bottom:22%; border:2px dashed var(--lgx-text-muted); } .lgx-hl-gauge .t{ position:absolute; left:0; bottom:-1.6rem; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-text); white-space:nowrap; } /* 14.83 */ /* 2026-09-22: the piece shares the gauge's left and bottom edges (left was 18%, which floated it off the gauge), so it reads as breaking the box only on height and width. The over-height mark became a dimension line from the piece's top down to the gauge's top: 22% of the stage over the piece's 70% = 31.43%, which holds at the 12rem phone stage too. */ .lgx-hl-piece{ position:absolute; left:12%; right:8%; top:8%; bottom:22%; background:var(--lgx-accent); opacity:.92; border-radius:2px; } .lgx-hl-piece::before{ content:''; position:absolute; left:-.7rem; top:0; width:1px; height:31.43%; background:var(--lgx-text); } .lgx-hl-piece .t{ position:absolute; left:.7rem; top:.55rem; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; } /* #fff on accent 3.7: large-equivalent label, decorative; duplicated by the axis labels */ .lgx-hl-axis{ position:absolute; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-text); } /* 14.83 */ .lgx-hl-axis.is-h{ left:calc(12% - .7rem); top:2%; } /* starts on the piece's dimension line */ .lgx-hl-axis.is-w{ right:0; top:52%; transform:translateY(-50%); text-align:right; } .lgx-hl-axis.is-w::before{ content:''; position:absolute; right:0; top:-1.8rem; width:2.6rem; height:1px; background:var(--lgx-text); } .lgx-hl-scale{ position:relative; margin:2.4rem 0 0; height:2.8rem; border-top:1px solid var(--lgx-text); } .lgx-hl-scale span{ position:absolute; top:.5rem; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-text); } .lgx-hl-scale span::before{ content:''; position:absolute; left:0; top:-.5rem; width:1px; height:.5rem; background:var(--lgx-text); } .lgx-hl-scale .s0{ left:0; } .lgx-hl-scale .s30{ left:62%; color:var(--lgx-accent-deeper); } /* 5.88 */ .lgx-hl-scale .s30::before{ background:var(--lgx-accent-deeper); width:2px; height:.9rem; top:-.9rem; } .lgx-hl-scale .band{ position:absolute; left:62%; right:0; top:-4px; height:7px; background:rgba(220,83,52,.35); } /* ============================================================ 3 - THE ROSTER (ACCENT, nine cargo types) 2026-09-20: was ink. On the accent gradient the DEEP end is the limiting stop, so every value below is quoted against #BE4423: #fff 5.20, .92 white 4.64, .82 white 4.01 (FAIL - do not go back to it), peach #FF9670 2.44 (FAIL - it only ever worked on ink). ============================================================ */ .lgx-hl-roster{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-hl-roster::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 60% at 100% 0%,rgba(0,0,0,.17),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px); } .lgx-hl-roster .lgx-container{ z-index:2; } .lgx-hl-roster .lgx-h2{ color:#fff; } /* the eyebrow's 26px rule is --lgx-accent, which vanishes on accent */ .lgx-hl-roster .lgx-eyebrow::before{ background:#fff; } .lgx-hl-types{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(1.4rem,3vw,2.6rem); } .lgx-hl-type{ border-top:1px solid rgba(255,255,255,.32); padding:1.1rem 0 1.4rem; } .lgx-hl-type .n{ display:block; font-family:var(--lgx-font-label); font-size:.68rem; font-weight:700; letter-spacing:.14em; color:#fff; margin:0 0 .5rem; } /* 5.20 */ .lgx-hl-type h3{ font-family:var(--lgx-font-display); font-size:1.1rem !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.25 !important; color:#fff !important; margin:0 0 .45rem 0 !important; } .lgx-hl .lgx-hl-type p{ font-size:.93rem; line-height:1.55; color:rgba(255,255,255,.92); margin:0; } /* 4.64 */ /* ============================================================ 4 - THE PRE-MOBILIZATION CHECKLIST (PURE WHITE) 2026-09-20: the bg-heavy-lift-oog.jpg blueprint wash is GONE and the surface is plain white. That wash was the only reason this block ran monochrome --lgx-text: accent-deeper measured 2.21 against the drawing's dark lines, so no orange was allowed anywhere. On white, deeper is 6.47 and the step keys, tick boxes, links and the sign-off row carry the accent. Do not reintroduce --bgimg without reverting all of it. ============================================================ */ .lgx-hl-plan{ background:var(--lgx-white); padding:clamp(4.2rem,7vw,6.5rem) 0; } .lgx-hl-plan .lgx-h2{ color:var(--lgx-text); } /* 16.33 */ .lgx-hl .lgx-hl-plan .lgx-hl-body p{ font-size:1.05rem; line-height:1.68; color:var(--lgx-text); margin:0 0 1.1rem; max-width:58ch; } .lgx-page .lgx-hl-checklist{ list-style:none; margin:2.6rem 0 0; padding:0; max-width:54rem; counter-reset:stp; border-top:2px solid var(--lgx-text); } .lgx-page .lgx-hl-checklist li{ counter-increment:stp; margin:0; padding:1.25rem 0 1.35rem 3.6rem; position:relative; border-bottom:1px solid var(--lgx-line-light); } /* the tick box, drawn: a square with a check stroke, now in accent-deeper */ .lgx-page .lgx-hl-checklist li::before{ content:''; position:absolute; left:0; top:1.45rem; width:1.15rem; height:1.15rem; border:2px solid var(--lgx-accent-deeper); box-sizing:border-box; border-radius:2px; } .lgx-page .lgx-hl-checklist li::after{ content:''; position:absolute; left:.36rem; top:1.6rem; width:.32rem; height:.6rem; border-right:2px solid var(--lgx-accent-deeper); border-bottom:2px solid var(--lgx-accent-deeper); transform:rotate(45deg); } .lgx-page .lgx-hl-checklist .k{ display:block; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .3rem; } /* 6.47 */ .lgx-page .lgx-hl-checklist .k::before{ content:'Step ' counter(stp,decimal-leading-zero) ' \00b7 '; } .lgx-page .lgx-hl-checklist b{ display:block; font-family:var(--lgx-font-display); font-size:1.08rem; font-weight:700; letter-spacing:-.01em; color:var(--lgx-text); line-height:1.25; margin:0 0 .35rem; } .lgx-page .lgx-hl-checklist p{ font-size:.96rem; line-height:1.6; color:var(--lgx-text); margin:0; max-width:64ch; } .lgx-page .lgx-hl-checklist p a{ color:var(--lgx-accent-deeper); font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* 6.47 */ .lgx-page .lgx-hl-checklist p a:hover{ color:var(--lgx-accent-deep); } /* sign-off closes the list: accent-soft panel, accent rule under it */ .lgx-page .lgx-hl-checklist li.is-signoff{ border-bottom:2px solid var(--lgx-accent-deeper); background:var(--lgx-accent-soft); padding:1.25rem 1.2rem 1.35rem 3.6rem; margin-left:-1.2rem; margin-right:-1.2rem; border-radius:3px 3px 0 0; } .lgx-page .lgx-hl-checklist li.is-signoff::before{ left:1.2rem; } .lgx-page .lgx-hl-checklist li.is-signoff::after{ left:1.56rem; } .lgx-page .lgx-hl-checklist li.is-signoff .k{ color:var(--lgx-accent-deeper); } /* 5.49 on the soft panel */ .lgx-page .lgx-hl-checklist li.is-signoff .k::after{ content:' \00b7 sign-off'; } /* ============================================================ PHOTO STRIP (.lgx-page prefix is load-bearing, trap 3) ============================================================ */ /* band-heavy-lift-oog.jpg is 2000x727 (2.751:1) and the vessel fills the frame top to bottom - the trailer tyres touch the bottom edge and the vessel crown the top. The old clamp(220px,28vw,400px) capped the strip at 400px, which at 1440 wide is 524px of image squeezed into 400: a 23.6% vertical crop that cut the crown AND the wheels. Matching the container to the bake's own ratio means `cover` has nothing to crop at any width up to the max-height. Per the crop-QA rule this is tuned at the display window, not re-baked. */ .lgx-page .lgx-hl-strip{ display:block; margin:0; width:100%; max-width:none; aspect-ratio:2000 / 727; max-height:660px; background-image:var(--img,none); background-size:cover; background-position:var(--pos,center); background-color:var(--lgx-ink); } /* ============================================================ 5 - ROLES ROSTER (INK) 2026-09-20: was white. Ink reuses the page's audited on-ink set - #fff 17.38, .82 white 11.93, peach #FF9670 8.15. accent-deeper, which the tags used on white, is only 1.5 on ink: both tags moved to peach. ============================================================ */ .lgx-hl-roles{ background:var(--lgx-ink); color:#fff; padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-hl-roles::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(64% 58% at 100% 0%,rgba(220,83,52,.13),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 44px); } .lgx-hl-roles .lgx-container{ z-index:2; } .lgx-hl-roles .lgx-h2{ color:#fff; } .lgx-hl-roles-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-hl .lgx-hl-body p{ font-size:1.05rem; line-height:1.68; color:var(--lgx-text); margin:0 0 1.1rem; max-width:56ch; } /* 16.33 */ .lgx-hl .lgx-hl-roles .lgx-hl-body p{ color:rgba(255,255,255,.82); } /* 11.93 */ .lgx-hl-roles-list h3{ font-family:var(--lgx-font-label); font-size:.74rem !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase; color:#FF9670 !important; margin:0 0 .6rem 0 !important; } /* 8.15 */ .lgx-page .lgx-hl-roles-list ul{ list-style:none; margin:0; padding:0; } .lgx-page .lgx-hl-roles-list li{ margin:0; padding:.75rem 0; border-top:1px solid rgba(255,255,255,.17); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3rem 1rem; align-items:start; } .lgx-page .lgx-hl-roles-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.17); } .lgx-page .lgx-hl-roles-list b{ display:block; font-family:var(--lgx-font-display); font-size:1.02rem; font-weight:700; letter-spacing:-.01em; color:#fff; line-height:1.3; } .lgx-page .lgx-hl-roles-list span.d{ display:block; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.82); margin-top:.15rem; } /* 11.93 */ .lgx-page .lgx-hl-roles-list .tag{ font-style:normal; font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.3em .55em; border-radius:2px; white-space:nowrap; margin-top:.2rem; } .lgx-page .lgx-hl-roles-list .tag.is-partner{ color:#FF9670; border:1px solid rgba(255,150,112,.62); } /* 8.15 */ .lgx-page .lgx-hl-roles-list .tag.is-lgx{ color:var(--lgx-ink); background:#FF9670; border:1px solid #FF9670; } /* 8.15 */ /* ============================================================ 6 - WHERE IT CONCENTRATES (WHITE + link rail) 2026-09-20: was ink. The rail's peach #FF9670 is only 2.13 on white, so every peach here became accent-deeper (6.47) and the .17 white hairlines became --lgx-line-light. ============================================================ */ .lgx-hl-where{ background:var(--lgx-white); color:var(--lgx-text); padding:clamp(4.2rem,7vw,6.5rem) 0; overflow:hidden; } .lgx-hl-where .lgx-container{ z-index:2; } .lgx-hl-where .lgx-h2{ color:var(--lgx-text); } /* 16.33 */ .lgx-hl-where-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } .lgx-hl .lgx-hl-where .lgx-hl-body p{ color:var(--lgx-text); } /* 16.33 */ .lgx-hl-rail h3{ font-family:var(--lgx-font-label); font-size:.74rem !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase; color:var(--lgx-accent-deeper) !important; margin:0 0 .4rem 0 !important; } /* 6.47 */ .lgx-page .lgx-hl-rail ul{ list-style:none; margin:0; padding:0; } .lgx-page .lgx-hl-rail li{ margin:0; padding:0; border-top:1px solid var(--lgx-line-light); } .lgx-page .lgx-hl-rail li:last-child{ border-bottom:1px solid var(--lgx-line-light); } .lgx-page .lgx-hl-rail a{ display:grid; grid-template-columns:5.2rem minmax(0,1fr) auto; gap:.8rem; align-items:center; padding:.8rem 0; color:var(--lgx-text); text-decoration:none; } .lgx-page .lgx-hl-rail a .k{ font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-page .lgx-hl-rail a .t{ font-family:var(--lgx-font-display); font-size:1rem; font-weight:700; letter-spacing:-.01em; color:var(--lgx-text); } .lgx-page .lgx-hl-rail a .arw{ color:var(--lgx-accent-deeper); transition:transform .25s ease; } .lgx-page .lgx-hl-rail a:hover .t{ text-decoration:underline; text-underline-offset:3px; } .lgx-page .lgx-hl-rail a:hover .arw{ transform:translateX(4px); } /* ============================================================ 7 - RELATED CAPABILITIES (ACCENT) 2026-09-20: was paper. The three cards stay WHITE, so everything inside them keeps its audited on-white value (deeper 6.47, text 16.33) - only the band behind them and the heading moved. ============================================================ */ .lgx-hl-related{ background:linear-gradient(135deg,var(--lgx-accent-deep) 0%,var(--lgx-accent-deeper) 100%); padding:clamp(4.2rem,7vw,6.5rem) 0; color:#fff; } .lgx-hl-related .lgx-h2{ color:#fff; } /* 5.20 at the deep end */ .lgx-hl-related .lgx-eyebrow::before{ background:#fff; } .lgx-hl-related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.1rem,2.2vw,1.6rem); } .lgx-hl-rel{ background:var(--lgx-white); border:1px solid transparent; border-radius:var(--lgx-radius); padding:clamp(1.4rem,2.4vw,1.8rem); display:flex; flex-direction:column; color:inherit; text-decoration:none; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .3s ease; } .lgx-hl-rel:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.20); border-color:rgba(255,255,255,.55); } .lgx-hl-rel .k{ font-family:var(--lgx-font-label); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-accent-deeper); margin:0 0 .6rem; } /* 6.47 */ .lgx-hl-rel h3{ font-family:var(--lgx-font-display); font-size:1.14rem !important; font-weight:700 !important; letter-spacing:-.015em !important; line-height:1.2 !important; color:var(--lgx-text) !important; margin:0 0 .5rem 0 !important; } .lgx-hl .lgx-hl-rel p{ font-size:.95rem; line-height:1.58; color:var(--lgx-text); margin:0 0 1rem; } /* 16.33 */ .lgx-hl-rel .go{ margin-top:auto; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-hl-rel .go .arw{ display:inline-block; transition:transform .25s ease; } .lgx-hl-rel:hover .go .arw{ transform:translateX(4px); } /* ============================================================ 8 - CLOSING CTA (WHITE) 2026-09-20: was the accent gradient. NOTE this is the page that breaks the house "accent closer" rhythm rule on purpose (Ryan's call) - section 7 now carries the accent instead, and the page hands off white -> the dark footer. .lgx-btn-light was white-on-accent, which is invisible on white, so it is inverted to a filled accent button here (#fff on deep, 5.20). ============================================================ */ .lgx-hl-cta{ background:var(--lgx-white); border-top:1px solid var(--lgx-line-light); padding:clamp(4.2rem,7vw,6rem) 0; text-align:center; color:var(--lgx-text); } .lgx-hl-cta h2{ font-family:var(--lgx-font-display); font-size:clamp(1.9rem,3.6vw,2.9rem) !important; font-weight:700 !important; letter-spacing:-.025em !important; line-height:1.08 !important; color:var(--lgx-text) !important; margin:0 auto 1rem !important; max-width:22ch; } .lgx-hl .lgx-hl-cta .sub{ font-size:1.1rem; line-height:1.6; color:var(--lgx-text); max-width:56ch; margin:0 auto 2rem; } /* 16.33 */ .lgx-hl-cta .lgx-cta-row{ justify-content:center; } .lgx-page .lgx-hl-cta .lgx-btn-light{ background:var(--lgx-accent-deep); color:#fff; border-color:var(--lgx-accent-deep); } /* 5.20 */ .lgx-page .lgx-hl-cta .lgx-btn-light:hover{ background:var(--lgx-accent-deeper); color:#fff; border-color:var(--lgx-accent-deeper); } /* 6.47 */ .lgx-hl .lgx-hl-cta-phone{ margin:1.5rem 0 0; font-size:.98rem; color:var(--lgx-text); } .lgx-hl .lgx-hl-cta-phone a{ color:var(--lgx-accent-deeper); font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* 6.47 */ /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .lgx-hl-types{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lgx-hl-related-grid{ grid-template-columns:1fr; } } @media (max-width:900px){ .lgx-hl-defs-grid, .lgx-hl-roles-grid, .lgx-hl-where-grid{ grid-template-columns:1fr; } } @media (max-width:680px){ .lgx-hl-hero{ min-height:0; } .lgx-hl-hero .lgx-h1{ max-width:none; } /* near-flat wash with a heavier top: the audited renderer phone scrim */ .lgx-hl-hero-scrim{ background: linear-gradient(90deg, rgba(12,15,16,0.86) 0%, rgba(12,15,16,0.84) 50%, rgba(12,15,16,0.80) 100%), linear-gradient(0deg, rgba(12,15,16,0.82) 0%, rgba(12,15,16,0.50) 55%, rgba(12,15,16,0.74) 100%); } .lgx-hl-types{ grid-template-columns:1fr; } /* At phone width the bake's own 2.751 ratio makes the strip a 142px sliver, so give it a floor and take the difference out of the SIDES instead. The vessel occupies x 210-1350 of the 2000px bake. At 390 wide x 200 tall, cover draws the image 550px wide, so the 390px window can slide within 160px: at 30% the offset is 48px and the window shows original x 175-1593. The vessel is still whole; what gets trimmed is the trailer's tail lights and part of the boom lift. Anything above 36% starts eating the rear dished end. */ .lgx-page .lgx-hl-strip{ min-height:200px; background-position:30% center; } .lgx-hl-stage{ height:12rem; } .lgx-page .lgx-hl-roles-list li{ grid-template-columns:1fr; } .lgx-page .lgx-hl-rail a{ grid-template-columns:minmax(0,1fr) auto; } .lgx-page .lgx-hl-rail a .k{ grid-column:1 / -1; } } /* ============================================================ LGX LEGAL DOCUMENT (2026-09-22) ------------------------------------------------------------ One reading layout shared by the legal pages: /privacy/ privacy-page.html (words: copy doc 27) /estimate-terms/ estimate-terms-page.html (words: imported verbatim from app.shiplgx.com by import-estimate-terms.mjs) Both masters carry NO style block of their own. split-home.ps1 appends this file to lgx-site.css after every page sheet. SCOPE. Every rule is under .lgx-legal, a class only the two legal wrappers carry (
    ), so nothing here can reach home, the custom masters or the rendered pages. The two frozen rules from lgx-inner.css still arrive, as on every .lgx-page: `.lgx-page p` (1.02rem / 1.65 / --lgx-text) is the body text here, and `.lgx-page p a, li a, td a` (accent-deep, underlined) is the link colour on white. Overrides of it are written at (0,2,1) or above. KADENCE TRAPS (see lgx-inner.css header): `.single-content h2 / ol / ul / table / p` are (0,1,1) and the global heading colour beats inheritance, so every heading states its colour and every list, table and heading rule here is at least (0,2,1). Deliberately NOT here: a closing CTA band. A legal document ends on its own last line and the site footer; a sales band under the limitation-of-liability clause reads wrong. CONTRAST (WCAG; values from the reference in lgx-inner.css): hero on ink #161B1D h1 #fff 17.38 | sub .82 white 11.93 meta .72 white 9.44 | meta link #fff 17.38 body on white --lgx-text 16.33 | muted 5.28 | deep 5.20 contents on paper --lgx-text-muted 5.07 | deep 4.72 notice #FCF0EC --lgx-text 14.63 | link (accent-deep) 4.66 table group row #fff on --lgx-accent-deep 5.20 (the app page uses #DF5934 here, 3.9:1 with white - an AA fail at 12px, so the deeper orange) ============================================================ */ .lgx-legal{ background:var(--lgx-white); } .lgx-legal .lgx-legal-col{ max-width:56rem; margin:0 auto; padding:0 2.25rem; } /* ---------- hero: text-led ink band, the site's opening rhythm ---------- */ .lgx-legal .lgx-legal-hero{ background:var(--lgx-ink); color:#fff; padding:clamp(3.5rem,6vw,5.25rem) 0 clamp(3rem,5vw,4.25rem); } .lgx-legal .lgx-legal-hero .lgx-eyebrow{ margin-bottom:1.1rem !important; } .lgx-legal .lgx-legal-title{ font-family:var(--lgx-font-display); font-size:clamp(2rem,3.6vw,2.85rem); font-weight:800; letter-spacing:-.015em; line-height:1.08; color:#fff; margin:0 0 1rem 0; } .lgx-legal .lgx-legal-sub{ font-size:1.08rem; line-height:1.6; font-style:italic; color:rgba(255,255,255,.82); max-width:62ch; margin:0 0 .9rem 0; } /* 11.93 on ink */ .lgx-legal .lgx-legal-meta{ font-size:.86rem; line-height:1.6; font-style:italic; color:rgba(255,255,255,.72); margin:0; overflow-wrap:anywhere; } /* 9.44 on ink */ .lgx-legal .lgx-legal-meta a{ color:#fff; text-decoration:underline; text-underline-offset:2px; } /* 17.38 on ink */ .lgx-legal .lgx-legal-meta a:hover{ color:#FF9670; } /* 8.15 on ink */ /* ---------- document ---------- */ .lgx-legal .lgx-legal-body{ padding:clamp(2.75rem,5vw,4rem) 0 clamp(4rem,7vw,6rem); } /* contents: a native
    , open by default, so it works with no script */ .lgx-legal .lgx-legal-toc{ background:var(--lgx-light); border:1px solid var(--lgx-line-light); border-radius:var(--lgx-radius); padding:1rem 1.25rem 1.1rem; margin:0 0 2.4rem 0; } .lgx-legal .lgx-legal-toc summary{ cursor:pointer; font-family:var(--lgx-font-label); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lgx-text-muted); /* 5.07 on paper */ } .lgx-legal .lgx-legal-toc summary:hover{ color:var(--lgx-text); } .lgx-legal .lgx-legal-toc ol{ list-style:none; margin:.9rem 0 0 0; padding:0; column-gap:2.5rem; } .lgx-legal .lgx-legal-toc li{ font-size:.84rem; line-height:1.4; margin:0 0 .5rem 0; break-inside:avoid; } .lgx-legal .lgx-legal-toc li a{ color:var(--lgx-accent-deep); font-weight:600; text-decoration:none; } /* 4.72 on paper */ .lgx-legal .lgx-legal-toc li a:hover{ text-decoration:underline; text-underline-offset:2px; } @media (min-width:900px){ .lgx-legal .lgx-legal-toc ol{ columns:2; } } .lgx-legal .lgx-legal-doc h2{ font-family:var(--lgx-font-display); font-size:1.1rem; font-weight:700; letter-spacing:.02em; line-height:1.4; color:var(--lgx-text); margin:2.6rem 0 .85rem 0; scroll-margin-top:7rem; } .lgx-legal .lgx-legal-doc > h2:first-child{ margin-top:0; } .lgx-legal .lgx-legal-doc h3{ font-family:var(--lgx-font-display); font-size:1rem; font-weight:700; line-height:1.45; color:var(--lgx-text); margin:1.7rem 0 .55rem 0; scroll-margin-top:7rem; } .lgx-legal .lgx-legal-doc p{ margin:0 0 .95rem 0; } .lgx-legal .lgx-legal-doc ul{ margin:0 0 1.1rem 0; padding:0 0 0 1.3rem; list-style:disc; } .lgx-legal .lgx-legal-doc li{ font-size:1.02rem; line-height:1.6; color:var(--lgx-text); margin:0 0 .45rem 0; } .lgx-legal .lgx-legal-doc li::marker{ color:var(--lgx-accent); } /* the app page's tinted, capitalised notices (acceptance, liability, value) */ .lgx-legal .lgx-legal-doc .lgx-legal-notice{ background:#FCF0EC; border-left:3px solid var(--lgx-accent); border-radius:0 var(--lgx-radius) var(--lgx-radius) 0; padding:.85rem 1.1rem; margin:0 0 .95rem 0; /* --lgx-text 14.63, accent-deep link 4.66 on #FCF0EC */ } /* rate table: grey head, orange group rows, bold first and last columns */ .lgx-legal .lgx-legal-table{ margin:1.3rem 0 2rem 0; } .lgx-legal .lgx-legal-table table{ width:100%; border-collapse:collapse; border:1px solid var(--lgx-line-light); margin:0; font-size:.9rem; line-height:1.45; } .lgx-legal .lgx-legal-table th, .lgx-legal .lgx-legal-table td{ border:1px solid var(--lgx-line-light); padding:.6rem .75rem; text-align:left; vertical-align:top; color:var(--lgx-text); background:transparent; } .lgx-legal .lgx-legal-table thead th{ background:var(--lgx-light); font-size:.76rem; font-weight:700; letter-spacing:.05em; } .lgx-legal .lgx-legal-table thead th:nth-child(1){ width:28%; } .lgx-legal .lgx-legal-table thead th:nth-child(3){ width:25%; } .lgx-legal .lgx-legal-table tr.is-group th{ background:var(--lgx-accent-deep); color:#fff; font-size:.76rem; font-weight:700; letter-spacing:.06em; } /* 5.20 */ @media (max-width:680px){ .lgx-legal .lgx-legal-col{ padding:0 1.3rem; } .lgx-legal .lgx-legal-toc{ padding:.9rem 1rem 1rem; } .lgx-legal .lgx-legal-doc h2{ font-size:1.02rem; margin-top:2.2rem; } /* the three-column table stacks into one card per charge */ .lgx-legal .lgx-legal-table table, .lgx-legal .lgx-legal-table tbody, .lgx-legal .lgx-legal-table tr, .lgx-legal .lgx-legal-table th, .lgx-legal .lgx-legal-table td{ display:block; width:auto; } .lgx-legal .lgx-legal-table table{ border:0; } .lgx-legal .lgx-legal-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .lgx-legal .lgx-legal-table tr{ border:1px solid var(--lgx-line-light); border-top:0; } .lgx-legal .lgx-legal-table tr.is-group{ border:0; margin-top:1rem; } .lgx-legal .lgx-legal-table tr.is-group:first-child{ margin-top:0; } .lgx-legal .lgx-legal-table th, .lgx-legal .lgx-legal-table td{ border:0; padding:.55rem .85rem; } .lgx-legal .lgx-legal-table td + td{ padding-top:0; } .lgx-legal .lgx-legal-table td[data-label]:not(:first-child)::before{ content:attr(data-label); display:block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lgx-text-muted); margin:0 0 .15rem 0; /* 5.28 on white */ } } /* the closing company line, as the app page ends */ .lgx-legal .lgx-legal-doc .lgx-legal-sign{ font-size:.86rem; line-height:1.6; color:var(--lgx-text-muted); text-align:center; /* 5.28 on white */ border-top:1px solid var(--lgx-line-light); margin:2.75rem 0 0 0; padding:1.1rem 0 0 0; }