/s (n).png the same way.
ONE THING RUNS THROUGH ALL OF IT. Every component below was reaching this
breakpoint on the LOWER BOUND OF ITS DESKTOP CLAMP — a 14px body, a 15px
card heading, a 30px numeral — because a clamp's floor is a guard against
a narrow column, not a phone design. The frames draw a phone type scale a
third to three times bigger, and it is consistent across the twelve pages:
body copy and list items 17 / 1.5
card and row headings (Oswald) 23, or 25 where it heads a group
small meta labels 14-15
an Anton block title 40
a service numeral 50
a values numeral 100 (the stat-figure token)
So the sizes below repeat because the frames repeat them, not because one
value was pasted around. Where a frame departs from its neighbours the
departure is noted at the rule.
WHAT IS DELIBERATELY NOT COPIED. The frames disagree with each other about
two things, and following each one exactly would mean hard-coding a
section's identity into the stylesheet:
* SECTION-HEAD ALIGNMENT. Ten frames centre `section_head`, four
left-align it (destination s (3), audio s (2), gallery s (2),
contact s (5)) — including two on the SAME page as a centred one
(audio s (2) against s (6)). Centred is both the majority and the
desktop composition, so it stays.
* SECTION-HEAD SIZE. The dominant measure is 67, drawn that way on
eighteen frames across nine pages, which is the .nm-h2 value already
set above. Six frames run 60 and one runs 40. Same call.
The one departure that IS copied is the destination page's statement,
which is drawn at twice the size the other four statement pages use —
see the note there. */
/* ── Statement block, phone ─────────────────────────────────────────────
The centred claim with the monogram over it: about, gallery, inventory
and contact all draw the headline at 34 on 1.1, against the 67 .nm-h2
hands it. At 67 a five-line claim is a screen and a half of headline
before the page has said anything — inventory s (2) fits the same
sentence in three lines and still has the logo strip and the next section
head on the same screen. */
.nm-statement { padding-block: calc(46 * var(--nm-u)); }
.nm-statement__mark {
width: calc(32 * var(--nm-u));
margin-bottom: calc(38 * var(--nm-u));
}
.nm-statement__title {
font-size: calc(34 * var(--nm-u));
line-height: 1.1;
margin-bottom: calc(25 * var(--nm-u));
}
.nm-statement__body {
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
.nm-statement__quote {
margin-top: calc(25 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
}
/* THE DESTINATION PAGE'S IS THE H2 SIZE, and it is the one per-page override
in this block. Its frame (s (2)) draws the same component at 67 — six
lines of it — where the other four statement pages draw 35. That is not a
2px reading difference to average away: it is the difference between a
claim that opens the page and one that sits under the fold. Scoped to the
body class rather than fixed in the component, because four pages against
one is what makes 35 the component's value and this the exception. */
.nm--dest .nm-statement__title {
font-size: calc(67 * var(--nm-u));
line-height: 1;
}
/* ── Split statement, phone ─────────────────────────────────────────────
The other statement shape — heading in one column, argument in the other.
Stacked it CENTRES ITS HEADING and keeps the argument left: six of the
seven frames that draw it put the headline on the page's axis (audio,
lighting, led-walls, wedding, staging, event-type) and every one of them
leaves the paragraphs and the pull quote ranged left. Corporate s (2) is
the one that keeps the heading left, and it is outnumbered.
49 rather than the section-head 67, and that one IS consistent: all seven
frames agree on it within a pixel. */
.nm-stmt2__grid { row-gap: calc(25 * var(--nm-u)); }
.nm-stmt2__title {
padding-top: 0;
font-size: calc(49 * var(--nm-u));
line-height: 1.06;
text-align: center;
}
/* The seventh frame. Corporate s (2) ranges "BUILT ON / EXPERIENCE / THAT
SHOWS" left against the same gutter its paragraphs start from, so the
caller asks for it (`align="left-phone"`) instead of the majority above
deciding for every page. See the macro note in _shared.html. */
.nm-stmt2--left-phone .nm-stmt2__title { text-align: left; }
/* "FIXTURE IN OUR RIG." IS THE LONGEST SECOND LINE ANY OF THESE SEVEN
HEADLINES CARRIES — 6.78x its font size, where the 49 token assumes
something shorter. With the phone break in place (see lighting.html) the
token ran it past the gutter below 340 and the words fell to three lines
with "RIG." alone on the last.
11.9vw is the frame's own proportion: s (2) runs that line to 256 of a 271
column, 94%, and this holds it at 93% of ours at every phone width. A page
hook, not a token — the other six statement headlines fit the 49 as drawn,
and this one is long, not mis-sized. */
.nm--lighting .nm-stmt2__title { font-size: min(calc(49 * var(--nm-u)), 11.9vw); }
/* Audio s (2), the same shape and the same cause: "FULL PROFESSIONAL" is
7.0x its font size, the 49 token runs it to 343 in a 340 column, and the
headline fell to three lines below 360 with "FULL" alone on the first. The
frame sets that line at 97% of its column; 11.5vw holds ours at 92%, which
leaves the descender-free caps a little air rather than pressing them into
the gutter. */
.nm--audio .nm-stmt2__title,
.nm--staging .nm-stmt2__title { font-size: min(calc(49 * var(--nm-u)), 11.5vw); }
/* Staging s (2) is the audio headline with one word swapped, and it measures
as one: "FULL PROFESSIONAL" and "STAGING INVENTORY" are both 7.0x, the
frame draws both lines to 259 of a 276 column, and at the token the phone
version fell to FOUR lines below 360 — one word apiece. The two pages
share the cap because they are the same headline, not because one was
copied onto the other. */
/* THE SAME PROBLEM ONE SECTION DOWN. "LIGHTING TEAM" is 5.23x its font size
and the 67 token runs it to 350 in a 340 column, so the pair split and the
head fell to four lines — WHAT OUR / LIGHTING / TEAM / DELIVERS — where
s (2) draws three. 14.7vw is that frame's proportion: it sets its second
line to 240 of a 271 column, 89%, and this holds ours at 88%. The three
lines then fall out of the measure rather than being forced with breaks:
at this size neither "WHAT OUR LIGHTING" (6.86x) nor "LIGHTING TEAM
DELIVERS" (8.64x) comes close to fitting, so the words can only break
where the frame breaks them. */
/* "PROFESSIONAL" IS THE WIDEST SINGLE WORD ON THE SITE'S SECTION HEADS —
5.15x its font size, where "MANAGEMENT" is 5.03 — and it appears twice on
this page, over "audio" and over "lighting". At the 67 token it measured
289 against a 276 column at 320, so .nm-h1/.nm-h2's overflow-wrap did what
it is there for and split the word: PROFESSIONA / L.
16vw is the frames' own proportion (s (5) and s (9) run the word to 264 of
a 272 column, 97%; this holds ours at 94-96%) and it is applied to the
page rather than to the two heads that overflow, so all five section heads
here stay the same size as each other. */
.nm--inventory .nm-h2 { font-size: min(calc(67 * var(--nm-u)), 16vw); }
/* THREE FRAMES, ONE SIZE. Lighting s (2), audio s (2) and staging s (2) all
draw the services head at a 40px cap on a ~310 frame — the same size, with
the line lengths differing only because the words do ("LIGHTING TEAM"
fills 89% of the column, "STAGING TEAM" 84%, "AUDIO TEAM" 72%). So they
share the cap rather than carrying a number each. It is still a page hook
and not a token: destination s (3) and corporate s (4) draw their own
services heads at the full 67. */
.nm--lighting .nm-head--left-phone .nm-h2,
.nm--audio .nm-head--left-phone .nm-h2,
.nm--staging .nm-head--left-phone .nm-h2 { font-size: min(calc(67 * var(--nm-u)), 14.7vw); }
.nm-stmt2__body { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
.nm-stmt2__body p + p { margin-top: calc(17 * var(--nm-u)); }
.nm-stmt2__quote {
margin-top: calc(25 * var(--nm-u));
padding-left: calc(12 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
}
/* ── Four-up media strip, phone ─────────────────────────────────────────
ONE TILE PER SCREEN WITH A DOT ROW UNDER IT, which is a different object
from the peeking scroller the tablet breakpoint leaves behind. The frame
(corporate s (3), wedding s (3)) draws a single square picture filling the
column and a row of dots beneath — so the strip stops reading as a row
that happens to be cut off and starts reading as the carousel it is.
The dots are built by norman.js and the row is absent without it, so the
strip degrades to exactly what it is underneath: a swipeable scroller. */
.nm-media4 {
gap: calc(12 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-media4__item { flex: 0 0 100%; }
/* The desktop tile is a 316x350 portrait, four to a row. At one to a row the
frame squares it off — a full-column portrait would be 430px tall on a
390 phone and push the dots off the screen. */
.nm-media4__media { aspect-ratio: 1 / 1; }
/* ── Numbered service grid, phone ───────────────────────────────────────
THE CARD GETS ITS BORDER BACK. On desktop these are padded boxes with a
transparent fill and no stroke — the padding alone spaces two cards' copy
apart, which is all a row of three needs. Stacked one per row there is no
neighbour, so the padding came off at this breakpoint and the cards became
six undifferentiated stacks. Every frame that draws them (audio s (3),
destination s (4), lighting, led-walls, staging, wedding) draws a hairline
box with 26 of padding instead, on the 8px radius the desktop card already
carries. So the padding comes back and the stroke comes with it. */
.nm-numgrid {
gap: calc(20 * var(--nm-u));
margin-top: calc(33 * var(--nm-u));
}
.nm-numgrid:not(.nm-numgrid--4) .nm-numcard {
padding: calc(26 * var(--nm-u));
border: 1px solid var(--nm-line-soft);
}
.nm-numcard__num {
font-size: calc(50 * var(--nm-u));
margin-bottom: calc(20 * var(--nm-u));
}
.nm-numcard__title {
font-size: calc(21 * var(--nm-u));
line-height: 1.25;
margin-bottom: calc(17 * var(--nm-u));
}
.nm-numcard__body { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
/* ── Values grid, phone ─────────────────────────────────────────────────
The about page's four numbered values. Same card, but the numeral is the
STAT FIGURE, not the service numeral: about s (3) and s (4) draw it at
100, the size the homepage's "500+" runs at, which is why this is the one
place the two variants of .nm-numcard part company on more than a column
count. The hairline between cards is the frame's too. */
.nm-numgrid--4 .nm-numcard { padding-block: calc(33 * var(--nm-u)); }
.nm-numgrid--4 .nm-numcard:first-child { padding-top: 0; }
.nm-numgrid--4 .nm-numcard__num {
font-size: calc(100 * var(--nm-u));
margin-bottom: calc(24 * var(--nm-u));
}
/* ── Advantage cards, phone ─────────────────────────────────────────────
destination s (8)/s (9): the icon runs 40, not the 32 the desktop clamp
bottoms out at, and whitespace still does the separating — no rules, same
as the desktop row. */
.nm-adv {
gap: calc(33 * var(--nm-u));
margin-top: calc(33 * var(--nm-u));
}
.nm-adv__icon {
width: calc(40 * var(--nm-u));
margin-bottom: calc(17 * var(--nm-u));
}
.nm-adv__title {
font-size: calc(21 * var(--nm-u));
margin-bottom: calc(14 * var(--nm-u));
}
.nm-adv__body { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
/* ── Location list, phone ───────────────────────────────────────────────
The rows already drop their description under the pinned name higher up
in this block; this is the type scale that goes with it. */
.nm-locs__lede { font-size: calc(17 * var(--nm-u)); }
/* "DESTINATIONS WE OPERATE IN": the same width guard as .nm-services below,
for the same reason — see the long note there. This head is already left
off the gutter (it is a bare eyebrow + h2 in the shell, not a .nm-head),
so only the size is at issue.
THE CAP IS NOT THE SAME NUMBER because it is derived, not copied: it is
the widest LINE's ink width divided into the 87.2vw column, and the lines
here are set by the
in the template rather than by where the words
happen to fall. Measured against Anton at this tracking:
"MANAGEMENT" 5.03x its font size (the .nm-services line)
"DESTINATIONS" 4.87x
"WE OPERATE IN" 5.27x <- this head's widest line
So 15.3vw, which holds that line about 20px clear of the gutter at 320 —
the width where --nm-u has clamped and the token alone was running
"DESTINATIONS" to exactly the column with nothing to spare. It is a ninth
smaller than the token, which is what a second word on the second line
costs; the alternative break ("DESTINATIONS WE" / "OPERATE IN") is 6.19x
and would cost a quarter. */
.nm-locs__title { font-size: min(calc(67 * var(--nm-u)), 15.3vw); }
.nm-locs__cols {
gap: calc(14 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-loc {
column-gap: calc(14 * var(--nm-u));
padding-block: calc(15 * var(--nm-u));
}
.nm-loc__pin { width: calc(26 * var(--nm-u)); }
.nm-loc__name { font-size: calc(26 * var(--nm-u)); }
.nm-loc__body { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
/* ── Process steps, phone ───────────────────────────────────────────────
THE STEP TURNS ON ITS SIDE. Higher up in this block the five columns
become five rows, which leaves the disc on its own line above the heading
with the page's full width beside it doing nothing. Every frame that draws
the steps (audio s (7)/s (8), lighting, staging, corporate, wedding,
event-type, contact s (5)) puts the disc in its own column with the
heading beside it and the paragraph under the heading — so the disc spans
both rows of a two-column grid and the text keeps one measure.
The hairlines go. They divide five columns on desktop; between stacked
rows the frames draw nothing but space. */
.nm-steps {
grid-template-columns: minmax(0, 1fr);
row-gap: calc(28 * var(--nm-u));
margin-top: calc(33 * var(--nm-u));
}
.nm-step {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: calc(22 * var(--nm-u));
padding: 0;
}
.nm-step + .nm-step { border-top: 0; }
.nm-step:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
.nm-step__num {
grid-row: span 2;
align-self: start;
width: calc(40 * var(--nm-u));
height: calc(40 * var(--nm-u));
margin-bottom: 0;
font-size: calc(15 * var(--nm-u));
}
/* Oswald regular at 21 rather than .nm-label's medium on .035em tracking —
the same step the why-choose-us claims and the service cards make at this
breakpoint. */
.nm-step__title {
align-self: center;
margin-bottom: calc(9 * var(--nm-u));
font-size: calc(21 * var(--nm-u));
font-weight: 400;
line-height: 1.25;
letter-spacing: 0;
}
.nm-step__body { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
/* ── Filter pills, phone ────────────────────────────────────────────────
THEY WRAP, THEY DO NOT SCROLL. An earlier pass made this row a horizontal
scroller on the reasoning that eight pills would wrap into four ragged
rows and push the grid off the first screen. Gallery s (2) draws exactly
those four rows and keeps them — every category is visible without a
gesture, which on a filter row is the point of it, and a scroller also
hides that there are more categories at all.
So the bleed, the nowrap and the overflow all come off, and the pills grow
to the frame's tap size. */
.nm-filters {
flex-wrap: wrap;
justify-content: flex-start;
overflow-x: visible;
margin-inline: 0;
padding-inline: 0;
gap: calc(12 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-filters__pill {
padding: calc(9 * var(--nm-u)) calc(19 * var(--nm-u));
font-size: calc(15 * var(--nm-u));
}
/* The rule after "ALL EVENTS" divides a single row. Wrapped, it is a 1px
mark floating in the middle of the first line, and the frame has none. */
.nm-filters__sep { display: none; }
/* ── Project cards, phone ───────────────────────────────────────────────
gallery s (3)-s (5) and the our-works grid: the desktop card with the
frame's type scale and a slightly wider crop. */
.nm-projects {
gap: calc(20 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-proj {
padding: calc(17 * var(--nm-u));
border-radius: calc(8 * var(--nm-u));
}
.nm-proj__media { aspect-ratio: 3 / 2; }
.nm-proj__cat {
margin-top: calc(17 * var(--nm-u));
padding: calc(7 * var(--nm-u)) calc(15 * var(--nm-u));
font-size: calc(13 * var(--nm-u));
}
.nm-proj__title {
margin-top: calc(14 * var(--nm-u));
font-size: calc(21 * var(--nm-u));
}
.nm-proj__meta {
margin-top: calc(6 * var(--nm-u));
font-size: calc(16 * var(--nm-u));
}
.nm-proj__body {
margin-top: calc(14 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
.nm-projects__empty { font-size: calc(17 * var(--nm-u)); }
/* ── Spec blocks, phone ─────────────────────────────────────────────────
The LED-walls kit sections. Stacked, the block is a 40px Anton title over
its rule and then one column of pairs — led-walls s (6)/s (7) run the
title at 40 against the 19 the desktop clamp bottoms out at, which is the
difference between a section title and a paragraph in bold. The pair
labels drop .nm-label's tracking for the same reason the step titles do:
at 21 the letterspacing that makes a 13px label legible reads as a gap. */
.nm-specs { gap: calc(46 * var(--nm-u)); margin-top: calc(30 * var(--nm-u)); }
.nm-spec { row-gap: calc(25 * var(--nm-u)); }
.nm-spec__title { font-size: calc(40 * var(--nm-u)); }
.nm-spec__title::after { margin-top: calc(17 * var(--nm-u)); }
.nm-spec__pairs {
gap: calc(22 * var(--nm-u));
margin-top: calc(22 * var(--nm-u));
}
.nm-spec__pairs dt {
font-size: calc(21 * var(--nm-u));
font-weight: 400;
letter-spacing: 0;
}
.nm-spec__pairs dd {
margin-top: calc(6 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
/* ── Format profile, phone ──────────────────────────────────────────────
event-type s (4)/s (6). The labelled rows keep their hairlines — unlike
the process steps, these are a table of five comparable answers and the
rules are what make them scan as one. The label runs 25, a size up from
everything else at this breakpoint, because it is the only thing marking
where one answer ends and the next begins. */
.nm-format__grid {
row-gap: calc(25 * var(--nm-u));
margin-top: calc(25 * var(--nm-u));
}
.nm-format__photo { aspect-ratio: 16 / 11; }
.nm-format__rows dt {
font-size: calc(21 * var(--nm-u));
letter-spacing: 0;
}
.nm-format__rows dd {
margin-top: calc(10 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
.nm-format__row { padding-block: calc(20 * var(--nm-u)); }
/* ── Kit categories, phone ──────────────────────────────────────────────
The inventory page's twenty categories. inventory s (4)/s (5) put a
HAIRLINE UNDER EACH CATEGORY HEAD that the desktop four-column layout
does not have — with four columns the whitespace between them separates
the categories, and stacked there is nothing left doing that job. */
.nm-kits {
gap: calc(33 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-kit__head {
gap: calc(18 * var(--nm-u));
margin-bottom: calc(17 * var(--nm-u));
padding-bottom: calc(14 * var(--nm-u));
border-bottom: 1px solid var(--nm-line-soft);
}
/* THE em NEVER REACHED THE HEADING IT WAS MEANT TO TRACK. .nm-kit__icon is
1.15em, and the note beside it says that is so the icon follows the title
next to it — but the two are siblings, so the em resolves against
.nm-kit__head's inherited 16px, not the title's size. Every category icon
on this page was drawing at 18.4 whatever the heading did.
The frames draw it at 23 on a 307-wide frame (s (4)), 29 against the 390
--nm-u is referenced to, which is also where the other phone icons sit:
the location pin is 26, the why-list check 25, the assurance tick 21. So
the size is stated here rather than inherited by accident. */
.nm-kit__icon {
width: calc(29 * var(--nm-u));
height: calc(29 * var(--nm-u));
}
.nm-kit__title {
font-size: calc(20 * var(--nm-u));
letter-spacing: .02em;
}
.nm-kit__items dt {
font-size: calc(19 * var(--nm-u));
font-weight: 400;
line-height: 1.3;
}
.nm-kit__items dd {
margin-top: calc(6 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
.nm-kit__item + .nm-kit__item { margin-top: calc(20 * var(--nm-u)); }
/* ── Photo band, phone ──────────────────────────────────────────────────
IT STOPS BLEEDING. On desktop this is a full-width photograph between two
kit sections, and the bleed is what makes it a break rather than another
card. inventory s (3) and s (5) inset it to the page gutter and round it,
which is the same photograph doing the same job in a column where a
full-bleed strip would be the only thing on the page touching the screen
edges. The 3:2 the earlier pass set is also too tall here: the frames draw
roughly 12:7.
The width is a calc rather than `auto` plus margins, because the band is
an ![]()
carrying intrinsic width/height attributes on the pages where a
photograph exists: `width: auto` there resolves to the file's own 1341,
which max-width:100% then caps at the CONTAINING BLOCK's width — so the
picture came out full-width with the gutter added outside it, and the
inventory page gained 25px of horizontal scroll. */
.nm-band {
width: calc(100% - 2 * var(--nm-gutter));
margin-inline: auto;
aspect-ratio: 12 / 7;
border-radius: calc(8 * var(--nm-u));
}
.nm-band--pending { border-radius: calc(8 * var(--nm-u)); }
/* ── Capability lists, phone ────────────────────────────────────────────
about s (4)/s (5). Three groups of ticked items, one under the other, with
a rule between groups — the same reasoning as the kit heads: three columns
are separated by the space between them, and stacked they are not. */
.nm-caps {
gap: calc(33 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-caps > section + section {
padding-top: calc(33 * var(--nm-u));
border-top: 1px solid var(--nm-line-soft);
}
.nm-caps__title {
margin-bottom: calc(17 * var(--nm-u));
font-size: calc(21 * var(--nm-u));
}
.nm-caps__item {
padding-left: calc(26 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
.nm-caps__item + .nm-caps__item { margin-top: calc(13 * var(--nm-u)); }
/* The chevron grows with the line it marks; at 17px copy the desktop's
3.5x5 triangle is a speck. */
.nm-caps__item::before {
left: calc(3 * var(--nm-u));
border-width: calc(5 * var(--nm-u)) 0 calc(5 * var(--nm-u)) calc(7 * var(--nm-u));
}
/* ── Team cards, phone ──────────────────────────────────────────────────
about s (6)/s (7). The portrait goes SQUARE — the desktop crop is a
253x176 landscape, three to a row, and the frame draws a 231x231 square
filling the card. The name is the biggest type in the card by a long way,
which is what makes a stack of three read as three people rather than as
three paragraphs. */
.nm-team {
gap: calc(20 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-team-card {
padding: calc(24 * var(--nm-u));
border-radius: calc(8 * var(--nm-u));
}
.nm-team-card__photo { aspect-ratio: 1 / 1; }
.nm-team-card__name {
margin-top: calc(20 * var(--nm-u));
font-size: calc(32 * var(--nm-u));
}
.nm-team-card__role {
margin-top: calc(6 * var(--nm-u));
font-size: calc(20 * var(--nm-u));
}
.nm-team-card__bio {
margin-top: calc(14 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
/* ── Enquiry form, phone ────────────────────────────────────────────────
contact s (2)-s (4). The card loses the desktop's 44px inset — at 390 that
is a quarter of the column spent on padding — and every control grows to
the frame's 55px tap target.
NOTHING HERE MAY GO BELOW 16px. iOS Safari zooms the page when a field
smaller than that takes focus, and the zoom does not come back; the frame
draws 17, so this is not a compromise, but it is the floor. */
.nm-form-sec__head { margin-bottom: calc(28 * var(--nm-u)); }
.nm-form-card {
padding: calc(20 * var(--nm-u));
border-radius: calc(10 * var(--nm-u));
}
.nm-form__grid { gap: calc(20 * var(--nm-u)); }
.nm-form__label {
margin-bottom: calc(10 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
}
.nm-form__input,
.nm-form__select,
.nm-form__area {
padding: calc(16 * var(--nm-u));
border-radius: calc(8 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
}
.nm-form__select {
padding-right: calc(40 * var(--nm-u));
background-position: right calc(16 * var(--nm-u)) center;
}
.nm-form__area { min-height: calc(150 * var(--nm-u)); }
.nm-form__actions { margin-top: calc(24 * var(--nm-u)); }
.nm-form__consent {
margin-top: calc(18 * var(--nm-u));
font-size: calc(14 * var(--nm-u));
}
/* ── Direct-contact rows, phone ─────────────────────────────────────────
contact s (4)/s (5). Same shape as the desktop rows — icon in its own
column spanning the three text lines — at the frame's scale. */
.nm-direct__row {
column-gap: calc(16 * var(--nm-u));
padding-block: calc(22 * var(--nm-u));
}
.nm-direct__icon {
width: calc(30 * var(--nm-u));
margin-top: calc(3 * var(--nm-u));
}
.nm-direct__value {
margin-top: calc(8 * var(--nm-u));
font-size: calc(17 * var(--nm-u));
line-height: 1.5;
}
.nm-direct__note {
margin-top: calc(8 * var(--nm-u));
font-size: calc(16 * var(--nm-u));
line-height: 1.5;
}
/* ── Case study, phone ──────────────────────────────────────────────────
our-works s (3)-s (6). The meta rows already drop their value under the
label higher up in this block; this is the scale, plus the one thing the
frame changes about the write-up itself:
THE BLOCK LABELS ARE SET AS HEADINGS, NOT AS BOLD BODY. "THE BRIEF:",
"WHAT WE DELIVERED:", "OUTCOME:" are drawn in condensed caps in every
frame, where the desktop card runs them as 13px semibold Outfit. At the
desktop's size and beside a photograph the distinction barely registers;
stacked, three prose blocks with no visual break between them run
together, and the caps are what separates them. */
/* THE PHOTOGRAPH LEADS EVERY CASE. On desktop it sits beside the write-up
and alternates sides; the 1023px breakpoint stacks it and undoes the
alternation by putting it under the text on every case, so that the
picture never lands above the heading it belongs to. The phone frames
(our-works s (2), s (4), s (5), s (6)) put it ABOVE the eyebrow on all
three — the picture is what identifies the project, and a reader scrolling
past three long write-ups needs it at the top of each. So the order is
reversed here rather than merely un-alternated, and both cases have to be
named: the flip rule from 1023 is still in force otherwise. */
.nm-case__art,
.nm-case--flip .nm-case__art { order: -1; }
.nm-case__grid { row-gap: calc(25 * var(--nm-u)); }
/* 50, not the 67 .nm-h2 hands it. Measured off s (5), where "[ORGANISATION
NAME] ANNUAL AWARDS GALA" is three lines; at 67 it is five, and the meta
rows that identify the project drop off the screen under it. */
.nm-case__title {
font-size: calc(50 * var(--nm-u));
line-height: 1.02;
margin-block: calc(14 * var(--nm-u)) calc(22 * var(--nm-u));
}
.nm-case__meta { margin-bottom: calc(22 * var(--nm-u)); }
.nm-case__row {
column-gap: calc(12 * var(--nm-u));
padding-block: calc(14 * var(--nm-u));
}
.nm-case__icon { width: calc(20 * var(--nm-u)); }
.nm-case__row dt { font-size: calc(15 * var(--nm-u)); }
.nm-case__row dd { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
.nm-case__block + .nm-case__block { margin-top: calc(20 * var(--nm-u)); }
.nm-case__block-title {
margin-bottom: calc(8 * var(--nm-u));
font-family: var(--nm-font-cond);
font-size: calc(21 * var(--nm-u));
font-weight: 500;
letter-spacing: .02em;
text-transform: uppercase;
}
.nm-case__block-body { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
.nm-case__cta { margin-top: calc(24 * var(--nm-u)); }
.nm-case__photo { aspect-ratio: 7 / 5; }
/* ── Sub-block headings, phone ──────────────────────────────────────────
A HEADING THAT OPENS A SECTION IS 67; A HEADING INSIDE ONE IS NOT. The
eighteen `section_head` frames agree on 67 and that is what .nm-h2 sets
above, but three headings on these pages are not section heads — they sit
inside a section that already has one, or head a block within a page, and
the frames draw them at roughly 40:
gallery s (2) "Selected projects from our portfolio" 39
contact s (6) "Prefer to speak directly?" 40
event-type s (4) the format profile's own headline 47
They had no class of their own until now, which is why they were taking
.nm-h2 whole and running to four and five lines here. The one bare .nm-h2
that is NOT in this list is the contact page's "Send us your event brief"
(s (2)), which its frame draws at the full 67 — it opens its section the
way a section head does, so it keeps the token and needs no hook. */
.nm-projects__title { font-size: calc(39 * var(--nm-u)); }
.nm-direct__title { font-size: calc(40 * var(--nm-u)); }
.nm-format__title { font-size: calc(47 * var(--nm-u)); }
/* ── Assurance bar, phone ───────────────────────────────────────────────
ONE CLAIM AT A TIME, SWIPEABLE. Every frame that includes this band
(homepage s (7), about s (8), audio s (8), gallery s (6), inventory
s (13)) draws a single centred claim at ~21px, not the five wrapped 13px
ones the tablet breakpoint leaves behind — a claim that reads as a
guarantee rather than as small print.
Five of them at that size come to about 1400px, so a band that draws one
has to be able to reach the other four somehow. IT SCROLLS RATHER THAN
AUTO-PLAYING. A marquee was tried on this component once and removed as a
misreading of the desktop comp (see section 7); reintroducing one here
would put the same moving band back on the page, and a claim you have to
wait for is worse than one you can swipe to. Snapping one item per view
means a screenshot of this band shows exactly what the frames show, and
the remaining four are a thumb away.
Nothing here is load-bearing for the content: all five claims are in the
markup and in the accessibility tree either way. */
.nm-assure { padding-inline: 0; }
/* `flex-start` IS LOAD-BEARING, not tidying. The desktop row is
`space-between`, and a flex container whose content overflows under any
alignment but flex-start spills off the START edge as well as the end —
where scrolling cannot reach it. With five full-width items that put the
band's resting position on "24/7 Support" with the first two claims
stranded off-screen to the left, which is neither the frames' first item
nor anything a swipe could recover. */
.nm-assure__row {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 0;
}
.nm-assure__row::-webkit-scrollbar { display: none; }
.nm-assure__item {
flex: 0 0 100%;
justify-content: center;
scroll-snap-align: start;
gap: calc(9 * var(--nm-u));
padding-block: calc(9 * var(--nm-u));
font-size: calc(21 * var(--nm-u));
}
.nm-assure__icon { width: calc(21 * var(--nm-u)); }
/* ── Section heads and shared type, phone ───────────────────────────────
The lede under a section head is the same 17 as every other paragraph at
this breakpoint. */
.nm-head__lede { font-size: calc(17 * var(--nm-u)); line-height: 1.5; }
/* A head that is centred on desktop and left on a phone. Only the frames ask
for this — see the macro note in _shared.html for why it is per caller and
not a blanket flip of .nm-head at this width. The lede loses its auto
margins for the same reason .nm-head--left's does. */
.nm-head--left-phone { text-align: left; }
.nm-head--left-phone .nm-head__lede { margin-inline: 0; }
/* "FULL DESTINATION MANAGEMENT SERVICES" WAS BREAKING MID-WORD. The 67 token
above is a proportion of the viewport only while --nm-u is (332px to
507px); below 332 the unit clamps at .86px and the headline stops shrinking
while .nm-shell's 6.4vw gutters keep taking width off the column. At 320
that leaves "MANAGEMENT" about 11px wider than the line it sits on, and
.nm-h1/.nm-h2's overflow-wrap last resort does exactly what it is there to
do: it splits the word rather than the page. The word is the problem, not
the wrap.
So this headline is capped as a share of the viewport instead. 16.2vw is
the comp's own proportion — destination s (3) draws the line at ~62.5 on a
375 frame, 16.7vw — and it holds the longest word about 20px clear of the
gutter at every phone width, 320 included. `min()` keeps the 67 token in
charge at the wide end of the breakpoint, where it is the smaller of the
two and the frame's measured size. Scoped to this section because it is
the one head on the site with two eleven-letter words in it; the token
stays untouched for the other seventeen frames. */
.nm-services .nm-h2 { font-size: min(calc(67 * var(--nm-u)), 16.2vw); }
/* THE CENTRED CTA BAND'S BODY WAS 161px WIDE. .nm-cta__body is released to
full width further up this block, but `.nm-cta--center .nm-cta__body`
(section 13) carries a 47.43% cap on two classes, so it outranked the
single-class release and every page using the centred variant — audio,
lighting, staging, led-walls, event-type, wedding, corporate, gallery,
our-works — ran its closing paragraph in a 47%-wide ribbon down the middle
of the screen. The percentage is a proportion of a 1920 band; there is no
width to take a proportion of here. */
.nm-cta--center .nm-cta__body { max-width: none; }
}
/* ──────────────────────────────────────────────
34. Landing pages — corporate-events-2, led-walls-2, wedding-events-2
──────────────────────────────────────────────
Three quote pages built from new-design/*-design-for-*.jpg, which share one
layout and one type scale, so everything here is under `.nm-lp` (the body
class) and the per-page differences are custom properties. The components
are in templates/_lp.html.
THE COMPS ARE 1920 WIDE AND MEASURED IN THEIR OWN PIXELS. --lp is a length
that is exactly 1px at a 1920 viewport and shrinks with it, so
calc(64 * var(--lp)) is "the 64px the comp draws". Below about 1150 it
stops shrinking (.6px) and the tablet rules take over. Type also has a px
floor, because a proportion of a 1280 laptop is 67% of the comp and a 12px
label is not legible on black.
The phone frames (390 wide) use the site's own --nm-u for the same reason
section 99 does; see the note at the top of its 640 block.
A DIFFERENT BODY FACE, ON PURPOSE. These comps set their copy, labels and
buttons in DM Sans, where the fourteen site pages use Outfit; the display
faces (Anton, Oswald) are the site's. DM Sans is loaded by the three
templates only. */
.nm-lp {
--lp: clamp(.6px, .05208vw, 1px);
--lp-g: calc(70 * var(--lp));
--lp-font: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--lp-line: rgba(255, 255, 255, .1);
--lp-dim: rgba(255, 255, 255, .72);
--lp-hero-size: 96; /* the hero headline, px at 1920 */
--lp-rev-show: 3; /* reviews in view; read by norman.js */
font-family: var(--lp-font);
}
.nm-lp--led { --lp-hero-size: 128; }
/* The LED comp's headline is a third bigger and the comp tightens the space
around it instead of letting the line box grow: 36px eyebrow-to-cap and 32px
cap-to-button, against 48 and 44 on the other two. */
.nm-lp--led .nm-lp-hero .nm-lp-eyebrow { margin-bottom: calc(23 * var(--lp)); }
.nm-lp--led .nm-lp-hero__row { margin-top: calc(22 * var(--lp)); }
/* The LED and wedding comps hang the form heading's rule and line lower than
the corporate one does: 25px below the cap line and 31 under the rule,
against 19 and 25. Measured on all six forms. */
.nm-lp--led .nm-lp-rule,
.nm-lp--wed .nm-lp-rule { margin-top: calc(20 * var(--lp)); }
.nm-lp--led .nm-lp-quote__sub,
.nm-lp--wed .nm-lp-quote__sub { margin-top: calc(24 * var(--lp)); }
.nm-lp-shell {
max-width: calc(1780px + 2 * var(--lp-g));
margin-inline: auto;
padding-inline: var(--lp-g);
}
/* The why-us and reviews blocks sit in a narrower column (220-1700 on the
comp) than everything else (70-1850). */
.nm-lp-narrow { padding-inline: calc(150 * var(--lp)); }
/* ── Type ──────────────────────────────────────────────────────────────── */
.nm-lp-h2 {
font-family: var(--nm-font-display);
font-size: max(30px, calc(62 * var(--lp)));
font-weight: 400;
line-height: 1;
letter-spacing: -.005em;
text-transform: uppercase;
}
/* The site resets every to a 1em bottom margin (section 2); every gap on
these pages is set on the element that owns it instead. */
.nm-lp :where(p) { margin-bottom: 0; }
/* Running copy is the comps' "Paragraph" style, DM Sans on -2% — measured,
every paragraph on the three comps is 4-5% narrower than DM Sans at 0.
Labels and buttons are not; they are set at 0. */
.nm-lph__ask,
.nm-lp-hero__sub,
.nm-lp-lede,
.nm-lp-quote__sub,
.nm-lp-form__trust,
.nm-lp-card__body,
.nm-lp-adv__body,
.nm-lp-rev__text,
.nm-lp-rev__by,
.nm-lp-cta__body { letter-spacing: -.02em; }
.nm-lp-lede {
margin-top: calc(22 * var(--lp));
font-size: max(16px, calc(20 * var(--lp)));
line-height: 1.45;
color: var(--lp-dim);
}
/* "| SIZED, BUILT AND RUN FOR YOU". The hero's version is smaller, with the
brand ramp for its bar where the section eyebrows have plain white. */
.nm-lp-eyebrow {
display: flex;
align-items: center;
gap: calc(10 * var(--lp));
margin-bottom: calc(18 * var(--lp));
font-size: max(13px, calc(16 * var(--lp)));
line-height: 1.3;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
}
.nm-lp-eyebrow::before {
content: "";
flex: 0 0 auto;
width: 2px;
height: max(18px, calc(24 * var(--lp)));
background: #fff;
}
.nm-lp-eyebrow--grad {
gap: calc(13 * var(--lp));
font-size: max(12px, calc(14 * var(--lp)));
}
.nm-lp-eyebrow--grad::before {
width: 3px;
height: max(14px, calc(18 * var(--lp)));
background: var(--nm-grad);
}
/* The short rule under a form heading. */
.nm-lp-rule {
display: block;
width: calc(64 * var(--lp));
height: 3px;
margin-top: calc(14 * var(--lp));
background: linear-gradient(90deg, #3f6ff0, #6a46e6);
}
/* ── Buttons ───────────────────────────────────────────────────────────── */
.nm-lpbtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: calc(14 * var(--lp));
min-height: max(46px, calc(53 * var(--lp)));
padding: 0 max(20px, calc(27 * var(--lp)));
border: 1px solid #fff;
border-radius: 3px;
font: 400 max(14px, calc(18 * var(--lp)))/1 var(--lp-font);
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: background-color .18s ease, color .18s ease;
}
.nm-lpbtn__icon { flex: 0 0 auto; width: max(16px, calc(21 * var(--lp))); height: auto; }
.nm-lpbtn--solid { background: #fff; color: #000; }
.nm-lpbtn--solid:hover { background: #dcdee3; }
.nm-lpbtn--line { background: transparent; color: #fff; }
.nm-lpbtn--line:hover { background: rgba(255, 255, 255, .1); }
/* ── 1. Header ─────────────────────────────────────────────────────────── */
.nm-lph {
position: sticky;
top: 0;
z-index: 50;
background: #000;
border-bottom: 1px solid var(--lp-line);
}
.nm-lph__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: calc(1814px + 106 * var(--lp));
margin-inline: auto;
padding: calc(16 * var(--lp)) calc(53 * var(--lp));
}
.nm-lph__logo { width: max(60px, calc(92 * var(--lp))); height: auto; }
.nm-lph__end { display: flex; align-items: center; gap: calc(38 * var(--lp)); }
.nm-lph__ask { margin: 0; font-size: max(14px, calc(18 * var(--lp))); }
.nm-lph__ask a:hover { text-decoration: underline; }
.nm-lph__call { display: none; }
/* An anchor jump to a form must not land under the sticky bar. */
.nm-lp-quote { scroll-margin-top: max(76px, calc(124 * var(--lp))); }
/* ── 2. Hero ───────────────────────────────────────────────────────────── */
.nm-lp-hero {
padding-block: calc(48 * var(--lp));
border-bottom: 1px solid var(--lp-line);
}
.nm-lp-hero .nm-lp-eyebrow { margin-bottom: calc(37 * var(--lp)); }
.nm-lp-hero__title {
font-family: var(--nm-font-display);
font-size: max(40px, calc(var(--lp-hero-size) * var(--lp)));
font-weight: 400;
line-height: 1;
/* The comps' hero lines are 8% narrower than Anton at the same cap height
on all three pages, which is a constant tracking, not a size. */
letter-spacing: -.035em;
text-transform: uppercase;
}
.nm-lp-hero__row {
display: flex;
align-items: center;
gap: calc(32 * var(--lp));
margin-top: calc(36 * var(--lp));
}
.nm-lp-hero__sub {
margin: 0;
font-size: max(16px, calc(20 * var(--lp)));
line-height: 1.4;
}
/* The photograph runs into the black: the bottom of the frame is a fade, not
an edge. */
.nm-lp-hero__media {
position: relative;
margin-top: calc(33 * var(--lp));
}
.nm-lp-hero__media::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 92%);
pointer-events: none;
}
.nm-lp-hero__img {
width: 100%;
height: calc(480 * var(--lp));
object-fit: cover;
}
/* ── 3 / 10. Quote form ────────────────────────────────────────────────── */
.nm-lp-quote {
padding-block: calc(56 * var(--lp));
border-bottom: 1px solid var(--lp-line);
}
.nm-lp-quote__sub {
margin-top: calc(18 * var(--lp));
font-size: max(15px, calc(18 * var(--lp)));
line-height: 1.5;
color: var(--lp-dim);
}
.nm-lp-form__fields {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: calc(16 * var(--lp));
margin-top: calc(34 * var(--lp));
}
.nm-lp-form__label {
display: block;
margin-bottom: calc(13 * var(--lp));
font-size: max(14px, calc(16 * var(--lp)));
line-height: 1.2;
}
.nm-lp-form__wrap { position: relative; }
.nm-lp-form__input {
display: block;
width: 100%;
height: max(46px, calc(53 * var(--lp)));
padding: 0 max(12px, calc(16 * var(--lp)));
background: #0b0b0b;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 3px;
color: #fff;
font: 400 max(15px, calc(17 * var(--lp)))/1.2 var(--lp-font);
color-scheme: dark;
-webkit-appearance: none;
appearance: none;
}
.nm-lp-form__input:focus { outline: none; border-color: rgba(255, 255, 255, .55); }
.nm-lp-form__input:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 1px; }
.nm-lp-form__select { padding-right: max(40px, calc(48 * var(--lp))); cursor: pointer; }
.nm-lp-form__select option { background: #111; color: #fff; }
.nm-lp-form__icon {
position: absolute;
top: 50%;
right: max(12px, calc(16 * var(--lp)));
width: max(16px, calc(20 * var(--lp)));
height: auto;
transform: translateY(-50%);
color: rgba(255, 255, 255, .75);
pointer-events: none;
}
/* The date field draws its own calendar mark, so the browser's is stretched
invisibly over the whole box (a press anywhere opens the picker) and the
mm/dd/yyyy mask stays hidden until there is a date or the field has focus,
so the empty field looks like the comp's. norman.js keeps data-empty. */
.nm-lp-form__date { position: relative; cursor: pointer; }
.nm-lp-form__date::-webkit-calendar-picker-indicator {
position: absolute;
inset: 0;
width: auto;
height: auto;
opacity: 0;
cursor: pointer;
}
.nm-lp-form__date[data-empty]:not(:focus)::-webkit-datetime-edit { color: transparent; }
.nm-lp-form__captcha {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: calc(28 * var(--lp));
}
.nm-lp-form__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: calc(28 * var(--lp));
margin-top: calc(33 * var(--lp));
}
.nm-lp-form__trust {
margin: 0;
font-size: max(14px, calc(16 * var(--lp)));
line-height: 1.45;
color: var(--lp-dim);
}
.nm-lp-form button[disabled] { opacity: .6; cursor: progress; }
/* layout="split": heading left, the fields two-up in an 854px column. */
.nm-lp-quote--split .nm-lp-quote__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) calc(854 * var(--lp));
column-gap: calc(70 * var(--lp));
align-items: start;
}
.nm-lp-quote--split .nm-lp-form__fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(17 * var(--lp)) calc(24 * var(--lp));
margin-top: 0;
}
/* ── 4. Why trust us ───────────────────────────────────────────────────── */
.nm-lp-why { padding-block: calc(93 * var(--lp)) calc(100 * var(--lp)); }
.nm-lp-why__grid {
display: grid;
grid-template-columns: calc(704 * var(--lp)) minmax(0, 1fr);
column-gap: calc(72 * var(--lp));
align-items: start;
}
.nm-lp-why__img {
width: 100%;
height: auto;
margin-top: calc(48 * var(--lp));
aspect-ratio: 704 / 419;
object-fit: cover;
border-radius: 8px;
}
.nm-lp-checks__item {
display: flex;
align-items: center;
gap: calc(24 * var(--lp));
padding-block: calc(14 * var(--lp));
border-bottom: 1px solid var(--lp-line);
font-family: var(--nm-font-cond);
font-size: max(17px, calc(24 * var(--lp)));
line-height: 1.25;
text-transform: uppercase;
}
.nm-lp-checks__item:first-child { padding-top: 0; }
.nm-lp-checks__item:last-child { border-bottom: 0; }
.nm-lp-checks__mark { flex: 0 0 auto; width: max(32px, calc(48 * var(--lp))); height: auto; }
.nm-lp-why__cta { margin-top: calc(17 * var(--lp)); }
/* The comps let the longest claim run past the column's rules rather than
wrap it ("ONE CONTRACT COVERS STAGE, AV, ..." overhangs by ~20px), so on a
desktop the lines hold; the narrow-padding column leaves room for it. */
@media (min-width: 1151px) {
.nm-lp-checks__item span { white-space: nowrap; }
}
/* ── 5. Services ───────────────────────────────────────────────────────── */
.nm-lp-svc { padding-block: calc(92 * var(--lp)) calc(96 * var(--lp)); }
.nm-lp-svc .nm-lp-eyebrow { margin-bottom: calc(22 * var(--lp)); }
.nm-lp-svc__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(32 * var(--lp)) calc(48 * var(--lp));
margin-top: calc(50 * var(--lp));
}
.nm-lp-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-bottom: calc(24 * var(--lp));
border-bottom: 1px solid var(--lp-line);
}
.nm-lp-card__img {
width: 100%;
height: auto;
aspect-ratio: 561 / 250;
object-fit: cover;
border-radius: 8px;
}
/* Two lines' height whether or not the title needs them, so the copy and the
buttons line up across a row the way the comp draws them. */
.nm-lp-card__title {
min-height: 2.5em;
margin-top: calc(23 * var(--lp));
font-family: var(--nm-font-cond);
font-size: max(18px, calc(24 * var(--lp)));
line-height: 1.25;
text-transform: uppercase;
}
.nm-lp-card__body {
flex: 1 0 auto;
margin-top: calc(22 * var(--lp));
font-size: max(15px, calc(18 * var(--lp)));
line-height: 1.5;
color: var(--lp-dim);
}
.nm-lp-card .nm-lpbtn { margin-top: calc(22 * var(--lp)); }
/* ── 6. Advantages ─────────────────────────────────────────────────────── */
.nm-lp-adv {
position: relative;
overflow: hidden;
padding-block: calc(92 * var(--lp)) calc(100 * var(--lp));
}
.nm-lp-adv__glow {
position: absolute;
inset: 0;
background:
radial-gradient(38% 46% at 58% 72%, rgba(122, 38, 214, .42), transparent 70%),
radial-gradient(30% 40% at 36% 34%, rgba(30, 40, 120, .32), transparent 72%),
radial-gradient(22% 60% at 86% 60%, rgba(118, 30, 190, .28), transparent 70%);
pointer-events: none;
}
.nm-lp-adv > .nm-lp-shell { position: relative; }
.nm-lp-adv__pics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(16 * var(--lp));
margin-top: calc(50 * var(--lp));
}
.nm-lp-adv__img {
width: 100%;
height: auto;
aspect-ratio: 882 / 349;
object-fit: cover;
border-radius: 8px;
}
.nm-lp-adv__list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: calc(32 * var(--lp));
margin-top: calc(66 * var(--lp));
}
.nm-lp-adv__item {
padding-bottom: calc(14 * var(--lp));
border-bottom: 1px solid var(--lp-line);
}
.nm-lp-adv__title {
display: flex;
align-items: center;
gap: calc(22 * var(--lp));
font-family: var(--nm-font-display);
font-size: max(17px, calc(24 * var(--lp)));
line-height: 1.2;
text-transform: uppercase;
}
.nm-lp-adv__mark { flex: 0 0 auto; width: max(22px, calc(32 * var(--lp))); height: auto; }
.nm-lp-adv__body {
margin-top: calc(14 * var(--lp));
font-size: max(15px, calc(18 * var(--lp)));
line-height: 1.5;
color: var(--lp-dim);
}
.nm-lp-adv__cta { margin-top: calc(45 * var(--lp)); }
/* ── 7. Results gallery ────────────────────────────────────────────────── */
.nm-lp-gal {
padding-block: calc(92 * var(--lp)) calc(96 * var(--lp));
border-bottom: 1px solid var(--lp-line);
}
.nm-lp-gal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nm-lp-gal__grid {
display: grid;
gap: calc(16 * var(--lp));
margin-top: calc(40 * var(--lp));
}
.nm-lp-gal__tile { min-width: 0; }
.nm-lp-gal__img,
.nm-lp-gal__tile .nm-lp-video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
/* grid: four across, two rows (corporate). */
.nm-lp-gal--grid .nm-lp-gal__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: calc(298 * var(--lp));
}
/* lead2: two wide over four (LED), on an eight-track grid because the comp's
1100/656 split is not a multiple of its four-up row. */
.nm-lp-gal--lead2 .nm-lp-gal__grid {
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-template-rows: calc(500 * var(--lp)) calc(250 * var(--lp));
gap: calc(24 * var(--lp));
}
.nm-lp-gal--lead2 .nm-lp-gal__tile { grid-column: span 2; }
.nm-lp-gal--lead2 .nm-lp-gal__tile:nth-child(1) { grid-column: span 5; }
.nm-lp-gal--lead2 .nm-lp-gal__tile:nth-child(2) { grid-column: span 3; }
/* lead1: one full width over three (wedding). */
.nm-lp-gal--lead1 .nm-lp-gal__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: calc(720 * var(--lp)) calc(300 * var(--lp));
gap: calc(24 * var(--lp));
}
.nm-lp-gal--lead1 .nm-lp-gal__tile:nth-child(1) { grid-column: 1 / -1; }
/* A video tile is the poster until pressed; the badge is .nm-media4__play's. */
.nm-lp-video { position: relative; overflow: hidden; background: #08080a; }
.nm-lp-video__media { width: 100%; height: 100%; object-fit: cover; }
.nm-lp-video--playing .nm-media4__play { opacity: 0; pointer-events: none; }
/* ── 8. Reviews ────────────────────────────────────────────────────────── */
.nm-lp-rev { padding-block: calc(96 * var(--lp)) calc(116 * var(--lp)); }
.nm-lp-rev__grid {
display: grid;
grid-template-columns: calc(400 * var(--lp)) minmax(0, 1fr);
column-gap: calc(48 * var(--lp));
align-items: start;
}
.nm-lp-rev__marks { display: flex; align-items: center; justify-content: space-between; }
.nm-lp-rev__quote { width: max(56px, calc(90 * var(--lp))); height: auto; }
.nm-lp-rev__rating { display: flex; align-items: center; gap: calc(4 * var(--lp)); }
.nm-lp-rev__g { width: max(22px, calc(32 * var(--lp))); height: auto; margin-right: calc(12 * var(--lp)); }
.nm-lp-rev__star { width: max(18px, calc(26 * var(--lp))); height: auto; }
.nm-lp-rev__lead .nm-lp-h2 { margin-top: calc(32 * var(--lp)); }
.nm-lp-rev__nav {
display: flex;
align-items: center;
gap: calc(28 * var(--lp));
margin-top: calc(36 * var(--lp));
}
.nm-lp-rev__arrow {
flex: 0 0 auto;
padding: 0;
background: none;
border: 0;
color: #fff;
cursor: pointer;
}
.nm-lp-rev__arrow svg { width: max(26px, calc(32 * var(--lp))); height: auto; }
.nm-lp-rev__arrow:disabled { color: rgba(255, 255, 255, .45); cursor: default; }
.nm-lp-rev__bar {
position: relative;
flex: 1 1 auto;
height: 3px;
background: rgba(255, 255, 255, .35);
}
.nm-lp-rev__bar > span {
position: absolute;
inset: 0 auto 0 0;
width: 75%;
background: #fff;
transition: width .25s ease;
}
.nm-lp-rev__list { display: flex; gap: calc(24 * var(--lp)); }
.nm-lp-rev__card {
display: flex;
flex: 0 0 calc((100% - (var(--lp-rev-show) - 1) * 24 * var(--lp)) / var(--lp-rev-show));
flex-direction: column;
justify-content: space-between;
gap: calc(40 * var(--lp));
min-height: calc(323 * var(--lp));
padding: calc(28 * var(--lp));
background: #0c0c0d;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 6px;
}
.nm-lp-rev__text {
margin: 0;
font-size: max(15px, calc(18 * var(--lp)));
line-height: 1.5;
color: var(--lp-dim);
}
/* The ramp down the card's left edge beside the byline. */
.nm-lp-rev__by {
position: relative;
margin: 0;
font-size: max(14px, calc(16 * var(--lp)));
line-height: 1.5;
color: var(--lp-dim);
}
.nm-lp-rev__by strong { font-weight: 700; color: #fff; }
.nm-lp-rev__by::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(-28 * var(--lp) - 1px);
width: max(4px, calc(6 * var(--lp)));
border-radius: 0 3px 3px 0;
background: var(--nm-grad);
}
/* ── 9. Closing call band ──────────────────────────────────────────────── */
.nm-lp-cta {
position: relative;
overflow: hidden;
isolation: isolate;
}
.nm-lp-cta__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.nm-lp-cta__veil {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 45%, #000 100%),
linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .1) 100%);
}
.nm-lp-cta__mark {
position: absolute;
top: 50%;
right: calc(150 * var(--lp));
z-index: -1;
width: calc(290 * var(--lp));
aspect-ratio: 1;
background: center / contain no-repeat;
opacity: .22;
transform: translateY(-50%);
}
.nm-lp-cta__grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: calc(395 * var(--lp));
padding-block: calc(60 * var(--lp));
}
.nm-lp-cta__title {
font-family: var(--nm-font-display);
font-size: max(36px, calc(92 * var(--lp)));
font-weight: 400;
line-height: 1;
letter-spacing: -.035em; /* the hero's tracking; see 2. Hero */
text-transform: uppercase;
}
.nm-lp-cta__body {
margin-top: calc(30 * var(--lp));
font-size: max(16px, calc(20 * var(--lp)));
line-height: 1.4;
}
.nm-lp-cta__btn { flex: 0 0 auto; }
.nm-lp--led .nm-lp-cta__grid { min-height: calc(417 * var(--lp)); }
/* ── 11. Footer ────────────────────────────────────────────────────────── */
.nm-lpf { padding-top: calc(32 * var(--lp)); }
.nm-lpf__row {
display: flex;
align-items: center;
gap: calc(70 * var(--lp));
}
.nm-lpf__logo { width: max(64px, calc(92 * var(--lp))); height: auto; }
.nm-lpf__legal,
.nm-lpf__credit {
margin: 0;
font-size: max(12px, calc(16 * var(--lp)));
letter-spacing: .06em;
text-transform: uppercase;
color: var(--lp-dim);
}
.nm-lpf__credit { margin-left: auto; }
/* The comps crop the wordmark harder than the site footer does: half of it
is below the fold of the page, against the site's quarter. */
.nm-lpf .nm-foot__wordmark { margin-bottom: -10.5%; }
/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
.nm-lp { --lp-g: 40px; --lp-rev-show: 2; }
.nm-lp-narrow { padding-inline: 0; }
.nm-lp-hero__row { flex-wrap: wrap; }
.nm-lp-quote--row .nm-lp-form__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nm-lp-quote--split .nm-lp-quote__grid { grid-template-columns: minmax(0, 1fr); }
.nm-lp-quote--split .nm-lp-form { margin-top: 36px; }
.nm-lp-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
.nm-lp-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nm-lp-adv__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
.nm-lp-gal--grid .nm-lp-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
.nm-lp-gal--lead2 .nm-lp-gal__grid,
.nm-lp-gal--lead1 .nm-lp-gal__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: 240px;
}
.nm-lp-gal--lead2 .nm-lp-gal__tile,
.nm-lp-gal--lead2 .nm-lp-gal__tile:nth-child(n) { grid-column: auto; }
.nm-lp-gal--lead1 .nm-lp-gal__tile:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
/* One lead over three: three across, or the third would sit alone. */
.nm-lp-gal--lead1 .nm-lp-gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nm-lp-rev__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
.nm-lp-rev__lead { max-width: 480px; }
}
/* ── Phone ─────────────────────────────────────────────────────────────────
Read off the 390 frames in --nm-u (see section 99). The order is the
desktop's with every row stacked; the header trades the question and the
quote button for one call button. */
@media (max-width: 640px) {
.nm-lp {
--lp-g: calc(25 * var(--nm-u));
--lp-rev-show: 3;
}
.nm-lp-h2,
.nm-lp-h2--lg { font-size: calc(38 * var(--nm-u)); }
.nm-lp-lede { margin-top: calc(18 * var(--nm-u)); font-size: calc(17 * var(--nm-u)); line-height: 1.6; }
.nm-lp-eyebrow { gap: calc(10 * var(--nm-u)); margin-bottom: calc(14 * var(--nm-u)); font-size: calc(15 * var(--nm-u)); }
.nm-lp-eyebrow::before { height: calc(22 * var(--nm-u)); }
.nm-lp-eyebrow--grad::before { height: calc(18 * var(--nm-u)); }
.nm-lp-rule { width: calc(66 * var(--nm-u)); margin-top: calc(18 * var(--nm-u)); }
.nm-lpbtn {
gap: calc(16 * var(--nm-u));
min-height: calc(54 * var(--nm-u));
padding-inline: calc(32 * var(--nm-u));
font-size: calc(18 * var(--nm-u));
}
.nm-lpbtn__icon { width: calc(22 * var(--nm-u)); }
/* Header */
.nm-lph__inner { padding: calc(26 * var(--nm-u)) var(--lp-g); }
.nm-lph__logo { width: calc(60 * var(--nm-u)); }
.nm-lph__ask,
.nm-lph__cta { display: none; }
.nm-lph__call { display: inline-flex; padding-inline: calc(17 * var(--nm-u)); }
.nm-lp-quote { scroll-margin-top: calc(107 * var(--nm-u)); }
/* Hero */
.nm-lp-hero { padding-block: calc(60 * var(--nm-u)); }
.nm-lp-hero .nm-lp-eyebrow { margin-bottom: calc(28 * var(--nm-u)); }
/* The phone frames set the headline at the font's own tracking. */
.nm-lp-hero__title { font-size: calc(50 * var(--nm-u)); line-height: .98; letter-spacing: -.005em; }
.nm-lp-hero__row {
flex-direction: column;
align-items: flex-start;
gap: calc(40 * var(--nm-u));
margin-top: calc(34 * var(--nm-u));
}
.nm-lp-hero__sub { font-size: calc(18 * var(--nm-u)); line-height: 1.55; }
.nm-lp-hero__media { margin-top: calc(36 * var(--nm-u)); }
.nm-lp-hero__img { height: calc(490 * var(--nm-u)); border-radius: 6px 6px 0 0; }
/* Quote form */
.nm-lp-quote { padding-block: calc(50 * var(--nm-u)); }
.nm-lp-quote__sub { margin-top: calc(22 * var(--nm-u)); font-size: calc(17 * var(--nm-u)); line-height: 1.55; }
.nm-lp-quote--row .nm-lp-form__fields,
.nm-lp-quote--split .nm-lp-form__fields {
grid-template-columns: minmax(0, 1fr);
gap: calc(24 * var(--nm-u));
margin-top: calc(32 * var(--nm-u));
}
.nm-lp-quote--split .nm-lp-form { margin-top: 0; }
.nm-lp-form__label { margin-bottom: calc(12 * var(--nm-u)); font-size: calc(15 * var(--nm-u)); }
.nm-lp-form__input { height: calc(50 * var(--nm-u)); font-size: 16px; }
.nm-lp-form__captcha { align-items: center; }
.nm-lp-form__actions {
flex-direction: column;
gap: calc(16 * var(--nm-u));
margin-top: calc(38 * var(--nm-u));
}
.nm-lp-form__trust {
max-width: calc(250 * var(--nm-u));
font-size: calc(16 * var(--nm-u));
text-align: center;
}
/* Why */
.nm-lp-why { padding-block: calc(50 * var(--nm-u)) calc(60 * var(--nm-u)); }
.nm-lp-why__grid { grid-template-columns: minmax(0, 1fr); }
.nm-lp-why__img { margin-top: calc(34 * var(--nm-u)); aspect-ratio: 340 / 260; }
.nm-lp-checks { margin-top: calc(34 * var(--nm-u)); }
.nm-lp-checks__item {
gap: calc(16 * var(--nm-u));
padding-block: calc(14 * var(--nm-u));
font-size: calc(24 * var(--nm-u));
line-height: 1.08;
}
.nm-lp-checks__item:first-child { padding-top: calc(14 * var(--nm-u)); }
.nm-lp-checks__mark { width: calc(32 * var(--nm-u)); }
.nm-lp-why__cta { margin-top: calc(34 * var(--nm-u)); }
/* Services */
.nm-lp-svc { padding-block: calc(60 * var(--nm-u)); }
.nm-lp-svc__grid {
grid-template-columns: minmax(0, 1fr);
gap: calc(18 * var(--nm-u));
margin-top: calc(28 * var(--nm-u));
}
.nm-lp-card { padding-bottom: calc(24 * var(--nm-u)); }
.nm-lp-card__img { aspect-ratio: 340 / 197; }
.nm-lp-card__title { min-height: 0; margin-top: calc(20 * var(--nm-u)); font-size: calc(24 * var(--nm-u)); }
.nm-lp-card__body { margin-top: calc(14 * var(--nm-u)); font-size: calc(17 * var(--nm-u)); }
.nm-lp-card .nm-lpbtn { margin-top: calc(20 * var(--nm-u)); }
/* Advantages */
.nm-lp-adv { padding-block: calc(60 * var(--nm-u)); }
.nm-lp-adv__pics { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--nm-u)); margin-top: calc(34 * var(--nm-u)); }
.nm-lp-adv__img { aspect-ratio: 340 / 178; }
.nm-lp-adv__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: calc(10 * var(--nm-u)); }
.nm-lp-adv__item { padding-block: calc(18 * var(--nm-u)); }
.nm-lp-adv__title { gap: calc(14 * var(--nm-u)); font-family: var(--nm-font-cond); font-size: calc(22 * var(--nm-u)); }
.nm-lp-adv__mark { width: calc(24 * var(--nm-u)); }
.nm-lp-adv__body { margin-top: calc(10 * var(--nm-u)); font-size: calc(17 * var(--nm-u)); }
.nm-lp-adv__cta { margin-top: calc(34 * var(--nm-u)); }
/* Gallery */
.nm-lp-gal { padding-block: calc(60 * var(--nm-u)); }
.nm-lp-gal__head { flex-direction: column; align-items: flex-start; gap: calc(22 * var(--nm-u)); }
.nm-lp-gal__grid { margin-top: calc(26 * var(--nm-u)); }
.nm-lp-gal--grid .nm-lp-gal__grid {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: calc(187 * var(--nm-u));
gap: calc(16 * var(--nm-u));
}
/* LED and wedding: the frames draw the first two tiles full width at 218
and the rest two-up at 128, so the heights are the tiles' own rather than
row spans. */
.nm-lp-gal--lead2 .nm-lp-gal__grid,
.nm-lp-gal--lead1 .nm-lp-gal__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
gap: calc(16 * var(--nm-u));
}
.nm-lp-gal--lead2 .nm-lp-gal__tile,
.nm-lp-gal--lead1 .nm-lp-gal__tile,
.nm-lp-gal--lead2 .nm-lp-gal__tile:nth-child(n),
.nm-lp-gal--lead1 .nm-lp-gal__tile:nth-child(n) {
grid-column: auto;
grid-row: auto;
height: calc(128 * var(--nm-u));
}
.nm-lp-gal--lead2 .nm-lp-gal__tile:nth-child(-n + 2),
.nm-lp-gal--lead1 .nm-lp-gal__tile:nth-child(-n + 2) {
grid-column: 1 / -1;
height: calc(218 * var(--nm-u));
}
/* Reviews: the lead centres over a stack of cards. */
.nm-lp-rev { padding-block: calc(60 * var(--nm-u)); }
.nm-lp-rev__grid { row-gap: calc(28 * var(--nm-u)); }
.nm-lp-rev__lead { max-width: none; text-align: center; }
.nm-lp-rev__marks { flex-direction: column; gap: calc(16 * var(--nm-u)); }
.nm-lp-rev__quote { width: calc(48 * var(--nm-u)); }
.nm-lp-rev__g { width: calc(26 * var(--nm-u)); margin-right: calc(8 * var(--nm-u)); }
.nm-lp-rev__star { width: calc(20 * var(--nm-u)); }
.nm-lp-rev__lead .nm-lp-h2 { margin-top: calc(14 * var(--nm-u)); }
.nm-lp-rev__nav { gap: calc(32 * var(--nm-u)); margin-top: calc(22 * var(--nm-u)); }
.nm-lp-rev__list { flex-direction: column; gap: calc(16 * var(--nm-u)); }
.nm-lp-rev__card {
flex-basis: auto;
gap: calc(28 * var(--nm-u));
min-height: 0;
padding: calc(28 * var(--nm-u)) calc(24 * var(--nm-u));
}
.nm-lp-rev__text { font-size: calc(18 * var(--nm-u)); }
.nm-lp-rev__by { font-size: calc(16 * var(--nm-u)); }
.nm-lp-rev__by::before { left: calc(-24 * var(--nm-u) - 1px); width: calc(6 * var(--nm-u)); }
/* Call band */
.nm-lp-cta__grid {
flex-direction: column;
align-items: flex-start;
gap: calc(30 * var(--nm-u));
min-height: 0;
padding-block: calc(50 * var(--nm-u));
}
.nm-lp-cta__title { font-size: calc(52 * var(--nm-u)); line-height: .98; letter-spacing: -.005em; }
.nm-lp-cta__body { margin-top: calc(16 * var(--nm-u)); font-size: calc(18 * var(--nm-u)); }
.nm-lp-cta__mark { top: 6%; right: calc(-70 * var(--nm-u)); width: calc(230 * var(--nm-u)); transform: none; }
/* Footer: everything centres and stacks. */
.nm-lpf { padding-top: calc(25 * var(--nm-u)); }
.nm-lpf__row { flex-direction: column; gap: calc(14 * var(--nm-u)); text-align: center; }
.nm-lpf__logo { width: calc(150 * var(--nm-u)); margin-bottom: calc(10 * var(--nm-u)); }
.nm-lpf__legal,
.nm-lpf__credit { font-size: calc(15 * var(--nm-u)); }
.nm-lpf__credit { margin-left: 0; }
}