/* =========================================================================
close-section.css — the last band.
One ask. No blog row, no contact strip, no third option. At this point
the reader is either going to act or leave, and everything else on offer
is a way of leaving politely: a blog link sends them sideways into
reading mode, and "contact us" asks them to compose a message and wait.
The calendar link asks for fifteen minutes and one click.
The only companion is the finder, because "I do not know which one" is
the one objection still standing after four sections.
Grey, where the proof section above it is black, so the page ends on a
band rather than trailing off the same ground it has been on.
========================================================================= */
.cl{
position:relative;isolation:isolate;
background:#171413;
color:var(--n12-cream);
/* 118, the same as where-to-start and in-practice.
It was 150, which measured symmetric but did not look it: the band
above contributes its own 118px of bottom padding, so the quiet above
the eyebrow was 268px while the quiet below the button was only 150
plus the footer's 22. Matching the other bands brings that to 236 and
140, and the band stops reading as a gap the page fell into. */
padding:118px 0;
}
/* ---------------------------- the ground ----------------------------
The hero's own photograph, not a new one. The page opens on that frame
and closes on it, which is a full stop rather than another picture --
and it avoids a third landscape entering the story on the last screen.
Pushed much further back than the where-to-start band, so it reads as
texture: that section is showing you a place, this one is only stopping
the ask from floating on flat colour. The cream button has to stay the
brightest thing on the screen. */
.cl-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cl-bg::before,.cl-bg::after{content:"";position:absolute;inset:0}
.cl-bg::before{
background:url('../images/home-close-desert.webp') center 58%/cover no-repeat;
background-image:image-set(url("/assets/images/home-close-desert.avif") type("image/avif"),url("/assets/images/home-close-desert.webp") type("image/webp"));
filter:saturate(.6) brightness(.74);
}
.cl-bg::after{background:rgba(23,20,19,.7)}
/* Centred. Everything above this point on the page is left-aligned to the
115px inset, so centring is the signal that the reading is over and this
is the one thing left to do. */
.cl-wrap{
position:relative;z-index:1;
display:flex;flex-direction:column;align-items:center;text-align:center;
padding:0 var(--hx-inset);
}
/* Wide. The block is centred with nothing beside it, so a narrow measure
just strands it in the middle of a 1075px content box -- all the air ends
up on the left and right where it does no work. */
.cl-copy{max-width:920px}
/* Flush to the heading, like every section label on the planning page. */
.cl-eyebrow{
display:block;margin-bottom:0;
font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
color:rgba(246,241,234,.7);
}
.cl-head{
margin:0;font-family:'League Spartan',sans-serif;font-weight:700;
font-size:clamp(26px,2.65vw,38px);line-height:1.04;letter-spacing:-.035em;
text-transform:lowercase;
}
/* The break between the two sentences is explicit, in the markup, so there
is no wrapping left to tune -- no balance and no pretty. Both would fight
the : balance re-wraps each half to even it against itself, which
collapsed the block from 820px back to 569.
820 is the ceiling for when the second sentence has to wrap on a narrower
screen, not a width either line reaches here. */
/* 18px top, matching every other head-to-subtext gap on the page. */
.cl-sub{margin:18px auto 0;max-width:820px;font-size:15px;line-height:1.6;color:rgba(246,241,234,.68)}
/* A line per sentence is a mobile shape. On a wide centred block the three
forced breaks leave three short lines in a lot of empty space; there the
paragraph should set itself. */
.cl-br{display:none}
@media(max-width:900px){.cl-br{display:inline}}
/* 36. The copy above is a tight cluster -- 14px under the eyebrow, 20px
under the headline -- so the buttons only need to clear the largest of
those by enough to read as a separate act, not to sit in a gap of their
own. Anything near 60 and the block splits into two halves with a hole
between them, which on a centred layout looks like a missing line. */
.cl-actions{
display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;
margin-top:36px;
}
.cl-btn{
display:inline-flex;align-items:center;gap:10px;
padding:16px 26px;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;
}
.cl-btn:hover{background:#fff;transform:translateY(-1px)}
/* This one is a