/* =========================================================================
start-section.css — section 3, "where to start", plus the finder.
WHY THIS SHAPE. The three offerings are not one engagement: the plan is a
session, the software is a subscription and the automation is a project,
at $336 / $5 / from $1,000. A week-one-week-two timeline would have been
the obvious build and it would have been false -- it implies a single
linear programme that is not what gets sold. So the section is three
entry points rather than three steps, and each one leads with its
smallest possible first move.
NOT NUMBERED. The hero already runs 01-03 and the before/after runs
01-04. A third numbered list would read as a tic rather than a system, so
these are named and divided by vertical rules instead -- which also
echoes the four-up strip on /ideas rather than repeating the hero.
PRICE IS SHOWN, as a "from" inside each entry rather than a table. These
prices are low next to what a consultant charges, and the whole
positioning is "not a consulting engagement" -- published numbers are the
strongest available proof of that, and hiding them invites people to
assume consultancy rates.
========================================================================= */
.st{
position:relative;isolation:isolate;
background:var(--lf-ground,#171413);
color:var(--n12-cream);
padding:118px 0;
}
/* ---------------------------- the ground ----------------------------
Full bleed, but the photograph has to fade to the section colour at top
and bottom. The section above it is the same ground, so a hard edge here
would read as a second seam halfway down the page, competing with the
deliberate one under the hero.
The image is knocked back twice over: brightness and saturation on the
photo itself, then a scrim that never drops below 70% ground. It is
texture, not a picture -- the detail copy runs at 62% cream and has to
stay legible over the brightest part of it, which is the sun. */
.st-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.st-bg::before,.st-bg::after{content:"";position:absolute;inset:0}
/* Dusk, where the hero is sunset: the page moves through the day as you
scroll rather than showing the same desert twice.
Shot for this job, so it has no hotspot -- no sun, no bright horizon band
-- and its detail sits in the outer thirds with quiet dunes through the
middle, which is the band the three columns occupy. That is what lets the
scrim sit much more open here than it could over a frame with a sun in
it: the previous image needed .84 through the middle and brightness(.6),
this one holds at .52 and no brightness knock at all.
2000x669 against a 1440x898 section, so cover crops the width to about
the middle half. That keeps the dunes and loses the outer rock. */
.st-bg::before{
background:url('../images/home-start-desert-clear.webp') center/cover no-repeat;
background-image:image-set(url("/assets/images/home-start-desert-clear.avif") type("image/avif"),url("/assets/images/home-start-desert-clear.webp") type("image/webp"));
filter:saturate(.8);
}
/* Flat, not a vertical fade. The image now starts and stops at the
section's own edges, so the boundary is a clean line rather than a
gradual arrival -- the band reads as a deliberate inset rather than
something bleeding through the page.
The scrim has to be heavier than the old mid-band value: at .64 the top
and bottom of the frame were previously protected by the fade, and
flattening it exposes the brightest parts of the sky behind the heading. */
.st-bg::after{background:rgba(23,20,19,.72)}
.st-wrap,.st-grid,.st-foot{position:relative;z-index:1}
.st-wrap{padding:0 var(--hx-inset)}
/* No gap under it. The heading's own leading is the only space the pair
needs -- the planning page sets every section label this way and the
two pages are meant to read as one site. */
.st-eyebrow{
display:block;margin-bottom:0;
font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
color:rgba(246,241,234,.7);
}
.st-head{
margin:0;font-family:'League Spartan',sans-serif;font-weight:700;
font-size:clamp(26px,2.65vw,38px);line-height:1;letter-spacing:-.035em;
text-transform:lowercase;
}
/* 15px, matching the bullets. It is supporting copy, so it should not sit
a size above the list it introduces. */
/* No max-width: the 74ch measure was what broke this onto two lines, and it
fits the column easily at 15px. Free to wrap on narrow viewports. */
.st-sub{
margin:18px 0 0;max-width:none;
font-size:15px;line-height:1.6;color:rgba(246,241,234,.68);
}
/* ------------------------------ the three ------------------------------
Full-bleed grid; the outer cells carry the page inset as padding so their
text lines up with the heading while the rules still reach the edges. */
/* No top or bottom rule. The three vertical ones already say "these are
separate things", and the horizontals were boxing the row in against a
photograph that is supposed to run behind it. */
/* The 64px below the sub is measured to the first TEXT in a column, not to
the top of the vertical rules. The column's own 40px top padding is part
of that distance, so the grid only adds the remaining 24. */
/* Not repeat(3,1fr). Equal TRACKS gave unequal CONTENT: the outer columns
carry the 115px page inset while the middle carries 40px, so the middle
had 75px more room to write in -- 325 / 400 / 325.
The outer tracks are widened by exactly that difference, which makes the
three writing areas identical while the rules stay full bleed and the
first column's text still lines up with the heading above it. */
.st-grid{
/* max(0px, ...) because this formula assumes the section inset is wider
than a column's own 40px padding, and that stopped being true once the
inset started following --n12-gutter below 1025px. In the 981-1024
band the inset is 32, so this computed to -8px and the outer columns
came out NARROWER than the middle -- the exact inverse of the point of
it, which is to widen the outer two by however much padding they are
carrying. Floored at 0 the band just falls back to equal thirds, which
is correct when there is no inset to compensate for.
iPad Pro 12.9 in portrait is 1024, so this was a live device. */
--st-d:max(0px, calc(var(--hx-inset) - 40px));
--st-mid:calc((100% - 2 * var(--st-d)) / 3);
display:grid;
grid-template-columns:
calc(var(--st-mid) + var(--st-d))
var(--st-mid)
calc(var(--st-mid) + var(--st-d));
margin-top:24px;
}
.st-col{
display:flex;flex-direction:column;
padding:40px 40px 40px;
text-decoration:none;color:inherit;
transition:background .2s ease;
}
.st-col + .st-col{border-left:1px solid var(--n12-line)}
.st-col:first-child{padding-left:var(--hx-inset)}
.st-col:last-child{padding-right:var(--hx-inset)}
.st-col:hover{background:rgba(246,241,234,.028)}
/* 12px, matching .tr-label in the in-practice band. These two
label-then-line pairs are the same device and should run at the same
rhythm; this one was at 14 against that one's 12, from back when the
before/after ran 14 too. */
.st-label{
display:block;margin-bottom:12px;
font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
color:var(--lf-accent,#B28479);
}
.st-move{
margin:0 0 14px;font-family:'League Spartan',sans-serif;font-weight:700;
font-size:clamp(20px,1.65vw,24px);line-height:1.06;letter-spacing:-.03em;
text-transform:lowercase;
}
/* Points rather than prose. Three short lines carry more of the substance
than a trimmed paragraph did and are read at a glance, which is what the
rest of the page trains you to expect -- the hero and the before/after
are both single lines, and a paragraph here was the odd one out. */
/* Prose, not points. The three-bullet version read as a feature
comparison, which is what made this section sound like a restatement of
the offer rather than an answer to "how much of my time is this?" --
and three bullets per card across three cards is nine claims competing
with the two lines that actually matter, the price and the time. */
/* 22px, and it works as a FLOOR rather than as a gap.
.st-cost is pushed to the foot of the card by margin-top:auto, which
distributes whatever space is left over -- so in the SHORTEST card the
rule ends up well clear of the copy, and in the tallest there is no
space left over at all and it lands hard against the last line. That is
what made the software column look squashed: it is the 5-line one, so it
sets the row height and gets no slack.
A bottom margin here is a minimum the auto cannot eat into, so every
column keeps at least 22px above its rule and the rules still align. */
.st-body{
margin:0 0 22px;
font-size:15px;line-height:1.55;color:rgba(246,241,234,.68);
}
/* The break after "as little of" is a mobile line, so the is removed
from the flow at wider widths. display:none on a does suppress the
break -- verified, not assumed. */
.st-br{display:none}
@media(max-width:900px){.st-br{display:inline}}
/* The cost line sits on the baseline of the card, so the three read across
as one row however long the copy above them runs. */
/* auto on desktop, so the rule and the price land on the same line across
all three columns.
This cannot also be a fixed gap under the paragraph, and it is not a
CSS limitation -- it is arithmetic. The three paragraphs are 3, 5 and 3
lines at this width. If the rules align, the space above them differs by
the difference in copy length; if the space is fixed, the rules land
wherever each paragraph ends. The only way to have both is for the three
paragraphs to run to the same number of lines.
On mobile the columns are stacked, so nothing is aligning across
anything and the gap is pinned at 14px instead -- see mobile-n12.css. */
.st-cost{
margin-top:auto;padding-top:20px;
border-top:1px solid rgba(246,241,234,.1);
font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:rgba(246,241,234,.62);
}
.st-more{
display:inline-flex;align-items:center;gap:9px;margin-top:16px;
font-size:15px;color:var(--n12-cream);
}
.st-more svg{width:17px;height:17px;transition:transform .2s ease}
.st-col:hover .st-more svg{transform:translateX(4px)}
/* ------------------------------ the ask ------------------------------ */
/* Just the two buttons. The line that used to sit here was explaining what
"find your starting point" and "book a 15-minute call" already say. */
.st-foot{
display:flex;align-items:center;gap:26px;flex-wrap:wrap;
/* 68 from 48. The hairline closing the three columns runs the full
width of the band, so the buttons under it read as attached to it
rather than as the band's own ask -- and 48px under a full-bleed
rule is not the same amount of air as 48px under a paragraph. */
padding:68px var(--hx-inset) 0;
}
.st-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.st-btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 22px;border:0;cursor:pointer;
background:var(--n12-cream);color:var(--n12-black);
font-family:'Questrial',sans-serif;font-size:16px;font-weight:700;
white-space:nowrap;transition:background .16s ease,transform .16s ease;
}
.st-btn:hover{background:#fff;transform:translateY(-1px)}
/* The secondary. It is a