or a .cta with its own spacing. IN THE BUILDER ON PURPOSE. An inline value on the page would be lost at the next rebuild and would reach one button out of three. There are three call sites here; there is one rule. */ .sol .sbtn{margin-top:28px} /* ============ R27 — THE FOOTER NOTICE ============ The copyright + trademark notice, copied verbatim from verifiedreality.ca and set below the address line. Quieter than the address: it is a legal line, not a way to reach us, so it takes the small mono the other fine print uses and sits a step down in contrast. In the builder ON PURPOSE — studio.css is REGENERATED, so a rule added to the output alone is gone at the next build. */ .sfoot .slegal{margin-top:14px;font:11px/1.7 var(--mono);letter-spacing:.04em;color:var(--tx-3)} /* ============ R32 — THE CLIENT WALL KEEPS THE MOCK'S WEIGHT ============ ⚠️ MEASURED, NOT ASSUMED. The mock's own `.wall` rule (styles.css, line ~164) sets `filter:grayscale(1) brightness(1.9); opacity:.45`, and that dimming is the whole treatment — it is what makes fourteen different-width marks read as one quiet row rather than a row of claims. The rendered page measured **opacity 1**: the wall carries `.rv` for the reveal, and `.rv.in` (two classes) outranks `.wall` (one), so the reveal was quietly undoing the treatment and the logos rendered at more than twice their intended strength on top of brightness(1.9). Scoped here, in the builder, so a rebuild cannot lose it. */ .wall.rv, .wall.rv.in{opacity:.45} .wall:hover, .wall.rv:hover, .wall.rv.in:hover{opacity:.75} /* the mock's own hover value */ /* ============ R33 — THE RECORD PAGE ============================================================ ⚠️ ITERATION 4: A REAL TABLE, SEVEN COLUMNS, AND `table-layout: fixed` IS THE MECHANISM. Without fixed layout the browser sizes columns to their CONTENT and the table grows past the viewport however few columns there are -- that is exactly how six columns still scrolled. With it, the widths below are the law and a cell that overflows wraps or truncates instead of widening anything. ⚠️ NO HORIZONTAL SCROLL ANYWHERE: not on the page, not inside a wrapper. `.rwrap` is a plain block, not a scroller -- it exists to group, not to hide an overflow. ⚠️ And it stays a real
| for the seven headers, | per asset. `.rdash` is the em dash, with a screen-reader equivalent so a lean cell is not silence either. */ .rfilter{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:6px 0 0} .rbtn{font:11px var(--mono);letter-spacing:.08em;color:var(--tx-2);background:none; border:1px solid var(--hair);border-radius:999px;padding:5px 12px;cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)} .rbtn:hover{color:var(--tx);border-color:var(--gold)} .rbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .rbtn.on{color:#0a0b0f;background:var(--gold);border-color:var(--gold)} .rscope{font-size:12.5px;line-height:1.7;color:var(--tx-3);margin:14px 0 0;max-width:74ch} .rfine{font:12.5px/1.7 var(--sans);color:var(--tx-3);margin:16px 0 0;max-width:74ch} .rmech{font:11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--tx-3);margin:14px 0 0} .rstandard{font-size:14px;line-height:1.6;color:var(--tx-2);max-width:60ch;margin:22px 0 0; padding-left:14px;border-left:2px solid var(--tx-3)} .rask{font-size:15px;color:var(--tx);margin:20px 0 0;font-weight:600} .rlexicon{font-size:13px;line-height:1.62;color:var(--tx-2);max-width:74ch;margin:12px 0 0} .rpackline{color:var(--tx-3);border-top:1px solid var(--hair);padding-top:12px;margin-top:18px} .rdash{color:var(--tx-3);opacity:.7} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .ranchors{position:relative;height:0} .ranchor{position:absolute;top:-96px;display:block;width:1px;height:1px} .rfoot{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair); display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline} .rfoot b{font:10.5px var(--mono);letter-spacing:.16em;color:var(--tx-2)} .rfoot span{font-size:12.5px;color:var(--tx-3)} .rfoot a{color:var(--gold);text-decoration:none;white-space:nowrap} .rfoot a:hover{text-decoration:underline;text-underline-offset:3px} /* ---- THE TABLE ---- */ .rnores{font-size:13px;line-height:1.6;color:var(--tx-2);margin:18px 0 0;max-width:74ch; padding-left:14px;border-left:2px solid var(--tx-3)} .rnores[hidden]{display:none} .rwrap{margin-top:22px} /* groups only: NOT a scroller, on purpose */ /* ⚠️ THIS ONE LINE IS THE WHOLE FILTER. Without it `classList.toggle('hide')` changes a class that has no rule, so every filter returns EVERY row and looks like it did something. It went missing when an earlier version of this block was replaced: the rule had been added to `studio.css` directly, which the build regenerates, so it was reverted and the filters quietly became decoration. Measured: EXTERNAL returned 118 of 118. A filter that returns everything is worse than no filter -- it answers a question wrongly. */ .rtable tbody tr.hide{display:none !important} .rtable{table-layout:fixed;width:100%;border-collapse:collapse;font-size:12.5px} /* ⚠️ A FALSE EXPLANATION STOOD HERE AND IS DELETED. It said `border-collapse: collapse` prevents a sticky | in Chromium, and that `separate` was what made the header stick. TESTED: with `collapse` the header
pins exactly as well (measured at 1440/768/390, header at 0 after scrolling past the table's top).
The sticky header had never been broken -- the TEST was scrolling 500px on a page whose table starts
1393px down, so it was reading the header on its way up and calling it unpinned. The measurement was
wrong, not the CSS, and a wrong reason in a comment outlives the fix that prompted it. */
.rtable th,.rtable td{text-align:left;vertical-align:top;padding:11px 10px;
border-bottom:1px solid var(--hair-2);overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
/* the width budget, summing to 100%, each column capped -- @marketing's numbers, revised by Bryan.
⚠️ 2026-10-14, Bryan: "the picture needs to be quite a bit larger so we can actually make out what the
picture looks like and then the name of the picture needs to be the next column. Squeeze the content
of the other columns as required to fit the name of the picture in."
PICTURE went 6% -> 13%, PICTURE NAME is a new 12% column, and the points came off every other column
-- METADATA 26->20, CLASSIFICATION 13->11, SOURCE 16->12, DEVICE 10->8, PRIMARY DATA 22->18,
ORIGINAL 7->6. Nothing was dropped, no font shrank, and the budget still sums to 100. */
.rtable .cpicture{width:13%}
.rtable .cpicturename{width:12%}
.rtable .cmetadata{width:20%}
.rtable .cclassification{width:11%}
.rtable .csource{width:12%}
.rtable .cdevice{width:8%}
.rtable .cprimarydata{width:18%}
.rtable .coriginal{width:6%}
/* ⚠️ THE STICKY HEADER. The background is load-bearing: without it the rows show through as they pass
under. `position:sticky` on the th cells, so the stays a real thead for a screen reader. */
.rtable thead th{position:-webkit-sticky;position:sticky;top:0;z-index:3;background:#0a0b0f;
font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);
border-bottom:1px solid var(--hair)}
.rtable tbody th{font-weight:400;font-size:11.5px;color:var(--tx-2)}
.rtable tbody tr:hover{background:rgba(255,255,255,.025)}
/* ⚠️ 132px, WAS 56px. Bryan: "so we can actually make out what the picture looks like." At 56px a
photograph was a coloured smudge -- enough to see that a picture existed, not enough to see it.
`max-width:100%` still caps it inside the column, so a narrow viewport shrinks the image rather than
overflowing the table. */
.rtable .rthumb{display:block;width:132px;max-width:100%;padding:0;margin:0;border:1px solid var(--hair);
border-radius:4px;background:#07080c;cursor:zoom-in}
.rtable .rthumb img{display:block;width:100%;height:auto}
.rtable .rfile{font:9.5px var(--mono);color:var(--tx-3);display:block;margin-top:6px;overflow-wrap:anywhere}
/* ⚠️ THE NAME IS ITS OWN COLUMN NOW. It used to sit UNDER the thumbnail inside the picture cell, as a
caption to a 56px image -- so the gap the rule above carries is wrong here, because there is no image
above it. It also gets a point more size and a point more contrast: a column a reader scans down is
read differently from a caption under a picture, and at 9.5px in --tx-3 it was neither. */
.rtable .cpicturename .rfile{margin-top:0;font-size:10.5px;color:var(--tx-2)}
.rtable .rthumbless{font:9.5px var(--mono);color:var(--tx-3);display:block;overflow-wrap:anywhere}
/* ⚠️ METADATA IS A DESCRIPTION, NOT AN ABSTRACT. Two lines, then it truncates -- the cell never widens. */
.rtable .rclip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rtable .cclassification{font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2)}
/* ⚠️ PRIMARY DATA IS FIVE READINGS, ONE PER LINE, SMALL TYPE -- never a paragraph. */
.rtable .rread{display:block;font:10.5px var(--mono);color:var(--tx-3);margin:0 0 3px}
.rtable .rread b{font-weight:400;color:var(--tx-2);letter-spacing:.06em;text-transform:uppercase;
font-size:9.5px;margin-right:4px}
.rdl{display:inline-block;font:10.5px var(--mono);letter-spacing:.08em;color:var(--tx-2);background:none;
border:1px solid var(--hair);border-radius:999px;padding:5px 10px;cursor:pointer;text-decoration:none}
.rdl:hover{color:var(--gold);border-color:var(--gold)}
.rsealmeta{font:9.5px var(--mono);color:var(--tx-3);display:block;margin-top:6px;overflow-wrap:anywhere}
.rmark{display:block;width:22px;height:auto;margin:7px 0 0;opacity:.9}
/* ⚠️ BELOW 900px: FEWER COLUMNS, NEVER A SMALLER FONT. Drop DEVICE and PRIMARY DATA; the rest stay. */
@media (max-width:900px){
.rtable .cdevice, .rtable .cprimarydata{display:none}
.rtable .cpicture{width:18%} .rtable .cpicturename{width:16%} .rtable .cmetadata{width:26%}
.rtable .cclassification{width:13%} .rtable .csource{width:17%} .rtable .coriginal{width:10%}
}
@media (max-width:560px){
/* ⚠️ THE PICTURE GETS THE MOST OF ANY COLUMN ON A PHONE. An eight-column table at 390px cannot give
any column a real width, so the one column Bryan asked to be able to SEE gets it first: measured, the
thumbnail goes from 43.5px to about 81px at this budget. Nothing is hidden to fund it, and the other
columns give up points rather than being dropped. */
.rtable .cpicture{width:26%} .rtable .cpicturename{width:20%} .rtable .cmetadata{width:24%}
.rtable .cclassification{width:12%} .rtable .csource{width:10%} .rtable .coriginal{width:8%}
}
/* ---- THE MODAL: the two files side by side, and the depth ---- */
.rmodal{position:fixed;inset:0;z-index:60;background:rgba(4,5,8,.86);display:flex;
align-items:flex-start;justify-content:center;padding:3vh 18px;overflow-y:auto}
.rmodal[hidden]{display:none}
.rbox{background:var(--bg);border:1px solid var(--hair);border-radius:12px;max-width:1180px;width:100%;
padding:20px 22px 22px;position:relative}
.rbox h3{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);
margin:0 0 20px;overflow-wrap:anywhere}
.rx{position:absolute;top:14px;right:16px;background:none;border:1px solid var(--hair);color:var(--tx-2);
border-radius:6px;font-size:18px;line-height:1;padding:4px 10px;cursor:pointer}
.rcompare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.rcompare{grid-template-columns:1fr}}
.rcompare figure{margin:0;min-width:0}
.rcompare img{width:100%;height:auto;max-height:36vh;object-fit:contain;display:block;
border:1px solid var(--hair);border-radius:6px;background:#07080c}
/* 🔴 36vh — AND THIS VALUE WAS WRONG ONCE, IN THE DIRECTION THAT MATTERS.
I had taken it down to 24vh to make the modal fit one screen, and @marketing caught what that cost:
"the side-by-side IS the argument ... the seal rows are evidence; the comparison is the
demonstration." Measured, 24vh rendered the pair at 216px tall at 1440x900 and 259px at 1920x1080 --
both UNDER the ~300px at which a side-by-side stops being decidable and becomes two thumbnails.
"Which is worse than a scroll because it still looks like it's showing you something."
So the height comes back, and if something must give it is the STACKED ROWS that scroll, never the
images. Bryan's "doesn't need to scroll ideally" is a preference; a comparison too small to judge is
the page failing at its one job.
⚠️ At 36vh a 16:9 pair renders at its NATURAL size (~320px) at both widths, so the cap only bites on
a tall image or a short viewport. Measured after this change: the pair is 320px at 1440x900 and
1080px-wide viewports alike, and the modal needs ~30px of scroll rather than 4px. That trade is
deliberate and this comment is where it is recorded. */
.rcompare figcaption{font:10px var(--mono);color:var(--tx-3);margin-top:8px;letter-spacing:.06em}
.racts{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 4px}
.racts .go{color:var(--gold);text-decoration:none;font:11px var(--mono)}
.racts .go:hover{text-decoration:underline;text-underline-offset:3px}
.rhash{font:10.5px var(--mono);color:var(--tx-2);background:rgba(255,255,255,.04);
border:1px solid var(--hair);border-radius:4px;padding:4px 6px;overflow-wrap:anywhere;
user-select:all;-webkit-user-select:all;cursor:copy}
.rdepth{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:18px 0 0;
border-top:1px solid var(--hair);padding-top:18px}
.rdepth dt{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);padding-top:3px}
.rdepth dd{margin:0;font:11.5px var(--mono);color:var(--tx-2);overflow-wrap:anywhere;word-break:break-word}
/* ---- THE MODAL IS THE DEEP BLOCK: labelled, hairlined, and the images stack on a phone ---- */
.rkicker{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);
margin:0 0 10px;overflow-wrap:anywhere}
.rkicker #rmmeta{color:var(--tx-3);text-transform:none;letter-spacing:0}
.rblk{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--hair)}
.rblk h4{font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3);margin:0 0 8px}
.rblk dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 18px;margin:0}
.rblk dt{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);padding-top:3px}
.rblk dd{margin:0;font:11.5px var(--mono);color:var(--tx-2);overflow-wrap:anywhere;word-break:break-word}
/* ⚠️ AND THE LEXICON PARAGRAPHS SIT AT FULL WIDTH, which is where the last of the height was going: two
sentences wrapped across 1180px are two lines each. In the band they would be four. Nothing is cut --
both sentences are the same sentences. */
.rcols + .rlexicon{margin-top:12px}
.rblk dd.rhash{background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:4px;
padding:3px 6px;user-select:all}
.rblk .racts{margin:14px 0 0}
/* 🔴 THE SECTIONS ARE COLUMNS IN ONE BAND, NOT FIVE STACKED BLOCKS.
Bryan: "all the sections should be side by side in separate columns in a single section. If necessary,
truncate the content. But I don't like it being a long page. I want it filled with information on one
page/modal that doesn't need to scroll ideally."
Five stacked bands -- each with its own top rule and 20px of air above it -- is what made this modal
~2.5 screens tall. The same five lists side by side under ONE rule is one screen. Nothing is removed:
same dt/dd, same order, every absent value still a dash. */
.rcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px;margin:20px 0 0;
padding-top:16px;border-top:1px solid var(--hair)}
.rcols .rblk{margin:0;padding:0;border-top:0;min-width:0}
/* ⚠️ `padding:0` ABOVE IS THE LOAD-BEARING PART AND IT WAS MISSING. A site-wide `section` rule gives
every section `padding: 0 130px 74px`; overriding only `padding-top` left a 74px bottom padding on
every column -- which is exactly the 74px between the arithmetic for the tallest column (378px) and
its measured height (452px) -- and 130px of side padding squeezed the content box to 136px, so labels
like "Timestamp authority" wrapped to two lines. One declaration, both symptoms. */
/* ⚠️ INSIDE A COLUMN THE dt/dd STACK. At a quarter of 1180px the two-column dl hands the labels
("Timestamp authority", "Verdict as it stands", "Where it was taken") most of a ~250px cell and leaves
the VALUE a sliver. A label above its value reads at any width; a label beside it only reads when
there is room for both. */
.rcols .rblk dl{grid-template-columns:1fr;gap:2px}
.rcols .rblk dd{margin:0 0 7px}
@media (max-width:1100px){.rcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}}
@media (max-width:700px){
.rcompare{grid-template-columns:1fr} /* ⚠️ stack: a sideways modal undoes iteration 4 */
.rcols{grid-template-columns:1fr}
.rblk dl{grid-template-columns:1fr;gap:2px}
.rblk dd{margin:0 0 8px}
}
/* the row is the door: it must LOOK like one */
.rtable tbody tr.rrow{cursor:pointer}
.rtable tbody tr.rrow:hover{background:rgba(255,255,255,.035)}
.rtable tbody tr.rrow:focus-within{background:rgba(255,255,255,.05);
outline:1px solid var(--gold);outline-offset:-1px}
.rdoor:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ============ R26 — THE LANDING HERO IS ONE PARAGRAPH ============
Bryan's 2026-10-14 tweak: the hero's two blocks merge into ONE , joined by a bar, and `Learn more ->` sits INLINE at the end of it. `display:inline` is the load-bearing part — a block-level link drops to its own line and the instruction is lost. A bar is a separator, not punctuation inside a sentence, so it gets air on both sides. NOTE: this lives in the builder ON PURPOSE. studio.css is REGENERATED from styles.css + these OVERRIDES, so a rule added to the output alone survives until the next build and no longer. */ .hero .lede .herobar{display:inline;margin:0 .5em;opacity:.5;font-weight:400} .hero .lede .herolink{display:inline;color:inherit;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap} .hero .lede .herolink:hover{opacity:.75} /* ============ R24 — THE HERO BYLINE ============ Bryan: an abstract H1 (`Reality is the product.`) with a plain byline under it that names what the company actually sells. Order is the ruling — idea first, menu second — so the byline must read as a quiet line under the H1, never as a second headline competing with it. */ .byline{font-family:var(--sans);font-weight:500;color:var(--gold); font-size:clamp(13px,1.35vw,17px);letter-spacing:.055em;line-height:1.5; margin:.7em 0 0;max-width:64ch} /* ============ R25 — THE CROSS-LINK PANEL ============ One per service page, one destination each. Constraint from the ruling: it is a magazine side panel, NOT a banner — framed, quieter than the page's own copy and its CTA, sitting at the end of a section, stacking under the copy on narrow screens. Identical structure every time so it reads as furniture rather than as an advertisement. */ .xlink{border:1px solid var(--hair);border-left:2px solid var(--gold-dim); background:linear-gradient(180deg,rgba(194,168,106,.045),rgba(255,255,255,0)); padding:22px 24px;margin:34px 0 0;max-width:62ch} .xlink .xlabel{font:600 9.5px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase; color:var(--gold);margin-bottom:12px} .xlink .xhead{font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);line-height:1.25; color:var(--tx);margin-bottom:10px} .xlink p{font-size:13.6px;line-height:1.62;color:var(--tx-2);margin:0 0 14px;max-width:60ch} .xlink .xgo{font:600 10.5px/1 var(--mono);letter-spacing:.2em;color:var(--gold);text-decoration:none; border-bottom:1px solid var(--gold-dim);padding-bottom:3px} .xlink .xgo:hover{color:var(--gold-2);border-bottom-color:var(--gold-2)} @media (max-width:760px){ .xlink{margin-top:26px;padding:18px 18px} } /* ---- hero motion pane ---------------------------------------------------- The swivel loop sits ON TOP of the still, so nothing is lost if the video never plays: a reduced-motion user, or a browser that blocks autoplay, keeps the poster frame underneath. CSS-only — there is no JS autoplay decision to get wrong. */ .pane .motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} @media (prefers-reduced-motion: reduce){ .pane .motion{display:none} } /* ---- THE FILMS: the client's own YouTube embeds on a case study ---- youtube-nocookie + loading="lazy" so nothing loads until it scrolls near. The figure keeps a 16:9 box whether or not the iframe has painted, so the page doesn't jump. */ .filmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:26px} .film{margin:0} .film iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#04050a} .film figcaption{font:11px var(--mono);letter-spacing:.1em;color:var(--gold);margin-top:9px} @media (max-width:760px){ .filmgrid{grid-template-columns:1fr} } /* ---- the one quiet secondary link on the home hero ------------------------ The hero carries ONE primary action. This is the quiet text link beside it — deliberately not a button, because a second button is a second ask. */ .quietlink{font:600 11px/1 var(--mono);letter-spacing:.18em;color:var(--gold);text-decoration:none; border-bottom:1px solid var(--gold-dim);padding-bottom:3px;align-self:center;margin-left:4px} .quietlink:hover{color:var(--gold-2);border-bottom-color:var(--gold-2)} /* ---- /film hero: a real shoot frame, blended under the copy --------------- The frame is the behind-the-scenes still that illustrates "Sealed on request". It sits at low opacity behind a two-layer scrim, so it reads as atmosphere rather than as a picture of anything -- and the copy never sits on a bare image, which is the standing rule. */ .hero-dressed{position:relative;overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%; opacity:.46;filter:grayscale(.26) saturate(.78) contrast(1.06)} .hero-bg::after{content:"";position:absolute;inset:0;background: radial-gradient(115% 88% at 14% 18%, rgba(10,11,12,.38) 0%, rgba(10,11,12,.74) 56%, rgba(10,11,12,.93) 100%), linear-gradient(180deg, rgba(10,11,12,.50) 0%, rgba(10,11,12,.84) 70%, var(--bg) 100%)} .hero-dressed .hero-in{position:relative;z-index:1} /* ---- the three /solutions blocks ------------------------------------------ Bryan reviewed the built page and the finding was: "they don't jump out, and they don't say what the service is and what the solution is." The name was a small eyebrow and the headline carried only the pain, so a scanner learned the problem and never the product. Order is now MARK, NAME, PROBLEM, ANSWER, with the name set large and centred -- it is the loudest thing in the block. */ .sol{display:flex;flex-direction:column;align-items:center;text-align:center; padding:14px 0 4px} .solmark{width:66px;height:66px;display:flex;align-items:center;justify-content:center; color:var(--gold);margin-bottom:22px} .solmark svg{width:60px;height:60px;display:block;opacity:.92} .solmark img{width:60px;height:auto;display:block;opacity:.9} .solname{font-family:var(--serif);font-size:clamp(31px,5.4vw,60px);line-height:1.02; letter-spacing:.01em;color:var(--tx);margin-bottom:20px;text-transform:none} .solproblem{font-family:var(--serif);font-size:clamp(17px,2.1vw,23px);line-height:1.35; color:var(--gold);margin:0 0 20px;max-width:34ch} .solanswer{font-size:15.2px;line-height:1.72;color:var(--tx-2);margin:0;max-width:60ch} @media (max-width:620px){ /* R28 at the small breakpoint: 20px, which matches the reduced block rhythm below. */ .sol .sbtn{margin-top:20px} .solmark{width:54px;height:54px;margin-bottom:18px} .solmark svg,.solmark img{width:50px} .solname{margin-bottom:15px} .solproblem{margin-bottom:16px} } /* ---- watermark backgrounds, and the reality line that labels them --------- Bryan wanted two sections dressed. @marketing's ruling: the roundtable one must be a DRAWING (line art, no faces, claims nothing) and the /demo one a REAL dated still. Either way the page says which kind it is, on the page -- an unlabelled image behind copy that sells proof is the one thing the reality line cannot survive. */ .rtwrap{position:relative;isolation:isolate} .rtwrap > *:not(.rtbg):not(.dembg):not(.realline){position:relative;z-index:1} .rtbg,.dembg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* .rtbg now holds the GENERATED roundtable image rather than a drawing, so it takes the same image treatment as .dembg: full-bleed, dimmed, desaturated, with a scrim between it and the copy. The scrim is not optional -- text never sits on a bare image. */ .rtbg img,.dembg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%; opacity:.17;filter:grayscale(.32) saturate(.72) contrast(1.04)} .rtbg::after,.dembg::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg,var(--bg) 0%,rgba(10,11,12,.80) 42%,rgba(10,11,12,.88) 100%)} /* the reality line: small, monospaced, bottom-right of the block it labels */ .realline{position:absolute;right:max(28px,calc((100vw - 1180px)/2));bottom:16px;z-index:2; font:600 9.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase; color:var(--tx-3);margin:0} .realline-dark{color:var(--tx-2)} @media (max-width:700px){ .realline{right:24px;bottom:12px;font-size:9px} .rtbg svg{width:74vw} } /* ---- a pair of "ask us" panels sitting side by side ----------------------- Two things you can add to a shoot, presented as a pair rather than as one afterthought under the case studies. Stacks on a narrow screen. */ /* stretch, not start: both panels take the height of the TALLER one (Bryan, 2026-10-10 -- "sized according to the larger of the two"). The link is pushed to the foot of each so the pair still lines up whatever their copy runs to. */ .xlinkrow{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;margin-top:36px} .xlinkrow .xlink{display:flex;flex-direction:column;margin-top:0} .xlinkrow .xlink .xgo{margin-top:auto} @media (max-width:820px){ .xlinkrow{grid-template-columns:1fr;gap:20px} } /* ---- more air between the sections on /film ------------------------------- Five sections at one uniform 74px read as a single flat column, which is what Bryan reacted to. The rhythm now varies by kind -- the featured block gets the most, the smaller ones less -- and a hairline marks where each one ends, so the page tells you when it has changed subject instead of just running on. */ main.spage > section{padding-top:104px;padding-bottom:104px} main.spage > section.t1{padding-top:120px;padding-bottom:120px} main.spage > section.t2{padding-top:92px;padding-bottom:92px} main.spage > section.hero{padding-top:136px;padding-bottom:128px} main.spage > section + section{border-top:1px solid var(--hair)} @media (max-width:700px){ main.spage > section, main.spage > section.t1, main.spage > section.t2{padding-top:68px;padding-bottom:68px} main.spage > section.hero{padding-top:92px;padding-bottom:84px} } /* ---- the Business Roundtable lockup --------------------------------------- Drawn, not photographic: seen from above, the table edge, the table, and the five seats. It names the product without illustrating another shoot. */ .rtlock{display:flex;align-items:center;gap:22px;margin:26px 0 30px; padding:24px 26px;border:1px solid var(--hair);background:var(--bg-2)} .rtmark{width:92px;height:92px;flex:0 0 auto;color:var(--gold)} .rtword{display:flex;flex-direction:column;gap:9px;min-width:0} .rtname{font-family:var(--serif);font-size:clamp(19px,2.3vw,27px);letter-spacing:.06em; color:var(--tx);line-height:1.1} .rtrule{display:block;width:64px;height:1px;background:var(--gold-dim)} .rtsub{font:600 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--tx-3)} @media (max-width:620px){ .rtlock{flex-direction:column;align-items:flex-start;gap:16px} .rtmark{width:74px;height:74px} } /* ---- the icon set in "What a production includes" ------------------------- Four boxes about how a job RUNS. A frame from some other shoot answered a different question, and on a proof surface a photograph is a claim about which job it came from. A drawn mark claims nothing. */ .iconset .card .ico{display:flex;align-items:center;justify-content:center; padding:26px 0 22px;color:var(--gold);border-bottom:1px solid var(--hair)} .iconset .card .ico svg{width:48px;height:48px;display:block;opacity:.88; transition:opacity .2s ease, transform .2s ease} .iconset .card:hover .ico svg{opacity:1;transform:translateY(-1px)} @media (max-width:560px){ .iconset .card .ico{padding:20px 0 16px} .iconset .card .ico svg{width:40px;height:40px} } /* ---- case studies: writing left, pictures right --------------------------- The story is 1,200-1,900 words. Read across a 1400px column between the photographs, it is unreadable; in a half-width column at a sane measure it reads. The title stays a full-width header above this. */ .cs2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start} .cs2col .cscol{min-width:0} .cs2col .cstext p{max-width:62ch} .cs2col .csmedia p{max-width:62ch} /* the sections moved inside the grid must not re-apply the page's own gutter */ .cs2col section{padding:0;background:none;border:0} .cs2col section + section{margin-top:30px} .cs2col .filmgrid{grid-template-columns:1fr} .cs2col .gal{grid-template-columns:1fr 1fr} @media (max-width:900px){ .cs2col{grid-template-columns:1fr;gap:26px} } /* ---- footer wordmark + the Powered-by-Verified-Reality badge -------------- */ .sfmark{margin-bottom:26px} .sfmark img{display:block;height:46px;width:auto;opacity:.9} .sfmark .shouse{margin-top:12px} .vrbadge{border-left:2px solid var(--gold);padding-left:14px} .vrhead{display:flex;align-items:center;gap:11px;margin-bottom:10px} /* low opacity on purpose: the mark reads as a watermark beside the record line rather than a second company logo competing with the wordmark at the top of the footer */ .vrlogo{width:40px;height:auto;flex:0 0 auto;opacity:.30; filter:grayscale(.35) brightness(1.05)} .vrhead b{display:block;font:600 10.5px/1.25 var(--mono);letter-spacing:.2em;color:var(--gold); margin-bottom:0} .vrbadge p{font-size:12.6px;line-height:1.6;color:var(--tx-2);margin:0 0 10px;max-width:34ch} .vrbadge a{font:600 10.5px/1 var(--mono);letter-spacing:.18em;color:var(--gold); text-decoration:none;border-bottom:1px solid var(--gold-dim);padding-bottom:3px} .vrbadge a:hover{color:var(--gold-2);border-bottom-color:var(--gold-2)} |
|---|