/* ======================================================================
letterbatch — clean build
Rebuilt from measurements of the approved design, not from its markup.
Every value below was read off the replica; where a number looks odd it
is because it is measured rather than chosen.
====================================================================== */
:root {
/* ink */
--ink: #1A1A1A; /* hero copy, nav */
--ink-warm: #1E1B17; /* pill label — measured warmer than body ink */
--ink-70: rgba(26, 26, 26, .74);
/* grounds */
--paper: #F2EFE6;
--paper-warm: #E9E3D6;
--soft-blue: #DCEBF2;
--serif: "Source Serif 4", Georgia, serif;
--sans: Figtree, system-ui, -apple-system, sans-serif;
--container: 1240px;
--gutter: 40px;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
margin: 0;
font-family: var(--sans);
font-size: 16px;
line-height: 1.3;
color: var(--ink);
background-color: var(--paper);
/* The sheet: fibre relief lit from 45deg. feDiffuseLighting over fractal
noise is what makes this read as a material rather than as speckle;
multiply keeps it from washing the colour out. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='white' surfaceScale='2'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
background-size: 400px 400px;
background-attachment: fixed;
background-blend-mode: multiply;
}
/* fine tooth over everything */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: .10;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
@media print { body::before { display: none; } }
/* ---------------- nav ---------------- */
/* Measured: 1056x63, 16px from the top, centred. */
.lb-nav {
position: sticky;
top: 16px;
z-index: 100;
width: 100%;
max-width: 1056px;
height: 63px;
margin: 16px auto 0;
padding: 0 24px;
display: flex;
align-items: center;
gap: 24px;
background: var(--paper);
/* Measured off the reference bar: 2px solid #E4E4D0, the same tone the tab
underline uses. Radius 9.6px there; 10 here. NOTE the reference bar is
73px tall against this one's 63 — height left alone deliberately, since
changing it shifts the hero. */
border: 2px solid #E4E4D0;
border-radius: 10px;
}
.lb-nav__brand {
font-family: var(--serif);
font-size: 24px;
line-height: 1;
letter-spacing: -.01em;
color: var(--ink);
text-decoration: none;
}
.lb-nav__links {
display: flex;
gap: 32px;
margin: 0 auto; /* centred in the remaining space */
}
.lb-nav__links a {
font-size: 16px;
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.lb-nav__links a:hover { opacity: .7; }
/* ---------------- buttons ---------------- */
/* Measured: 206x52, padding 16/24, radius 8, 2px ink border, soft-blue fill. */
.lb-btn {
display: inline-block;
padding: 16px 24px;
border: 2px solid var(--ink);
border-radius: 8px;
background: var(--soft-blue);
font-family: var(--sans);
font-size: 16px;
line-height: 1;
font-weight: 600;
color: var(--ink);
text-decoration: none;
transition: background-color .25s;
}
.lb-btn:hover { background: #CFE2EC; }
.lb-nav .lb-btn { padding: 10px 16px; }
/* ---------------- hero ---------------- */
/* Vertical rhythm, measured: 112 / h1 / 24 / sub / 64 / pills / 64 / cta / 112 */
.lb-hero {
padding: 112px var(--gutter);
text-align: center;
}
.lb-hero__inner { max-width: var(--container); margin: 0 auto; }
/* 92px at 1512 and at 1920 — so it is capped, not endlessly fluid.
6.1vw is the slope through 1280 (78.08) and 991 (60.45); floor 40px. */
.lb-hero h1 {
margin: 0;
font-family: var(--serif);
font-size: clamp(40px, 6.1vw, 92px);
line-height: .85;
font-weight: 400;
letter-spacing: -.05em;
color: var(--ink);
}
.lb-hero h1 em { font-style: italic; }
.lb-hero__sub {
max-width: 700px;
margin: 24px auto 0;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: var(--ink);
}
/* ---------------- pills ---------------- */
/* Anchors only. There is deliberately no selected state — a scroll-spy fill
was built, reviewed and removed (owner, 2026-07-31). Do not add one back. */
.lb-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-top: 64px;
}
.lb-pills a {
padding: 8px 16px;
border: 1px solid rgba(30, 27, 23, .82);
border-radius: 999px;
background: var(--paper);
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: var(--ink-warm);
text-decoration: none;
transition: background-color .25s, border-color .25s;
}
.lb-pills a:hover {
background: var(--paper-warm);
border-color: rgba(30, 27, 23, 1);
}
.lb-hero__cta { margin-top: 64px; }
/* ---------------- responsive ----------------
Measured off the approved design: the sub drops to 18px at 767, the pills
step 20 -> 16 at 991 and -> 14 at 479. The h1 is fluid and needs no step. */
/* Measured, not guessed: the hero's leading and trailing gap steps
112 -> 96 -> 72, the pill padding steps 8/16 -> 8/12 -> 6.4/9.6, and the
pills and CTA gaps drop 64 -> 24 at 767. The 6.4/9.6 is what the design
actually computes; it is a ratio of the base, not a typo. */
@media (max-width: 991px) {
.lb-hero { padding-block: 96px; }
.lb-hero__sub { font-size: 20px; }
.lb-pills a { font-size: 16px; padding: 8px 12px; }
}
@media (max-width: 767px) {
:root { --gutter: 20px; }
.lb-hero { padding-block: 72px; }
.lb-hero__sub { font-size: 18px; }
.lb-pills { margin-top: 24px; }
.lb-hero__cta { margin-top: 24px; }
/* width:auto, not 100%. With 100% the bar was a full viewport wide PLUS a
20px margin each side, so every page scrolled sideways on a phone. */
.lb-nav { width: auto; max-width: none; margin-inline: var(--gutter); }
.lb-nav__links { display: none; }
}
@media (max-width: 479px) {
.lb-pills a { font-size: 14px; padding: 6.4px 9.6px; }
/* The design narrows the pill row here rather than letting it run the full
gutter width, so the five pills break into a tighter block. Measured at
320px, which is what makes the hero 510px tall at this width instead of
473 — the extra row is the whole difference. */
.lb-pills { max-width: 320px; margin-inline: auto; }
}
/* ======================================================================
MERGE — the dark-ground system
A bottle-green block sitting at the top of a soft-blue band, with the
security note on the blue below it. Establishes the pattern that Group,
Validate and the closing block reuse.
====================================================================== */
:root {
--bottle-green: #143B32;
--panel-radius: clamp(28px, 3vw, 52px);
--icon: #5369AD;
}
/* 1240 is the CONTENT width — the gutter lives on the block, not inside
this box. Putting the padding here made every grid 80px too narrow. */
.lb-container { max-width: var(--container); margin: 0 auto; }
/* ---- the soft-blue band -------------------------------------------- */
/* Grain here uses MULTIPLY. On a light ground multiply registers; soft-light
does not — measured, not assumed. The green block below deliberately has
NO grain: soft-light is inert that dark, and the owner ruled on 2026-07-31
to leave the greens flat rather than switch their blend mode. */
.lb-band {
position: relative;
z-index: 1; /* above the paper sheets, same reason as .lb-green--solo */
overflow: hidden;
border-radius: var(--panel-radius);
color: var(--ink-warm);
background:
radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .28), transparent 38%),
radial-gradient(circle at 82% 84%, rgba(74, 111, 132, .08), transparent 44%),
var(--soft-blue);
}
.lb-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .20;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
background-size: 240px 240px;
}
.lb-band > * { position: relative; z-index: 1; }
/* ---- the green block ------------------------------------------------ */
.lb-green {
border-radius: var(--panel-radius);
padding: 112px 40px;
color: var(--paper);
background:
radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .025), transparent 34%),
radial-gradient(circle at 82% 78%, rgba(0, 0, 0, .10), transparent 42%),
var(--bottle-green);
}
.lb-tag {
display: inline-block;
padding: 8px 16px;
border-radius: 100px;
background: var(--paper);
font-size: 20px;
line-height: 1.4;
font-weight: 700;
color: var(--bottle-green);
}
/* The copy column is 760px, not the full 1240 — the cards use the full
width, the sentence above them does not. That contrast is the layout. */
.lb-green__copy { max-width: 760px; }
.lb-green h2 {
margin: 24px 0 0;
font-family: var(--serif);
font-size: 64px;
line-height: .95;
font-weight: 400;
letter-spacing: -.03em;
color: var(--paper);
}
/* Inline, not block. Validate keeps its italic mid-sentence; Merge authors
its own break with a
so both can share this rule. */
.lb-green h2 em { font-style: italic; }
/* Shrink-to-fit + balance. The measured widths (726 in a 760 column, 653 in
727, then full width once the text fills the line) only make sense as a
fit-content box with balanced lines — not as a fixed max-width. */
.lb-green__support {
width: fit-content;
text-wrap: balance;
margin: 24px 0 0;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: rgba(242, 239, 230, .78);
}
/* ---- cards ---------------------------------------------------------- */
.lb-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 48px;
}
.lb-card {
padding: 64px 38px;
border: 1px solid rgba(242, 239, 230, .18);
border-radius: 32px;
background: rgba(7, 28, 24, .08);
transition: background-color .25s, border-color .25s, transform .25s;
}
.lb-card:hover {
background: rgba(242, 239, 230, .035);
border-color: rgba(242, 239, 230, .30);
transform: translateY(-2px);
}
.lb-card__icon {
width: 48px;
height: 48px;
background-color: var(--icon);
-webkit-mask: var(--m) center / contain no-repeat;
mask: var(--m) center / contain no-repeat;
}
.lb-card h3 {
width: fit-content;
text-wrap: balance;
margin: 32px 0 0;
font-family: var(--serif);
font-size: 32px;
line-height: .95;
font-weight: 400;
letter-spacing: -.04em;
color: var(--paper);
}
.lb-card p {
margin: 32px 0 0;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
color: rgba(242, 239, 230, .78);
}
/* ---- security note, on the blue ------------------------------------- */
.lb-security { padding: 80px 40px; }
.lb-security__wrap {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
max-width: 960px;
margin: 0 auto;
}
.lb-security__copy { max-width: 480px; }
.lb-security h3 {
margin: 0;
font-family: var(--serif);
font-size: 48px;
line-height: .95;
font-weight: 400;
letter-spacing: -.03em;
color: var(--ink-warm);
}
.lb-security p {
margin: 24px 0 0;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: rgba(30, 27, 23, .76);
}
.lb-security__right { text-align: right; }
/* The chips touch — no gap. They are labels, not controls: no fill, no
hover, not links. The owner reverted an earlier version that widened this
block to fit longer labels, so the two-chip 280px measure is deliberate. */
.lb-security__chips { display: flex; gap: 0; justify-content: flex-end; }
.lb-security__chips span {
padding: 11px 16px;
border: 1px solid rgba(30, 27, 23, .82);
border-radius: 992px;
font-size: 16px;
line-height: 1;
font-weight: 700;
color: var(--ink-warm);
}
.lb-security__btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 29px;
padding: 16px 24px;
border: 1px solid rgba(30, 27, 23, .82);
border-radius: 8px;
background: var(--paper);
font-size: 16px;
line-height: 1;
font-weight: 600;
color: var(--ink-warm);
text-decoration: none;
transition: background-color .25s;
}
.lb-security__btn:hover { background: var(--paper-warm); }
.lb-security__btn::before {
content: "";
width: 16px; height: 16px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Every number below is measured off the approved design, including the ones
that look arbitrary. The 4.8px/12px tag padding and the 22.799px line-height
are what it computes — ratios of a base, not hand-picked values. */
@media (max-width: 991px) {
.lb-cards { grid-template-columns: repeat(2, 1fr); }
.lb-green { padding: 96px 40px; }
.lb-cards { margin-top: 40px; }
.lb-security { padding: 64px 40px; }
.lb-security__wrap { flex-direction: column; }
.lb-security__right { text-align: left; }
.lb-security__chips { justify-content: flex-start; }
}
@media (max-width: 767px) {
.lb-green { padding: 72px 20px; }
.lb-security { padding: 48px 20px; }
.lb-green h2 { font-size: 40px; }
.lb-tag { font-size: 16px; padding: 4.8px 12px; }
.lb-green__support { font-size: 18px; }
.lb-cards { gap: 8px; margin-top: 24px; }
.lb-card { padding: 32px 16px; }
.lb-card__icon + h3 { margin-top: 24px; }
.lb-card h3 { font-size: 24px; margin-top: 24px; }
.lb-card p { margin-top: 24px; }
.lb-security h3 { font-size: 32px; }
.lb-card { border-radius: 24px; }
}
/* ======================================================================
THE WARM PAPER SHEET
Sections lying on this read as a different stock from the page ground.
The negative margin is the fix for the corner cut-outs: a rounded block
above or below would otherwise reveal the page ground through its corner
and read as a patch of different paper. The sheet runs BEHIND by exactly
one corner radius, with matching padding so no content moves.
====================================================================== */
.lb-sheet {
position: relative;
z-index: 0;
margin-block: calc(-1 * var(--panel-radius));
padding-block: var(--panel-radius);
color: var(--ink-warm);
background:
radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .34), transparent 38%),
radial-gradient(circle at 84% 82%, rgba(112, 88, 55, .045), transparent 46%),
var(--paper);
}
.lb-sheet::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .24;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 240px 240px;
}
.lb-sheet > * { position: relative; z-index: 1; }
/* ======================================================================
GROUP — media panel + accordion
====================================================================== */
.lb-split { padding: 64px 40px; }
.lb-split__grid {
display: grid;
grid-template-columns: 3fr 2fr; /* 667.19 / 444.81 of 1240 */
gap: 128px;
/* Centred, NOT padded. The 43px that appears above the pill at 1512 is the
centring offset against a taller panel, not a top padding. Hard-coding it
as padding matched at 1512 and broke at 1100, where the copy column is the
taller of the two and the offset should vanish. */
align-items: center;
max-width: var(--container);
margin: 0 auto;
}
.lb-panel { position: relative; align-self: start; }
.lb-panel__media { display: block; width: 100%; height: auto; border-radius: 40px; }
/* Centred video mark. The real product video replaces the placeholder at the
same intrinsic ratio, so nothing about the layout moves when it lands. */
.lb-panel::after {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: clamp(56px, 14%, 120px);
aspect-ratio: 3 / 2;
pointer-events: none;
background-color: rgba(30, 27, 23, .42);
-webkit-mask: var(--vm) center / contain no-repeat;
mask: var(--vm) center / contain no-repeat;
--vm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1.5' y='3.5' width='22' height='17' rx='3.5'/%3E%3Cpath d='M23.5 9.5 L34.5 4.5 L34.5 19.5 L23.5 14.5 Z'/%3E%3C/svg%3E");
}
/* No min-width:0 here. The nowrap accordion labels give this column a
min-content floor, and that floor is exactly what widens the copy side
between 992 and ~1300. Adding min-width:0 let it collapse to 357px. */
.lb-split__copy .lb-tag { background: var(--paper-warm); color: var(--ink-warm); border: 1px solid rgba(30,27,23,.82); }
.lb-split h2 {
margin: 24px 0 0;
font-family: var(--serif);
font-size: 64px;
line-height: .95;
font-weight: 400;
letter-spacing: -.03em;
color: var(--ink-warm);
}
.lb-split h2 em { font-style: italic; }
.lb-split__support {
margin: 24px 0 0;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: rgba(30, 27, 23, .74);
}
/* ---- accordion: ~20 lines of CSS and JS instead of a component bundle ---- */
/* 16px of gap, not a margin on the item: a margin would also hang off the
last row. Measured pitch is 66 = 48 row + 2 rule + 16. */
.lb-acc { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.lb-acc__item { border-bottom: 2px solid var(--ink); }
.lb-acc__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 8px 0;
border: 0;
background: none;
cursor: pointer;
text-align: left;
font-family: var(--serif);
font-size: 32px;
line-height: .95;
font-weight: 400;
/* -.03em, NOT -.04em. At -.04em the label measures ~10px narrower, which
lowers the column's min-content, narrows the whole copy side between 992
and ~1300, and re-wraps the support line to a fourth row. One tracking
value, four visible consequences. */
letter-spacing: -.03em;
color: #222;
/* Their labels do not wrap. That raises the column's min-content and is why
the grid widens the copy side between 992 and ~1300 instead of breaking a
heading. Matching it keeps the intermediate widths identical. */
white-space: nowrap;
}
.lb-acc__chev {
flex: none;
width: 32px; height: 32px;
background-color: currentColor;
transition: transform .25s ease;
-webkit-mask: var(--cm) center / contain no-repeat;
mask: var(--cm) center / contain no-repeat;
--cm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.lb-acc__item.is-open .lb-acc__chev { transform: rotate(180deg); }
.lb-acc__body { overflow: hidden; height: 0; transition: height .3s ease; }
.lb-acc__body p {
margin: 0 0 18px;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
color: rgba(30, 27, 23, .74);
}
@media (max-width: 991px) {
.lb-split__grid { grid-template-columns: 1fr; gap: 64px; }
.lb-panel { order: 2; }
.lb-split__copy { order: 1; }
.lb-split { padding-block: 48px; }
.lb-acc { margin-top: 40px; }
}
@media (max-width: 767px) {
.lb-split { padding: 32px 20px; }
.lb-split__grid { gap: 48px; }
.lb-split h2 { font-size: 40px; }
.lb-split__support { font-size: 18px; }
.lb-panel__media { border-radius: 24px; }
.lb-acc { margin-top: 24px; }
.lb-acc__row { font-size: 28px; }
}
@media (max-width: 479px) {
.lb-split__grid { gap: 32px; }
.lb-acc { gap: 8px; } /* pitch 58, not 66 */
.lb-acc__row { font-size: 24px; }
}
/* ======================================================================
ATTACH — centred copy over a three-tab panel
====================================================================== */
.lb-tabsec { padding: 192px 40px 208px; }
.lb-tabsec__inner { max-width: var(--container); margin: 0 auto; }
/* align-items:center makes each child shrink to fit, which is why the
headline measures 488 inside a 608 column while the support line fills it. */
/* The 608 cap moved OFF this block and onto the support line alone, so the
headline can use the full container and sit on one line. Both children are
still centred and still shrink-to-fit. */
.lb-tabsec__copy {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: var(--container);
margin: 0 auto;
text-align: center;
}
.lb-tabsec__support { max-width: 608px; }
.lb-tabsec__copy .lb-tag { background: var(--paper-warm); color: var(--ink-warm); border: 1px solid rgba(30,27,23,.82); }
.lb-tabsec h2 {
margin: 0;
font-family: var(--serif);
font-size: 64px;
line-height: .95;
font-weight: 400;
letter-spacing: -.03em;
/* fit-content + an AUTHORED break. text-wrap:balance rebalances the lines
but leaves the box at the full column width, so the measured 488 only
comes back once the break is in the markup and the box shrinks to the
longest line. Change the headline and you re-place the
. */
width: fit-content;
color: var(--ink-warm);
}
.lb-tabsec h2 em { font-style: italic; }
/* 72px below, not the 24px gap: the design puts a 48px bottom margin here AND
a trailing empty flex item that contributes one more 24px gap. Same result,
one declaration instead of a phantom element. */
/* 48px total below the support line, not 120. The old 72px bottom margin
reproduced a trailing empty flex item in the tab structure — that structure
is gone, so the space it reserved was left stranded. .lb-tabs still adds its
own 48. */
.lb-tabsec__support {
margin: 0;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: rgba(30, 27, 23, .74);
}
.lb-tabs { margin-top: 48px; }
.lb-tabs__menu { display: flex; }
.lb-tabs__link {
flex: 1;
padding: 24px 0;
border: 0;
border-bottom: 2px solid #E4E4D0; /* measured; the active one goes to ink */
background: none;
cursor: pointer;
font-family: var(--serif);
font-size: 32px;
line-height: .95;
font-weight: 400;
text-align: left;
color: #222;
white-space: nowrap; /* the labels do not wrap; the menu keeps one row */
transition: border-color .25s;
}
.lb-tabs__link.is-active { border-bottom-color: var(--ink); }
/* 1fr / 2.2fr — the text column is deliberately the minority share. */
.lb-tabs__pane {
display: none;
align-items: center;
gap: 64px;
margin-top: 64px;
}
.lb-tabs__pane.is-active { display: flex; }
/* The text column is a FIXED 364px and the media takes whatever is left —
not a 1 : 2.2 ratio. Measured: media is 812 / 772 / 592 at 1512 / 1280 / 1100,
which is exactly (container - 364 - 64) each time. */
.lb-tabs__text { flex: 0 0 364px; }
/* Radius on the WRAPPER with overflow:clip, not on the image — that is how the
design does it, and it keeps a real video clipped to the same corner. */
.lb-tabs__media { flex: 1 1 auto; position: relative; border-radius: 40px; overflow: clip; }
.lb-tabs__media img { display: block; width: 100%; height: auto; }
.lb-tabs__media::after {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: clamp(56px, 12%, 120px);
aspect-ratio: 3 / 2;
pointer-events: none;
background-color: rgba(30, 27, 23, .42);
-webkit-mask: var(--vm) center / contain no-repeat;
mask: var(--vm) center / contain no-repeat;
--vm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='1.5' y='3.5' width='22' height='17' rx='3.5'/%3E%3Cpath d='M23.5 9.5 L34.5 4.5 L34.5 19.5 L23.5 14.5 Z'/%3E%3C/svg%3E");
}
.lb-tabs__text h3 {
margin: 0;
font-family: var(--serif);
font-size: 48px;
line-height: 1.1;
font-weight: 400;
letter-spacing: normal; /* measured: no tracking on this one */
color: var(--ink-warm);
}
.lb-tabs__text p {
margin: 16px 0 0;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
color: rgba(30, 27, 23, .74);
}
@media (max-width: 991px) {
.lb-tabsec { padding: 144px 40px 120px; }
.lb-tabs__pane { flex-direction: column; align-items: stretch; }
.lb-tabs__text { flex: none; max-width: 560px; } /* constant once stacked */
/* Below 992 the labels DO wrap to two rows — nowrap is a desktop-only
behaviour, and leaving it on made every tab a single 57px line. */
.lb-tabs__link { padding: 16px 0; white-space: normal; }
}
@media (max-width: 767px) {
.lb-tabsec { padding: 96px 20px 80px; }
.lb-tabsec h2 { font-size: 40px; }
.lb-tabsec__support { font-size: 18px; }
.lb-tabs__link { font-size: 24px; padding: 16px 0; }
.lb-tabs__text h3 { font-size: 32px; }
.lb-tabs__media { border-radius: 24px; }
.lb-tabs__pane { gap: 32px; }
}
@media (max-width: 479px) {
.lb-tabs__link { font-size: 24px; }
}
/* ---- Validate: the green block standing on its own ------------------- */
/* Same ground and cards as Merge; it is not inside a blue band, so the
radius and the 128px top gap live here. */
.lb-green--solo {
/* Rides ABOVE the paper sheets. They bleed by exactly one corner radius so
a rounded block never reveals bare page ground through its cut-out — but
the sheets come later in the document, so without this they paint over
this block's corners and it reads as a square-edged band. */
position: relative;
z-index: 1;
border-radius: var(--panel-radius);
padding: 128px 40px 112px;
}
.lb-green--solo .lb-green__copy { max-width: none; }
.lb-green--solo h2 { width: fit-content; } /* one line, 519 wide */
.lb-green--solo .lb-green__support { max-width: 480px; }
.lb-btn-paper {
display: inline-block;
margin-top: 24px;
padding: 16px 24px;
border: 1px solid var(--paper); /* measured 50 tall, not 48 */
border-radius: 8px;
background: var(--paper);
font-size: 16px;
line-height: 1;
font-weight: 600;
color: var(--bottle-green);
text-decoration: none;
transition: background-color .25s;
}
.lb-btn-paper:hover { background: var(--paper-warm); }
.lb-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) {
.lb-green--solo { padding: 96px 40px; }
.lb-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.lb-green--solo { padding: 72px 20px; }
.lb-cards--3 { grid-template-columns: 1fr; }
}
/* ---- Export: split layout again, but STRETCHED ----------------------- */
/* Group centres its columns; this one stretches, so the media panel grows to
the copy column's height instead of keeping its own ratio. Gap is 112, not
Group's 128. Same component, two genuinely different alignments.
The sheet is ON this section, not wrapping it, so the padding has to carry
the bleed as well as the section's own 112. */
.lb-split--stretch { padding: calc(var(--panel-radius) + 112px) 40px; }
.lb-split--stretch .lb-split__grid { gap: 112px; align-items: stretch; }
/* The panel is NOT stretched — it holds a near-square aspect ratio at every
width, and the grid row takes whichever of panel or copy is taller. That
single fact explains all of it: 682 at 1512 (panel wins), 666 at 1280 (copy
wins), 692 at 1100 (copy wins again). I first built this as a stretch with
an out-of-flow image, which matched at 1512 and was wrong everywhere else.
The image is absolute so it crops to the ratio instead of setting it. */
.lb-split--stretch .lb-panel {
align-self: start;
position: relative;
aspect-ratio: 677 / 682;
border-radius: 40px;
overflow: clip;
}
.lb-split--stretch .lb-panel__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* No trailing margin. I added one to explain a 16px gap at 1512, but that gap
was the PANEL being taller than the copy, not the accordion being longer.
The margin then made the copy column 16px too tall at 1100 and 1280, where
the copy is the one that wins. Same accordion as Group. */
.lb-split--stretch .lb-acc { margin-top: 56px; }
.lb-btn-warm {
display: inline-block;
margin-top: 24px;
padding: 16px 24px;
border: 1px solid var(--paper-warm);
border-radius: 8px;
background: var(--paper-warm);
font-size: 16px;
line-height: 1;
font-weight: 600;
color: var(--ink-warm);
text-decoration: none;
transition: background-color .25s;
}
.lb-btn-warm:hover { background: #DED6C4; }
@media (max-width: 991px) { .lb-split--stretch { padding: calc(var(--panel-radius) + 96px) 40px; } }
@media (max-width: 767px) {
.lb-split--stretch { padding: calc(var(--panel-radius) + 72px) 20px; }
.lb-split--stretch .lb-panel { border-radius: 24px; }
}
/* ======================================================================
CLOSING BLOCK — dusty-cobalt uncoated stock
====================================================================== */
.lb-close {
isolation: isolate;
position: relative;
z-index: 1; /* above the paper sheets, same reason as .lb-green--solo */
border-radius: 80px;
padding: 268px 40px 200px;
text-align: center;
color: var(--paper);
/* PRE-COMPENSATED ground. The grain below is soft-light and the turbulence
tile sits above 50% grey, so it lightens whatever it covers by ~9 per
channel. #5369AD painted here would composite to a washed-out pastel;
#4A5FA5 composites to the cobalt that was approved. Re-solve by
measurement if the tile or the opacity changes. */
background:
radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .055), transparent 38%),
radial-gradient(circle at 84% 82%, rgba(25, 31, 70, .15), transparent 46%),
#4A5FA5;
}
/* Grain at .70, not the .038 a photographic grain file would want: procedural
turbulence is far lower contrast, and .038 measured a 0.07 change against a
flat ground — nothing. .70 lands at 1.82, matching the soft-blue section.
The two bottle-green blocks are deliberately left flat (owner ruling):
soft-light cannot register on a ground that dark. */
.lb-close::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
opacity: .70;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cg)'/%3E%3C/svg%3E");
background-size: 220px 220px;
}
.lb-close__inner { position: relative; z-index: 1; }
/* Fluid so TWO ROWS hold at every width, not just desktop. The longest
sentence measures 10.24x its font size in Source Serif 4, so dividing the
available column by 10.6 keeps it on one row with margin. RE-SOLVE if the
serif changes or this headline gets longer. */
.lb-close h2 {
width: fit-content; /* 1229 — the longest row, not the full 1240 cap */
max-width: 1240px;
margin: 0 auto;
font-family: var(--serif);
font-size: min(120px, calc((100vw - 80px) / 10.6));
line-height: .85;
font-weight: 400;
letter-spacing: -.03em;
color: var(--paper);
}
.lb-close h2 .lb-line { display: block; } /* one sentence per row */
.lb-close__support {
max-width: 620px;
margin: 64px auto 0;
font-size: 20px;
line-height: 1.3;
font-weight: 500;
color: rgba(242, 239, 230, .82);
}
.lb-close__cta { margin-top: 24px; }
.lb-close .lb-btn {
background: var(--paper);
border-color: var(--paper);
color: #465A99;
}
.lb-close .lb-btn:hover { background: var(--paper-warm); border-color: var(--paper-warm); color: #3F518A; }
/* ======================================================================
FOOTER — one line on paper
====================================================================== */
.lb-footer { padding: 80px 40px 50px; }
.lb-footer__row {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: var(--container);
margin: 0 auto;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
color: var(--ink);
}
.lb-footer__row a { color: inherit; text-decoration: none; }
.lb-footer__row a:hover { text-decoration: underline; }
@media (max-width: 991px) {
.lb-close { padding: 147px 40px 109px; }
}
@media (max-width: 767px) {
.lb-close { border-radius: 40px; padding: 98px 20px 73px; }
.lb-close__support { font-size: 18px; }
.lb-footer { padding: 80px 20px 50px; }
}
@media (max-width: 479px) {
.lb-close { padding: 96px 20px 72px; }
}
/* ---- mobile nav ------------------------------------------------------
The links were simply hidden below 767 with no way to reach them — a real
defect, not a design choice. A button reveals them in a panel under the bar. */
/* NOT position:relative here. The nav is position:sticky further up, and a
later `relative` silently overrode it — the bar stopped following the page.
sticky already establishes a containing block for the absolutely-positioned
panel below, so nothing extra is needed. */
.lb-nav__toggle {
display: none;
flex: none;
width: 40px;
height: 40px;
margin-left: auto;
padding: 0;
border: 2px solid var(--ink);
border-radius: 8px;
background: var(--paper);
cursor: pointer;
}
.lb-nav__toggle span,
.lb-nav__toggle span::before,
.lb-nav__toggle span::after {
display: block;
width: 18px;
height: 2px;
margin: 0 auto;
background: var(--ink);
transition: transform .2s ease, opacity .2s ease;
}
.lb-nav__toggle span { position: relative; }
.lb-nav__toggle span::before,
.lb-nav__toggle span::after { content: ""; position: absolute; left: 0; }
.lb-nav__toggle span::before { top: -6px; }
.lb-nav__toggle span::after { top: 6px; }
.lb-nav__toggle[aria-expanded="true"] span { background: transparent; }
.lb-nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.lb-nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 767px) {
.lb-nav__toggle { display: block; }
/* The desktop CTA moves into the panel so the bar stays one clean row. */
.lb-nav > .lb-btn { display: none; }
.lb-nav__links {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 16px;
border-radius: 12px;
background: var(--paper);
box-shadow: 0 8px 24px rgba(30, 27, 23, .12);
}
.lb-nav__links.is-open { display: flex; }
.lb-nav__links a { padding: 10px 4px; font-size: 18px; }
.lb-nav__links .lb-btn { margin-top: 8px; text-align: center; }
}
/* ---- about page ------------------------------------------------------ */
.lb-about { padding: 160px 40px 200px; }
.lb-about__copy {
max-width: 864px;
margin: 0 auto;
font-family: var(--serif);
font-size: 32px;
line-height: 1.3;
font-weight: 400;
letter-spacing: -.03em;
color: var(--ink-warm);
}
.lb-about__copy p { margin: 0 0 41.6px; } /* one line of leading between paragraphs */
.lb-about__copy p:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .lb-about { padding: 128px 40px 160px; } }
@media (max-width: 767px) {
.lb-about { padding: 96px 20px 120px; }
.lb-about__copy { font-size: 24px; }
.lb-about__copy p { margin-bottom: 31.2px; }
}
/* The panel carries its own CTA for mobile; hide it on desktop, where the bar's
own button is visible instead. */
@media (min-width: 768px) { .lb-nav__links .lb-btn { display: none; } }
/* ---- the panel: every state stacked in ONE grid cell ------------------
This is the whole answer to "will the page collapse". All three panes
occupy the same cell, so the container is always as tall as the TALLEST
one and the height cannot change when the slider moves. Inactive panes are
hidden with visibility, not display, so they keep contributing that height.
Measured before this change, the old tabs jumped 19px at 991 and 18px at
767 between states. */
.lb-tabs__panes { display: grid; margin-top: 64px; }
.lb-tabs__panes > .lb-tabs__pane {
grid-area: 1 / 1;
margin-top: 0;
display: flex;
visibility: hidden;
opacity: 0;
transition: opacity .25s ease;
}
.lb-tabs__panes > .lb-tabs__pane.is-active { visibility: visible; opacity: 1; }
@media (max-width: 767px) {
.lb-tabs__panes { margin-top: 32px; }
}
/* ---- real footage in the Attach panel --------------------------------
The slot keeps its 812 width; the height follows the clip's own ratio so
nothing is cropped. No "video coming soon" mark over real footage. */
.lb-tabs__media.has-video {
position: relative;
aspect-ratio: 1624 / 1020;
border-radius: 40px;
overflow: clip;
}
.lb-tabs__media.has-video::after { content: none; }
.lb-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sound toggle. Browsers will not autoplay video with audio, so the clip
starts muted and this is the opt-in. A real focusable button, not an
overlay. */
.lb-sound {
position: absolute;
right: 16px;
bottom: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid rgba(30, 27, 23, .82);
border-radius: 999px;
background: rgba(242, 239, 230, .92);
font-family: var(--sans);
font-size: 13px;
line-height: 1;
font-weight: 600;
color: var(--ink-warm);
cursor: pointer;
transition: background-color .2s;
}
.lb-sound:hover { background: var(--paper); }
.lb-sound:focus-visible { outline: 2px solid var(--icon); outline-offset: 3px; }
.lb-sound__icon {
width: 15px; height: 15px;
background-color: currentColor;
-webkit-mask: var(--m) center / contain no-repeat;
mask: var(--m) center / contain no-repeat;
--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cline x1='22' y1='9' x2='16' y2='15'/%3E%3Cline x1='16' y1='9' x2='22' y2='15'/%3E%3C/svg%3E");
}
.lb-sound[aria-pressed="true"] .lb-sound__icon {
--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { .lb-tabs__media.has-video { border-radius: 24px; } }
/* ---- attachment picker, in the panel's own heading slot ---------------
The heading IS the control. Sized 32px rather than the h3's 48 so the
longer labels fit the 364px column without truncating — a