/* ==========================================================================================================
   ELLIS STERLING v2, THE CONSULTATION PAGES. Loaded after inner.css on /consultation, /consultation/booked and
   /consultation/not-yet only; /consultation also loads assets/css/booking.css (the form, the slot, the stand-in).
   Spec: _plan/CONSULTATION-SPEC.md section 18 (the booking page's third round, 2026-10-16: the company form only,
   one job per element). The page before it: _plan/booking-before-v3/ (same paths); the blocks taken off the page:
   _plan/consultation-removed-sections.html.
   Adds no colour, font or size: everything is site.css and inner.css tokens (the grounds' --fg, --fg2, --rule, --mark,
   --green, --ivory-hi, the type roles and sizes, the spacing steps). Classes start with cs- (the page), cq- (the
   clients' note), cv- (a quote's caption), s-bk (booked), s-ny and s-nc (not-yet).
   Motion: none of its own.
   Order: 1. the chrome on the three pages: the logo-only header and the reduced footer  2. the head: one grid
   3. the head's words  4. on the call: the panel  5. the proof: two tiles; the firm's face on ink  6. text links
   and hidden text  7. not-yet  8. print
   ========================================================================================================== */

/* 1. THE CHROME ON THE THREE PAGES (body.cs-logo-head). Someone booking needs the way home and nothing that leads
   away from the form, so the header shows the logo only: the nav's links, its button and Menu (with the panel it
   opens) are not shown. The footer is reduced the same way, by the same class: the logo, the legal line, Privacy and
   Terms; the tagline and the two link lists go (the routes away are what the header already gave up). The chrome
   stays the shared partials (_partials/header.html and footer.html, copied in by _plan/sync_chrome.py); only this
   class, outside their markers, hides the rest. The scroll-up bar (site.js block 1) brings back the logo alone.
   The reduced footer is shorter at the top too (40 to 64px, was 56 to 96px), and the legal line sits 24px under the
   logo: with nothing between them they are one group. */
.cs-logo-head .site-head .nav .links,.cs-logo-head .site-head .nav .cta,.cs-logo-head .site-head .nav-menu,
.cs-logo-head .site-head .nav-panel{display:none}
.cs-logo-head .site-foot .foot-tagline,.cs-logo-head .site-foot .foot-nav{display:none}
.cs-logo-head .site-foot{padding-top:clamp(40px,4.5vw,64px)}
.cs-logo-head .site-foot .foot-legal{margin-top:24px}

/* 2. THE HEAD (div.ph.g-deep.cs-top): the title and its line, then exactly two blocks, on one deep ground, so the
   form is on the first screen (CONSULTATION-SPEC 18 has the window sizes measured).
   From 960px, three rows on the 12-column grid:
     row 1  the title and the line across the top, on the spine;
     row 2  the privacy note over the half line, alone: one line in the smallest role, 8px above the form it is
            about, so it groups with the form (8px) and not with the line above it (--gap-head);
     row 3  the two blocks, starting level: "On the call" (columns 1 to 5) on the spine and the booking (7 to 12) on
            the half line, the site's two starting edges. Column 6 is the gutter between them.
   The note has its own row so the two blocks' top edges meet on one line whatever the note's length: the panel's
   box and the form's card start at the same y, and the note hangs above the card only.
   The booking stops at 519px, the widest iClosed's stacked card fills (booking.css 1): the card fills it from 960 to
   about 1280px and leaves at most 115px of the half free at 1440. Holding it at 519px on every screen also keeps
   iClosed's stacked card here on screens above 2000px, where the half line would pass 900px and iClosed would switch
   to its two-column card, centred away from the note's edge.
   The panel's column stretches down the booking's row and the panel is sticky inside it, --bar-h plus 24px under
   the top of the window (clear of the scroll-up bar), from 960px on windows at least 540px tall: the three points
   stay beside the form while the visitor scrolls down to the calendar, then stop level with the end of the booking.
   540px is what the panel needs, with room: its 88px top plus its tallest box (about 400px, at 1680px wide) is 490px. A
   laptop's browser window is shorter than its screen (about 110px of bars: 1366x768 gives 657px, 1280x800 690px),
   so a 720px gate, as before, left it scrolling away on the commonest laptops. On windows under 540px it does not
   stick: it would then cover most of what it sits beside. Unlike
   Accelerated's box, it never leaves the left half empty for the length of the calendar. Its box stops level with
   the card's (not with the small print under the card): consultation.js sets --cs-tail, the height of what lies
   under the card, as a margin the sticky panel keeps clear; 0 without it.
   Below 960px: one column in DOM order, the title, the line, the note, the form, then "On the call": booking is the
   job, so the form comes first on a phone. The note, the form and the panel share one width (519px at most), so
   their edges line up.
   The head's top: the nav's height plus 8px (the nav holds the logo only here), so the title starts high; the
   head ends --gap-group under the booking, where the ivory already marks the edge. */
.cs-top{padding-top:calc(var(--nav-h) + 8px);padding-bottom:var(--gap-group)}
.cs-book{margin-top:var(--gap-head);max-width:519px}
.cs-book .bk-slot{margin-top:0}
.cs-side{margin-top:var(--gap-group);max-width:519px}
@media (min-width:960px){
  .cs-top-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .cs-intro{grid-column:1/-1;grid-row:1}
  .cs-book{grid-column:7/13;grid-row:2;margin-top:var(--gap-group)}
  .cs-side{grid-column:1/6;grid-row:2;align-self:stretch;margin-top:var(--gap-group);max-width:none}
}
@media (min-width:960px) and (min-height:540px){
  .cs-panel{position:sticky;top:calc(var(--bar-h) + 24px);margin-bottom:var(--cs-tail,0px)}
}
/* With JS off (or booking.js blocked): the one link to the hosted page and the email, where the form would be. The
   link is the site's bronze button (site.css 10), because in that state it is the page's one action: a text link,
   smaller than "On the call" beside it, flipped the order of what to look at. The email line under it, 12px, in
   the small role. The guest line's own "open it on its own page" would repeat that link, so it steps aside. */
.cs-book .bk-nojs{margin-top:0}
:root:not([data-bk-first]) .cs-book .bk-hosted-line{display:none}
.cs-book .bk-nojs .btn{display:flex;width:fit-content;max-width:100%}
.cs-book .bk-nojs .t-small{margin-top:12px;max-width:52ch}

/* 3. THE HEAD'S WORDS: the h1 in the inner title role (.t-h2, 26 / 47 / 53 / 58px at 390 / 1280 / 1440 / 1568), the
   page's one big line; the line (.t-lede) 16px under it, given the measure it needs for one line from 960px. Left on
   the spine, not centred: the logo above it stays on the left (the shared header), and a centred title would open a
   second axis that nothing else on the page uses; on the spine the logo, the title, the panel, the first tile, the
   face and the footer share one edge. */
.cs-intro .t-lede{margin-top:16px}
@media (min-width:960px){.cs-intro .t-lede{max-width:none}}

/* 4. ON THE CALL (div.cs-panel): a contained, flat panel one step lighter than the ground (--green on --deep), with
   the ground's hairline as its edge (green on deep alone is only about 1.2:1), square like everything on the site,
   no shadow. Inside, three sizes only: the heading in the statement role (Source Serif 4 400 at --fs-sec, a step
   under the title and over the card's 18px event name), the three points at the body size in full colour, and one
   line in the small role.
   The points carry the firm's numerals (Source Serif 4 300 in the ground's bronze, 1.25 times the text: the
   homepage's steps I to IV), because they are what the call does in its order: the look comes first, the advice
   follows, the early word on fit holds throughout. The numeral hangs in its own 2.5rem column, first baselines
   aligned, so every line of the text starts on one edge. No icons, no hairlines between the points: the numerals
   and a 16px step separate them. The line under them (24px) prepares the booker for the questions step and the
   not-yet redirect. */
.cs-panel{--cs-pad:clamp(24px,2.4vw,40px);padding:var(--cs-pad);background:var(--green);border:1px solid var(--rule)}
.cs-panel-h{font-family:var(--serif);font-weight:400;font-size:var(--fs-sec);line-height:1.2;letter-spacing:-.005em;
  text-wrap:balance;color:var(--fg)}
.cs-points{display:grid;row-gap:16px;margin-top:20px}
.cs-points li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);align-items:baseline;font-family:var(--sans);
  font-weight:370;font-size:var(--fs-body);line-height:1.5;color:var(--fg);text-wrap:pretty}
.cs-num{font-family:var(--serif);font-weight:300;font-size:1.25em;line-height:1;color:var(--mark)}
.cs-points-note{margin-top:24px;max-width:52ch;text-wrap:pretty}

/* 5. THE PROOF (section.cs-proof.g-ivory). A clear break from the deep head: the paper ground, standard section
   padding, then two clients' words as two equal tiles, the access quote first. Tiles in the Insights hub's language
   (ivory-hi, ink text, square, no shadow) with the paper's hairline as their edge, because ivory-hi on ivory is only
   1.07:1. From 600px they sit side by side, the column gap between them, so from 960px the second starts exactly on
   the half line; below 600px they stack, 16px apart. Each is the same height (the row's), the quote in the site's
   quote role at the top and who said it at the foot, so the two names share one line. The placeholder line takes the
   tile's whole text width (one line from about 1280px) and the note on cases, small, 16px under the row, runs to
   80ch (one line under the row on a laptop): three small lines in the proof, not six.
   No portrait at the end of the page (owner, 2026-10-16): the proof runs straight into the reduced footer. */
.cs-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:600px){.cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}}
.cs-tile{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,2.6vw,40px);background:var(--ivory-hi);
  border:1px solid var(--rule)}
.cs-tile .t-quote{max-width:none}
.cs-tile figcaption{margin-top:auto;padding-top:24px}
/* who, in the main tone (Source Sans 600, the homepage's caption role), then the placeholder line */
.cv-by{display:block;font-family:var(--sans);font-weight:600;font-size:.9375rem;line-height:1.4;letter-spacing:.01em;color:var(--fg)}
.cv-ph{display:block;margin-top:2px;text-wrap:pretty}
.cq-note{margin-top:16px;max-width:80ch;text-wrap:pretty}
/* typographic quotes hang outside the left edge, so the letters line up with the caption under them */
@supports not (hanging-punctuation:first){.cs-tile blockquote{text-indent:-.4em}}
@supports (hanging-punctuation:first){.cs-tile blockquote{hanging-punctuation:first}}

/* 6. TEXT LINKS WITH NO ARROW (the email addresses): underlined in the ground's bronze at rest, as prose links are, and
   free to wrap anywhere, so a long address never pushes past the gutter at 320px. Visually hidden text. */
.cs-u{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--mark);
  overflow-wrap:anywhere;transition:opacity .1s var(--out)}
.cs-u:active{opacity:.72}
@media (hover:hover) and (pointer:fine){
  .cs-u{transition:text-decoration-color .16s var(--out),opacity .1s var(--out)}
  .cs-u:hover{text-decoration-color:currentColor}
}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* 7. NOT-YET, "When things change": the lede carries the way back as a link in the sentence; the note on the answers
   ends the page in the small size, --gap-head under it, as a separate matter (what happens to their data). */
.s-nc .ny-answers{margin-top:var(--gap-head);max-width:62ch;text-wrap:pretty}

/* 8. PRINT: the booking is screen-only (booking.css 9); the title, the points and the quotes print, on paper. */
@media print{
  .cs-panel,.cs-tile{background:none}
  .cs-panel{position:static}
  .cs-tile{break-inside:avoid}
}