/* =========================================================================
   THE PUBLISHED SITE'S STYLESHEET — widget 66's widget_style, byte for byte.
   -------------------------------------------------------------------------
   Every rule is scoped under .cnsite so nothing leaks into the page around
   it, and colours arrive as inline custom properties on that element — which
   is why one stylesheet serves every member in their own colours.
   Read out of the back office, not off a rendered page.
   ========================================================================= */
/* CN Site Renderer v2 - all rules scoped under .cnsite so nothing leaks into
   the directory's own theme. Colours arrive as inline custom properties. */

.cnsite {
  --cn-ink: #14181f;
  --cn-muted: #6b7280;
  --cn-line: #e5e7eb;
  color: var(--cn-ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cnsite *, .cnsite *::before, .cnsite *::after { box-sizing: border-box; }
.cnsite img { max-width: 100%; display: block; }

/* ---------- tones ---------- */
.cnsite .cn-t-white  { background: #fff; color: var(--cn-ink); }
.cnsite .cn-t-light  { background: var(--cn-tint); color: var(--cn-ink); }
.cnsite .cn-t-dark   { background: var(--cn-dark); color: #fff; }
.cnsite .cn-t-brand  { background: var(--cn-brand); color: #fff; }
.cnsite .cn-t-accent { background: var(--cn-accent); color: var(--cn-aink); }
.cnsite .cn-t-white .cn-dim, .cnsite .cn-t-light .cn-dim { color: var(--cn-muted); }
.cnsite .cn-t-dark .cn-dim, .cnsite .cn-t-brand .cn-dim { color: rgba(255,255,255,.72); }
.cnsite .cn-t-accent .cn-dim { color: rgba(0,0,0,.6); }
/* ---- added 16 Aug: the neutrals everybody needs, and their own palette ----
   Grey is the soft band that separates one white section from the next, and
   black is the dark end - between them and the member's own colours there is
   no need for a tint or a darkened brand in the picker any more.

   A PALETTE COLOUR CANNOT HAVE ITS INK IN A STYLESHEET. The text colour on
   c3-c6 is computed from THEIR colour by cnInk() and arrives beside it as
   --cn-cNi, so these rules read both and the fallback keeps a half-pushed
   state readable rather than white-on-white. */
.cnsite .cn-t-grey  { background: #f1f3f6; color: var(--cn-ink); }
.cnsite .cn-t-black { background: #111111; color: #fff; }
.cnsite .cn-t-grey .cn-dim  { color: var(--cn-muted); }
.cnsite .cn-t-black .cn-dim { color: rgba(255,255,255,.72); }
.cnsite .cn-t-c3 { background: var(--cn-c3); color: var(--cn-c3i, #14181f); }
.cnsite .cn-t-c4 { background: var(--cn-c4); color: var(--cn-c4i, #14181f); }
.cnsite .cn-t-c5 { background: var(--cn-c5); color: var(--cn-c5i, #14181f); }
.cnsite .cn-t-c6 { background: var(--cn-c6); color: var(--cn-c6i, #14181f); }
.cnsite .cn-t-c3 .cn-dim, .cnsite .cn-t-c4 .cn-dim,
.cnsite .cn-t-c5 .cn-dim, .cnsite .cn-t-c6 .cn-dim { opacity: .72; }

/* ---------- layout ----------
   1280 is the ceiling, not the width. Below it everything is fluid, so the
   only thing this changes is how much room a large screen gets to use. */
.cnsite .cn-sec { padding: 64px 28px; }
.cnsite .cn-wrap { max-width: 1280px; margin: 0 auto; }
.cnsite .cn-wrap:empty { display: none; }
.cnsite .cn-row { display: flex; gap: 44px; align-items: center; }
.cnsite .cn-row.cn-rev { flex-direction: row-reverse; }
.cnsite .cn-row.cn-top { align-items: flex-start; }
.cnsite .cn-rowitem { margin-bottom: 34px; }
.cnsite .cn-rowitem:last-child { margin-bottom: 0; }
.cnsite .cn-col { flex: 1; min-width: 0; }
.cnsite .cn-narrowcol { flex: 0 0 36%; }
.cnsite .cn-mid { text-align: center; }
/* Reading measure stays put. A 1280px line of body copy is not readable,
   so text-only blocks keep their own narrower ceiling. */
.cnsite .cn-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.cnsite .cn-split { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cnsite .cn-grid { display: grid; gap: 20px; grid-template-columns: repeat(var(--cn-cols, 3), minmax(0, 1fr)); }
.cnsite .cn-inline { display: flex; justify-content: space-around; gap: 24px; flex-wrap: wrap; text-align: center; }
.cnsite .cn-inline b { font-size: 20px; font-weight: 750; }
.cnsite .cn-boxed { background: #fff; color: var(--cn-ink); border-radius: 14px; padding: 44px 32px;
                    box-shadow: 0 8px 34px rgba(0,0,0,.09); }
.cnsite .cn-more { margin: 28px 0 0; }

/* ---------- type ---------- */
.cnsite .cn-h { font-size: 44px; line-height: 1.12; margin: 0 0 16px; font-weight: 700; letter-spacing: -.022em; }
.cnsite .cn-h.cn-sm { font-size: 30px; margin-bottom: 20px; }
.cnsite .cn-h.cn-xs { font-size: 21px; margin-bottom: 12px; }
.cnsite .cn-lead { font-size: 18px; line-height: 1.6; opacity: .86; margin: 0 0 24px; }
.cnsite .cn-eyebrow { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 0 0 12px; }
/* ---- H4, AND WHY IT NEEDS A TABLE RATHER THAN A FALLBACK ---------------
   30 August. The eyebrow is the one piece of text the Design tab could not
   reach. Wiring it is easy; wiring it WITHOUT flattening five template
   styles is the actual problem.

   Signal draws its eyebrow at 12px with a rule under it, Verdant at 15px in
   Poppins and brand colour, Editorial at 11.5px with a two-tone dash,
   Meridian at 11.5px in the accent. A single `var(--cn-h4s, 12.5px)` placed
   after them would beat every one of those on every published site the
   moment it shipped - and nobody would have touched a control.

   So each style declares what its OWN eyebrow is, and the H4 rule falls
   back through that. Set nothing and every style keeps exactly what it
   draws today. Set H4 and it wins everywhere, which is the point of it.

   Letter-spacing and text-transform are deliberately NOT here: uppercase
   and tracking are what make an eyebrow an eyebrow rather than small text,
   and they are not one of the four controls. */
.cnsite { --cn-ebs: 12.5px; }
.cnsite.cn-sty-signal { --cn-ebs: 12px; --cn-ebw: 700; }
.cnsite.cn-sty-civic { --cn-ebw: 600; }
.cnsite.cn-sty-verdant {
  --cn-ebs: 15px; --cn-ebw: 600; --cn-ebf: Poppins, Inter, sans-serif; --cn-ebc: var(--cn-brand);
}
.cnsite.cn-sty-editorial { --cn-ebs: 11.5px; --cn-ebf: Inter, sans-serif; }
.cnsite.cn-sty-meridian {
  --cn-ebs: 11.5px; --cn-ebw: 600; --cn-ebf: Inter, sans-serif; --cn-ebc: var(--cn-accent);
}
.cnsite .cn-rich { font-size: 16px; line-height: 1.7; }
.cnsite .cn-rich p { margin: 0 0 14px; }
.cnsite .cn-rich p:last-child { margin-bottom: 0; }
.cnsite .cn-rich img { border-radius: 8px; margin: 8px 0; }
.cnsite .cn-quote { font-size: 26px; line-height: 1.45; font-weight: 500; margin: 16px 0; letter-spacing: -.01em; }
.cnsite .cn-big { font-size: 22px; font-weight: 700; opacity: 1; }

/* ---------- buttons ---------- */
.cnsite .cn-btns { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.cnsite .cn-btn {
  display: inline-block; padding: 13px 26px; border-radius: 7px;
  background: var(--cn-accent);
  font-weight: 640; font-size: 15px; text-decoration: none; border: 0;
}
.cnsite .cn-btn:hover { filter: brightness(1.07); text-decoration: none; }
.cnsite .cn-btn.cn-inv { background: #fff; }
.cnsite .cn-btn.cn-ghost { background: transparent; border: 1.5px solid currentColor; }
.cnsite .cn-btn.cn-ghost:hover { filter: none; opacity: .78; }

/* ---------- header ---------- */
.cnsite .cn-head { background: #fff; border-bottom: 1px solid var(--cn-line); color: var(--cn-ink); }
/* The bar has no ceiling of its own - its padding does the centring. That
   matters because a section is a full-width block with 28px of padding and a
   1280px .cn-wrap inside it, so a section's CONTENT starts at (100% - 1280)/2.
   A bar that was itself 1280px wide put its contents 28px further in, and the
   logo sat inboard of the hero headline below it. Same formula, same column. */
.cnsite .cn-hbar {
  padding: 16px max(28px, calc((100% - 1280px) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.cnsite .cn-hbar.cn-centred { justify-content: center; padding-bottom: 6px; }
.cnsite .cn-hr { display: flex; align-items: center; gap: 18px; }
.cnsite .cn-logo { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.cnsite .cn-logo img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: none; }
.cnsite .cn-mark { width: 40px; height: 40px; border-radius: 7px; background: var(--cn-accent);
                   display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: none; }
.cnsite .cn-nav { display: flex; gap: 24px; flex-wrap: wrap; }
/* THE HEADING'S <button> TAKES THIS FAMILY'S TYPE FROM THIS RULE, so
   there is no second copy of 13px-uppercase anywhere. It matches
   nothing on any site that has no heading on it. */
.cnsite .cn-nav a,
.cnsite .cn-nav .cn-navhead { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; opacity: .82; }
.cnsite .cn-nav a:hover,
.cnsite .cn-nav .cn-navhead:hover { opacity: 1; }
.cnsite .cn-h-centred .cn-nav { justify-content: center; padding: 12px 0 16px; }
/* The dark band still runs edge to edge; only its contents are pulled in,
   onto the same column as the bar below and every section under it. */
.cnsite .cn-strip { background: var(--cn-dark); color: #fff; font-size: 13px;
                    display: flex; justify-content: space-between; align-items: center; gap: 16px;
                    padding: 4px max(28px, calc((100% - 1280px) / 2)); flex-wrap: wrap; }
/* 6px between the chips, per the owner's spec. The phone number is the only
   non-chip in this row and 6px would crowd it, so it takes back the other
   6px on its own right edge rather than widening the gap for everything. */
.cnsite .cn-strip > span { display: inline-flex; align-items: center; gap: 6px; }
.cnsite .cn-strip > span > a:not(.cn-soc) { margin-right: 6px; }
.cnsite .cn-strip a { text-decoration: none; }
/* 32x32 chip, 3px corners, 16px glyph - the owner's own spec, taken from a
   site he built by hand. */
.cnsite .cn-soc { width: 32px; height: 32px; border-radius: 3px; background: var(--cn-accent);
                  display: inline-grid; place-items: center; text-decoration: none; }
.cnsite .cn-soc svg { width: 16px; height: 16px; display: block; }
/* Instagram is the one mark that does NOT fill its 24x24 box. Its outline is
   drawn inset by 0.8 units on each side, so it covers 22.4 of 24 and rendered
   ~1.6px shorter than the Facebook f, which does touch its box edges. The
   owner spotted the gap by drawing a rule across both. Scaling the SVG box by
   24/22.4 makes the INK exactly 16px, matching the f: 16 * 24/22.4 = 17.142857,
   centred in 32px puts the ink at 8.00px..24.00px - whole pixels, so widening
   it here costs nothing in sharpness.
   If the inset in cnSocIco's instagram path ever changes, change 22.4 too. */
.cnsite .cn-soc[title='Instagram'] svg { width: calc(16px * 24 / 22.4); height: calc(16px * 24 / 22.4); }
.cnsite .cn-soc:hover { filter: brightness(1.08); }

/* ---------- cards, lists, media ---------- */
/* THE OUTLINE IS A VARIABLE NOW, and the shadow rides beside it - see the
   box shadow block in cnDsnVars. Both fall back to exactly what was here
   before, so a member who never opens the control is drawn identically. */
.cnsite .cn-card { background: #fff; border: 1px solid var(--cn-boxline, var(--cn-line));
                   border-radius: 10px; padding: 22px;
                   box-shadow: var(--cn-shadow, none); }
.cnsite .cn-card h4 { margin: 0 0 7px; font-size: 17px; font-weight: 650; }
.cnsite .cn-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.cnsite .cn-svc h4 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.cnsite .cn-svc p { margin: 0; font-size: 14px; opacity: .72; line-height: 1.55; }
.cnsite .cn-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--cn-accent);
                  display: grid; place-items: center; margin-bottom: 13px; }
.cnsite .cn-ico svg { width: 22px; height: 22px; display: block; }
.cnsite .cn-card .cn-ico { margin-bottom: 14px; }
.cnsite .cn-divlist > div { padding: 18px 0; border-bottom: 1px solid rgba(128,128,128,.24); }
.cnsite .cn-divlist > div:last-child { border-bottom: 0; }
.cnsite .cn-divlist h4 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.cnsite .cn-divlist p { margin: 0; font-size: 15px; opacity: .74; }
.cnsite .cn-num { font-size: 12.5px; letter-spacing: .1em; opacity: .5; }
.cnsite .cn-img { width: 100%; border-radius: 10px; object-fit: cover; }
.cnsite .cn-img.cn-sq { aspect-ratio: 1 / 1; }
.cnsite .cn-img.cn-wide { aspect-ratio: 4 / 3; }
.cnsite .cn-img.cn-r169 { aspect-ratio: 16 / 9; }
.cnsite .cn-img.cn-feature { aspect-ratio: 2 / 1; margin-bottom: 12px; }
/* THE PLACEHOLDER WEARS THE SAME SHAPE AS THE PICTURE IT STANDS IN FOR.
   .cn-ph already answers cn-sq and cn-r169, but the three shapes the
   GALLERY invents for itself - the feature banner, the slider pane, the
   masonry column item - were all written against `img` and left a
   placeholder div with no dimensions at all. Added rather than widened:
   .cn-track .cn-card.cn-slide is a review card and must not inherit a
   photo's 16/9, so broadening img.cn-slide to .cn-slide would have quietly
   squashed the reviews slider. */
.cnsite .cn-ph.cn-feature { aspect-ratio: 2 / 1; margin-bottom: 12px; }
.cnsite .cn-thumbs { gap: 12px; }

/* ---------- THE PLACEHOLDER, which is the Style's own art ---------------
   It used to be a grey gradient. A grey gradient tells a member nothing and
   tells a visitor the site is half-built, so an empty slot now draws the
   drawing that belongs to the look they already chose, in the two colours
   they already picked. The flat ground lives HERE rather than in the SVG,
   so a style changes it in one line. */
.cnsite .cn-ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px;
                 position: relative; overflow: hidden; display: block; background: #dbe3f0; }
.cnsite .cn-ph.cn-r169 { aspect-ratio: 16 / 9; }
.cnsite .cn-ph.cn-sq { aspect-ratio: 1 / 1; }
.cnsite .cn-ph > svg.cn-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cnsite .cn-ovart { background: #dbe3f0; }
/* The overlay hero puts its content in front with position:relative, so the
   art has to be told to sit behind it rather than inherit that. */
.cnsite .cn-overlay > svg.cn-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cnsite.cn-sty-editorial .cn-ph, .cnsite.cn-sty-editorial .cn-ovart { background: #efe8dc; }
.cnsite.cn-sty-meridian .cn-ph, .cnsite.cn-sty-meridian .cn-ovart { background: #d8dfea; }
.cnsite.cn-sty-verdant .cn-ph, .cnsite.cn-sty-verdant .cn-ovart { background: #eef2f7; }

/* ---------- A BORDER ON AN IMAGE, once the member has asked for one -----
   Four colours, never a free picker - their brand, their accent, white,
   dark. Written with !important on purpose and it is the only place in this
   stylesheet that is: these rules exist ONLY when a member has actually
   pressed something, and a member's own choice has to beat whatever the
   Style was drawing. civic puts a 9px edge on the About photo, and "None"
   has to mean none rather than "whatever the style wanted". An untouched
   slot adds no class at all, so the Style still decides by default. */
.cnsite .cn-bd0 { border: 0 !important; }
/* The thickness is a PROPERTY rather than a width, so "which sides" and "how
   thick" stay two independent choices instead of fifteen combined classes. */
.cnsite .cn-bd { border-style: solid !important; border-color: var(--cn-brand) !important;
                 border-width: 0 !important; --cn-bw: 4px; }
.cnsite .cn-bw-thin { --cn-bw: 2px; }
.cnsite .cn-bw-medium { --cn-bw: 4px; }
.cnsite .cn-bw-thick { --cn-bw: 8px; }
.cnsite .cn-bs-all { border-width: var(--cn-bw) !important; }
.cnsite .cn-bs-top { border-top-width: var(--cn-bw) !important; }
.cnsite .cn-bs-right { border-right-width: var(--cn-bw) !important; }
.cnsite .cn-bs-bottom { border-bottom-width: var(--cn-bw) !important; }
.cnsite .cn-bs-left { border-left-width: var(--cn-bw) !important; }
.cnsite .cn-bc-accent { border-color: var(--cn-accent) !important; }
.cnsite .cn-bc-white { border-color: #ffffff !important; }
.cnsite .cn-bc-dark { border-color: #14181f !important; }
.cnsite .cn-masonry { columns: 4; column-gap: 14px; }
.cnsite .cn-masonry img, .cnsite .cn-masonry .cn-ph { margin: 0 0 14px; break-inside: avoid; border-radius: 10px; }
.cnsite .cn-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
                    padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cnsite .cn-track > * { scroll-snap-align: center; flex: 0 0 auto; }
/* Contain, not cover. Members upload marketing graphics as often as job
   photos, and cropping one of those cuts the words off. */
.cnsite .cn-track img.cn-slide { width: min(860px, 82%); aspect-ratio: 16 / 9;
                                 object-fit: contain; background: rgba(128,128,128,.14); }
.cnsite .cn-track .cn-ph.cn-slide { width: min(860px, 82%); aspect-ratio: 16 / 9; }
.cnsite .cn-track .cn-card.cn-slide { width: min(420px, 82%); }
/* FULL BLEED, because a background that stops short is not a background.

   "whenever there is background image, that need to fit to full background"

   The overlay is already a DIRECT child of .cn-sec - the hero closes the
   section's .cn-wrap, emits the band, and opens a fresh one after it, which
   is what lets the picture be full width at all. What it could not escape
   was the section's own 64px/28px padding, so the photo sat inside a frame
   of the section's tone: a band above it, a band below, and a margin down
   each side. He drew all four.

   The padding is not lost, it MOVES: the overlay's own 110px/28px does the
   spacing now, and the .cn-wrap inside it still centres on the same 1280px
   column as every other section, so the headline stays in line with the
   logo above it. Vertical air goes from 174px to 110px, which is the
   "spacing might need to be adjusting" he expected - a hero band wants to
   feel like a photograph, not like a picture hung on a wall.

   Scoped to the HERO's overlay. cn-v-overlay is a variant name, and a
   variant name is not owned by one type. */
.cnsite .cn-sec.cn-hero.cn-v-overlay { padding: 0; }
.cnsite .cn-overlay { background-size: cover; background-position: center; position: relative;
                      padding: 110px 28px; color: #fff; }
.cnsite .cn-overlay::before { content: ""; position: absolute; inset: 0;
                              background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.74)); }
.cnsite .cn-overlay > * { position: relative; }

/* ---------- reviews, stats, contact ---------- */
.cnsite .cn-stars { color: var(--cn-accent); font-size: 15px; letter-spacing: 2px; }
.cnsite .cn-stat { text-align: center; }
.cnsite .cn-stat .cn-ico { margin: 0 auto 12px; }
.cnsite .cn-fig { display: block; font-size: 42px; font-weight: 750; letter-spacing: -.025em; line-height: 1; }
.cnsite .cn-cap { display: block; font-size: 13.5px; opacity: .72; margin-top: 8px; }

/* ---------- countdown ----------------------------------------------
   THE MEMBER'S OWN PAIR AND NOTHING ELSE. The arc is a gradient from
   their accent to their brand, which is the only reason this section can
   look like the reference he sent without an image, a licence or a third
   colour. currentColor for the track, so it takes the tone's own ink and
   reads on white, tint, dark, brand and accent without five rules.

   NO WIDTH ON THE NUMBER. It is centred over the ring by the ring, and a
   fixed width would cut a three-digit day count off. */
.cnsite .cn-cd { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; text-align: center; }
.cnsite .cn-cdu > span {
  display: block; margin-top: 9px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; opacity: .66;
}
.cnsite .cn-cdring { position: relative; width: 124px; height: 124px; }
/* The rotation is what puts the start of the arc at twelve o'clock. An
   SVG circle starts at three, and a ring that empties from the right
   hand side reads as a dial rather than as time running out. */
.cnsite .cn-cdring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.cnsite .cn-cdtrack { fill: none; stroke: currentColor; opacity: .17; stroke-width: 5; }
.cnsite .cn-cdarc {
  fill: none; stroke: var(--cn-accent); stroke-width: 5; stroke-linecap: round;
  /* The tick sets stroke-dashoffset every second, so this must NOT be
     transitioned: a 1s ease on a value that changes every 1s means the
     ring is never once showing the number underneath it. The seconds ring
     would lag a whole second behind its own digit. */
  transition: none;
}
/* ON THE ACCENT TONE THE ARC IS THE BACKGROUND. The band is
   var(--cn-accent) and so was the ring drawn on it, so four rings came out
   as four empty grey circles and the countdown had no colour in it at all.
   Only a browser could see that - the markup is identical on all five
   tones. cn-aink is the ink this tone already computes for itself, so the
   arc matches the words above it rather than needing a sixth colour. */
.cnsite .cn-t-accent .cn-cdarc { stroke: var(--cn-aink); }
.cnsite .cn-cdring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 300; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* TABULAR FIGURES EVERYWHERE A NUMBER TICKS. Without them the row jitters
   left and right once a second as 1s and 8s swap places, which is the
   sort of thing that looks cheap without anybody being able to say why. */
.cnsite .cn-cd-slim, .cnsite .cn-cd-boxes { gap: 0; }
.cnsite .cn-cd-slim .cn-cdu, .cnsite .cn-cd-boxes .cn-cdu { padding: 14px 24px; min-width: 96px; }
/* CENTRED, LIKE EVERYTHING ELSE IN THE SECTION. This was inline-flex,
   which overrode .cn-cd's own justify-content and sat the whole bar hard
   against the left while the heading above it stayed centred - "that looks
   weird", and he was right, and it was a bug rather than a design. The bar
   still has to shrink-wrap its cells, so it gets `width: fit-content` and
   auto margins instead of changing its display. */
.cnsite .cn-cd-slim {
  border: 1px solid currentColor; border-radius: 8px; overflow: hidden;
  width: fit-content; margin-left: auto; margin-right: auto;
}
.cnsite .cn-cd-slim .cn-cdu + .cn-cdu { border-left: 1px solid currentColor; }
.cnsite .cn-cd-boxes { gap: 14px; }
.cnsite .cn-cd-boxes .cn-cdu { border: 1px solid currentColor; border-radius: 8px; }
.cnsite .cn-cd-slim .cn-cdu, .cnsite .cn-cd-boxes .cn-cdu { border-color: color-mix(in srgb, currentColor 26%, transparent); }
.cnsite .cn-cd-slim b, .cnsite .cn-cd-boxes b {
  display: block; font-size: 32px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums;
}
.cnsite .cn-cd-slim > .cn-cdu > span, .cnsite .cn-cd-boxes > .cn-cdu > span { margin-top: 6px; }
.cnsite .cn-cddone { text-align: center; font-size: 17px; opacity: .85; margin: 0; }
/* A PHONE GETS SMALLER RINGS, NOT A SCROLLBAR. Four 124px rings and their
   gaps need 616px and a phone has 390. */
@media (max-width: 700px) {
  .cnsite .cn-cd { gap: 14px; }
  .cnsite .cn-cdring { width: 76px; height: 76px; }
  .cnsite .cn-cdring b { font-size: 23px; }
  .cnsite .cn-cdu > span { font-size: 9px; letter-spacing: .1em; }
  .cnsite .cn-cd-slim .cn-cdu, .cnsite .cn-cd-boxes .cn-cdu { padding: 10px 13px; min-width: 0; }
  .cnsite .cn-cd-slim b, .cnsite .cn-cd-boxes b { font-size: 23px; }
}
.cnsite .cn-dl { font-size: 15.5px; line-height: 2.05; text-align: left; }
.cnsite .cn-dl b { display: inline-block; min-width: 92px; opacity: .6; font-weight: 600;
                   font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.cnsite .cn-dl a { text-decoration: none; }
.cnsite .cn-mid .cn-dl { display: inline-block; }
.cnsite .cn-mid .cn-btns { margin-top: 22px; }
.cnsite .cn-maplink { display: block; text-decoration: none; }
.cnsite .cn-map { display: block; aspect-ratio: 16 / 10; border-radius: 10px;
                  background: repeating-linear-gradient(45deg, #dfe3e8, #dfe3e8 10px, #e9edf1 10px, #e9edf1 20px); }
.cnsite .cn-mapcap { display: block; margin-top: 10px; font-size: 13.5px; opacity: .75; }

/* ---------- footer ---------- */
.cnsite .cn-foot { padding: 52px 28px 24px; }
.cnsite .cn-foot h5 { margin: 0 0 12px; font-size: 12.5px; text-transform: uppercase;
                      letter-spacing: .1em; opacity: .6; font-weight: 650; }
.cnsite .cn-foot p, .cnsite .cn-foot li { font-size: 14.5px; opacity: .82; margin: 0 0 7px; list-style: none; }
.cnsite .cn-foot ul { margin: 0; padding: 0; }
.cnsite .cn-foot .cn-logo { margin-bottom: 12px; }
.cnsite .cn-foot .cn-nav { justify-content: center; margin: 16px 0 0; }
.cnsite .cn-footcta { padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.18); }
.cnsite .cn-fbar { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
                   display: flex; justify-content: space-between; gap: 16px; font-size: 13px; opacity: .68; flex-wrap: wrap; }

/* ---------- the not-available / not-found card ---------- */
.cnsite.cn-msg { max-width: 620px; margin: 60px auto; padding: 40px 32px; text-align: center;
                 border: 1px solid var(--cn-line); border-radius: 14px; }
.cnsite.cn-msg h3 { margin: 0 0 10px; font-size: 24px; }
.cnsite.cn-msg .cn-btn { background: #1f2937; color: #fff; }

/* ---------------------------------------------------------------------------
   COLOUR OWNERSHIP - keep this block last.

   The directory theme sets heading and link colours globally (h1 came out
   navy #0a2346 on a dark hero, which was nearly unreadable). Plain
   inheritance loses to it, so every text colour inside a member site is
   claimed back explicitly here. Each tone then owns its own text colour,
   which is the whole point of the tone system.
   --------------------------------------------------------------------------- */
.cnsite h1, .cnsite h2, .cnsite h3, .cnsite h4, .cnsite h5, .cnsite h6 { color: inherit; }
.cnsite a, .cnsite a:hover, .cnsite a:focus, .cnsite a:visited { color: inherit; }
.cnsite .cn-lead, .cnsite .cn-rich, .cnsite .cn-quote, .cnsite .cn-eyebrow,
.cnsite .cn-rich p, .cnsite .cn-divlist p, .cnsite .cn-svc p { color: inherit; }

/* Cards sit on their own white background whatever the section tone. */
.cnsite .cn-card, .cnsite .cn-card h4, .cnsite .cn-card a { color: var(--cn-ink); }
.cnsite .cn-card p { color: var(--cn-muted); }
.cnsite .cn-card .cn-stars { color: var(--cn-accent); }
.cnsite .cn-boxed, .cnsite .cn-boxed h2, .cnsite .cn-boxed .cn-lead { color: var(--cn-ink); }

/* Buttons and accent chips own their computed contrast colour.
   ---------------------------------------------------------------------------
   :visited MUST stay in every one of these selector lists, and they must be
   written `a.cn-btn` / `a.cn-soc` rather than `.cn-btn` / `.cn-soc`. Here is
   why, because it cost days.

   `.cnsite a:visited { color: inherit }` above is specificity (0,2,1). The old
   rule here was `.cnsite .cn-soc`, which is (0,2,0). So a social chip or button
   pointing at a page the viewer had ALREADY OPENED lost its accent ink and fell
   back to `inherit` - the header's text colour. The member's own Facebook page
   is always visited; their Instagram often is not. Same markup, same fill:
   currentColor, two different colours on screen. The owner reported it as
   "one white and other one is dark" and he was right every single time.

   It only showed on the yellow and green accents because --cn-aink is computed
   from accent brightness: those two are the only presets bright enough to get
   dark ink (#14181f). On red, blue and orange the ink is already #ffffff, the
   same as the inherited colour, so the leak was invisible. That is exactly the
   pattern he described - "only the green and yellow combo".

   And it could not be measured: browsers deliberately report the UNVISITED
   style through getComputedStyle to stop pages sniffing history. Every probe
   came back rgb(20,24,31) for both chips while the screen plainly showed one
   white. Do not try to diagnose this class of bug with JavaScript - screenshot
   it, or open the page in a window with no history.

   `a.cn-soc:visited` is (0,3,1) and wins cleanly. :link is listed too so the
   two states can never drift apart again.
   --------------------------------------------------------------------------- */
.cnsite a.cn-btn, .cnsite a.cn-btn:link, .cnsite a.cn-btn:visited,
.cnsite a.cn-btn:hover, .cnsite a.cn-btn:focus, .cnsite a.cn-btn:active,
.cnsite a.cn-soc, .cnsite a.cn-soc:link, .cnsite a.cn-soc:visited,
.cnsite a.cn-soc:hover, .cnsite a.cn-soc:focus, .cnsite a.cn-soc:active,
.cnsite .cn-btn, .cnsite .cn-mark, .cnsite .cn-ico, .cnsite .cn-soc { color: var(--cn-aink); }
.cnsite a.cn-btn.cn-inv, .cnsite a.cn-btn.cn-inv:link, .cnsite a.cn-btn.cn-inv:visited,
.cnsite a.cn-btn.cn-inv:hover, .cnsite a.cn-btn.cn-inv:focus,
.cnsite .cn-btn.cn-inv { color: var(--cn-ink); }
/* Ghost buttons genuinely want the surrounding colour - their border is
   currentColor - but they still have to say so louder than a:visited. */
.cnsite a.cn-btn.cn-ghost, .cnsite a.cn-btn.cn-ghost:link, .cnsite a.cn-btn.cn-ghost:visited,
.cnsite a.cn-btn.cn-ghost:hover, .cnsite a.cn-btn.cn-ghost:focus,
.cnsite .cn-btn.cn-ghost { color: inherit; }
/* The not-found / not-active notice draws its own button on a fixed dark
   background and has no --cn-aink to inherit, so it has to out-rank the
   visited selectors above rather than sit under them. */
.cnsite.cn-msg a.cn-btn, .cnsite.cn-msg a.cn-btn:link,
.cnsite.cn-msg a.cn-btn:visited, .cnsite.cn-msg a.cn-btn:hover { color: #fff; }

/* THE WHITE BUTTON ON A DARK BAR HAD WHITE WORDS ON IT.

   A solid button in a header or footer bar is drawn as the INVERSE of the
   bar it sits on - dark-on-white in a white strip, white-on-dark in a
   coloured one. The pair is written a few hundred lines below as

     .cnsite .cn-bg-w .cn-b-solid { background: var(--cn-pd); color: #fff; }
     .cnsite .cn-bg-d .cn-b-solid { background: #fff; color: var(--cn-pink); }

   THE BACKGROUND HALF LANDS AND THE COLOUR HALF DOES NOT, and the reason
   is a few lines above this one: .cnsite a.cn-btn:link is (0,3,1) and
   .cnsite .cn-bg-d .cn-b-solid is (0,3,0). A pseudo-class outranks a third
   class, so every one of these buttons takes --cn-aink instead - which is
   the ink computed for the member's ACCENT, a colour the button is not
   painted in.

   BOTH DIRECTIONS BREAK, for opposite members:

     dark bar  + dark accent  -> aink is white -> white on white
     light bar + light accent -> aink is dark  -> dark on dark

   Measured on the dark bars with no design stored: background
   rgb(255,255,255), text rgb(255,255,255), the label sitting there
   invisible on four of the six tones.

   IT IS THE DEFAULT STATE THAT IS BROKEN. With a stored design,
   .cnsite.cn-dsn a.cn-btn:not(...) is (0,5,1) and repaints the button in
   the member's own button colours, readable by construction - and .cn-dsn
   is only emitted when something IS stored. So this hit precisely the
   members who had never opened the design panel.

   THE FIX IS THE SHAPE THE BLOCK ABOVE ALREADY USES for exactly this
   problem: same anchor, same pseudo-classes, one more class. (0,5,1),
   which clears a:link and ties with the design block that legitimately
   overrides it - and a tie later in the file is the design winning, which
   is right.

   WRITTEN OUT PER TONE rather than grouped with :is(), because a browser
   that does not know :is() drops the entire selector list and would take
   the fix down with it.

   :hover IS DELIBERATELY ABSENT from both lists. Hovering repaints the
   button in the accent colour, and --cn-aink is the ink computed for that
   colour - so the one state that was already correct is left alone. */
.cnsite .cn-bg-w a.cn-b-solid, .cnsite .cn-bg-w a.cn-b-solid:link,
.cnsite .cn-bg-w a.cn-b-solid:visited, .cnsite .cn-bg-w a.cn-b-solid:focus,
.cnsite .cn-bg-w a.cn-b-solid:active,
.cnsite .cn-bg-l a.cn-b-solid, .cnsite .cn-bg-l a.cn-b-solid:link,
.cnsite .cn-bg-l a.cn-b-solid:visited, .cnsite .cn-bg-l a.cn-b-solid:focus,
.cnsite .cn-bg-l a.cn-b-solid:active { color: #fff; }
.cnsite .cn-bg-m a.cn-b-solid, .cnsite .cn-bg-m a.cn-b-solid:link,
.cnsite .cn-bg-m a.cn-b-solid:visited, .cnsite .cn-bg-m a.cn-b-solid:focus,
.cnsite .cn-bg-m a.cn-b-solid:active,
.cnsite .cn-bg-d a.cn-b-solid, .cnsite .cn-bg-d a.cn-b-solid:link,
.cnsite .cn-bg-d a.cn-b-solid:visited, .cnsite .cn-bg-d a.cn-b-solid:focus,
.cnsite .cn-bg-d a.cn-b-solid:active,
.cnsite .cn-bg-dd a.cn-b-solid, .cnsite .cn-bg-dd a.cn-b-solid:link,
.cnsite .cn-bg-dd a.cn-b-solid:visited, .cnsite .cn-bg-dd a.cn-b-solid:focus,
.cnsite .cn-bg-dd a.cn-b-solid:active,
.cnsite .cn-tint-light a.cn-b-solid, .cnsite .cn-tint-light a.cn-b-solid:link,
.cnsite .cn-tint-light a.cn-b-solid:visited, .cnsite .cn-tint-light a.cn-b-solid:focus,
.cnsite .cn-tint-light a.cn-b-solid:active { color: var(--cn-pink); }

/* Stars go white on any dark-ish tone so they stay visible. */
.cnsite .cn-t-dark .cn-stars, .cnsite .cn-t-brand .cn-stars,
.cnsite .cn-t-accent .cn-stars { color: #fff; }

/* ---------- wider screens ----------
   With a 1280 ceiling there is room for a fifth masonry column before the
   photos start looking like postage stamps. */
@media (min-width: 1200px) {
  .cnsite .cn-masonry { columns: 5; }
  .cnsite .cn-sec { padding: 72px 32px; }
  /* Sections widen their gutter here, so the header follows or the column
     shifts under itself between 1280 and 1344 of viewport. */
  .cnsite .cn-hbar, .cnsite .cn-strip {
    padding-left: max(32px, calc((100% - 1280px) / 2));
    padding-right: max(32px, calc((100% - 1280px) / 2));
  }
}

/* ---------- mobile ---------- */
@media (max-width: 980px) {
  .cnsite .cn-masonry { columns: 3; }
}
@media (max-width: 780px) {
  .cnsite .cn-sec { padding: 42px 20px; }
  .cnsite .cn-row { flex-direction: column; gap: 26px; }
  .cnsite .cn-row.cn-rev { flex-direction: column; }
  .cnsite .cn-narrowcol { flex: 1; }
  .cnsite .cn-grid { grid-template-columns: 1fr; }
  .cnsite .cn-grid.cn-thumbs { grid-template-columns: repeat(4, 1fr); }
  .cnsite .cn-masonry { columns: 2; }
  .cnsite .cn-h { font-size: 31px; }
  .cnsite .cn-h.cn-sm { font-size: 24px; }
  .cnsite .cn-nav { display: none; }
  .cnsite .cn-foot .cn-nav { display: flex; }
  .cnsite .cn-strip { font-size: 12px; }
  .cnsite .cn-hbar, .cnsite .cn-strip { padding-left: 20px; padding-right: 20px; }
  .cnsite .cn-overlay { padding: 64px 20px; }
  .cnsite .cn-split { flex-direction: column; align-items: flex-start; }
  .cnsite .cn-track img.cn-slide, .cnsite .cn-track .cn-ph.cn-slide,
  .cnsite .cn-track .cn-card.cn-slide { width: 88%; }
  .cnsite .cn-btns { width: 100%; }
}

/* ---------------------- the navy band above the header -------------------
   The directory's own custom CSS reserves room for the fixed mobile navbar:

       @media only screen and (max-width: 991px) { body { margin-top: 50px !important } }

   On the directory's own pages that 50px is filled by nav.navbar. A member's
   website does not render that navbar, so on their page the reservation is
   empty and the html background - a dark navy - shows through it as a band
   above the header. The builder shows it too: its preview frame is narrower
   than 991px whenever the edit panel is open, which trips the same rule.

   Undone HERE, in the renderer's own stylesheet, rather than in the site's
   custom CSS - this one widget draws every member website, so every member
   that exists now, every member added later and every template is covered
   without anyone remembering to do anything.

   `html body` is deliberate: the declaration being overridden is
   !important, so an equally specific `body` selector loses to it. */
@media only screen and (max-width: 991px) {
  html body { margin-top: 0 !important; }
}

/* ------------- and the same navy BELOW a short page ----------------------
   His find, 5 August, on his own domain: a page with one section ends well
   above the fold and everything under the footer is that same dark navy.

   SAME CAUSE, HALF NEVER FIXED. The block above removes the 50px the
   directory's CSS reserves at the TOP; it says nothing about the colour, and
   the colour is the actual problem - `html { background: rgb(10,20,35) }` in
   the directory's own custom CSS. Because html carries a background of its
   own, body's background no longer propagates to the canvas, so the navy is
   what fills every pixel the page does not reach. Above the header in July,
   below the footer today, and it was always going to be both.

   WHITE, HIS CALL, 5 August. It is what `.cnsite` renders on - the white
   tone is the page - so this is the site's own background rather than a
   colour picked to match anything. Weighed against continuing the footer's
   colour, which hides the seam on a short page; he chose the honest one.

   `:root` RATHER THAN `html`, and it is the same trick as `html body` above.
   The two select the same element, but `:root` is a class-level selector and
   outscores a type selector, so this wins on specificity without needing
   !important against a declaration that may not have it.

   HERE RATHER THAN IN THE SITE'S CUSTOM CSS, for the reason written above:
   one widget draws every member website, so every member now, every member
   later and every template is covered with nothing to remember. */
:root { background: #fff; }

/* ---------- block controls: alignment, measure, type size ----------------
   Three settings a member sets per section, validated in widget 71 against
   the same table the panel renders from and turned into a class by
   cnOptCls in widget 66.

   There is deliberately no rule for AUTO, because auto is the ABSENCE of
   the class: a section the member has not touched keeps whatever its
   variant was drawn with. "Normal" is not the same thing - it PINS the
   value, which is what makes it worth offering next to Auto. That is also
   why every normal rule below restates a number instead of inheriting one.

   THE LESSON IN THIS BLOCK, reported live on 30 July: the class goes on the
   <section>, and both of these properties INHERIT - but inheritance loses
   to any rule that sets the property directly on an inner element. Setting
   it on the section and hoping is not enough, so every rule below names the
   inner blocks that would otherwise win. A control that does nothing is
   worse than no control. */

/* ALIGNMENT. Four blocks in this stylesheet set text-align themselves:
   .cn-mid centres (every "text only" variant uses it), .cn-inline and
   .cn-stat centre, .cn-dl goes left. Each alignment names all four, or a
   member presses Left on a centred layout and watches nothing move. */
.cnsite .cn-a-left,
.cnsite .cn-a-left .cn-mid,
.cnsite .cn-a-left .cn-inline,
.cnsite .cn-a-left .cn-stat,
.cnsite .cn-a-left .cn-dl { text-align: left; }

.cnsite .cn-a-centre,
.cnsite .cn-a-centre .cn-mid,
.cnsite .cn-a-centre .cn-inline,
.cnsite .cn-a-centre .cn-stat,
.cnsite .cn-a-centre .cn-dl { text-align: center; }

.cnsite .cn-a-right,
.cnsite .cn-a-right .cn-mid,
.cnsite .cn-a-right .cn-inline,
.cnsite .cn-a-right .cn-stat,
.cnsite .cn-a-right .cn-dl { text-align: right; }

/* Justify is scoped to RUNNING TEXT on purpose. A justified headline gets
   its two or three words stretched the whole width of the column and reads
   as a mistake, so everything else goes left and the paragraphs straighten. */
.cnsite .cn-a-justify,
.cnsite .cn-a-justify .cn-mid,
.cnsite .cn-a-justify .cn-inline,
.cnsite .cn-a-justify .cn-stat,
.cnsite .cn-a-justify .cn-dl { text-align: left; }
.cnsite .cn-a-justify .cn-rich,
.cnsite .cn-a-justify .cn-rich p,
.cnsite .cn-a-justify .cn-lead { text-align: justify; }

/* THE MEASURE. .cn-wrap is the column inside every section - but several
   variants put a .cn-narrow (760px) inside it, and THAT is the binding
   constraint. Full width did nothing at all on a text-only About until
   this named it. The section keeps its own padding either way, so full
   width never puts a word against the edge of a phone. */
.cnsite .cn-w-narrow .cn-wrap,
.cnsite .cn-w-narrow .cn-narrow { max-width: 720px; }
.cnsite .cn-w-normal .cn-wrap { max-width: 1040px; }
.cnsite .cn-w-normal .cn-narrow { max-width: none; }
/* FULL MEANS THE FULL WIDTH OF THE SITE, not the full width of the window.

   It used to mean no ceiling at all, which on a 1750px window ran a 1686px
   line of body copy while the cards in the section above it sat inside 1280 -
   one section breaking the grid every other section on the page keeps. The
   site is 1280 wide in .cn-wrap and in the header bar, so that is what full
   is, and the ladder now climbs to it rather than past it:

       narrow 720   normal 1040   full 1280 (the site)

   t66opt.php reads the site's own .cn-wrap and fails if full stops matching
   it, so this cannot drift apart from whatever the site width becomes. */
.cnsite .cn-w-full .cn-wrap,
.cnsite .cn-w-full .cn-narrow { max-width: 1280px; }

/* Type size. Headline, lead and running text move together but not by the
   same amount - a body paragraph at 19px is a large-print book. */
.cnsite .cn-s-small  .cn-h { font-size: 34px; }
.cnsite .cn-s-normal .cn-h { font-size: 44px; }
.cnsite .cn-s-large  .cn-h { font-size: 54px; }
.cnsite .cn-s-small  .cn-lead { font-size: 16px; }
.cnsite .cn-s-normal .cn-lead { font-size: 18px; }
.cnsite .cn-s-large  .cn-lead { font-size: 20px; }
.cnsite .cn-s-small  .cn-rich { font-size: 15px; }
.cnsite .cn-s-normal .cn-rich { font-size: 16px; }
.cnsite .cn-s-large  .cn-rich { font-size: 18px; }

/* THE PHONE HAS THE LAST WORD, and all three sizes must be named here.
   The rules above are more specific than the stylesheet's own mobile rule,
   so without this a member who picked ANY size - even Normal - would carry
   a 44px desktop headline onto a 360px screen and get three words a line.
   Large is a decision about a desktop column; the scale flattens rather
   than pretending they did not choose. */
@media only screen and (max-width: 991px) {
  .cnsite .cn-s-small  .cn-h { font-size: 26px; }
  .cnsite .cn-s-normal .cn-h { font-size: 31px; }
  .cnsite .cn-s-large  .cn-h { font-size: 34px; }
}

/* ========================= THE STYLES ====================================
   A style is the LOOK a member picks once for their whole site: font
   pairing, button shape, eyebrow treatment, photo shape. Their brand pair
   is untouched - every style wears their own two colours.

   EVERY RULE HERE IS SCOPED UNDER ITS OWN .cn-sty-* CLASS, and 'classic'
   has no class at all. That is not tidiness: 154 sites are published, and
   adding a feature must not move a single one of them. A site that has
   never chosen a style is byte-for-byte what it was.

   Adding a style is a block below, a row in $CN_STYLES (widget 66), a row
   in $CNS_STYLES (widget 71) and a row in $STYLES (widget 72). Nothing
   else moves.

   The eyebrow rules use an inline-block with a border rather than an
   absolutely positioned pseudo-element, so the decoration CENTRES with the
   text when the section is centred. An absolute rule pinned to the left
   edge looked correct until somebody centred a hero. */

/* ---------- SIGNAL - sans, square, a rule under the eyebrow ------------- */
.cnsite.cn-sty-signal { font-family: Inter, system-ui, -apple-system, sans-serif; }
.cnsite.cn-sty-signal .cn-h {
  font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; letter-spacing: -.03em;
}
.cnsite.cn-sty-signal .cn-eyebrow {
  display: inline-block; color: inherit; opacity: 1; font-weight: 700; font-size: 12px;
  padding-bottom: 10px; border-bottom: 3px solid var(--cn-accent);
}
.cnsite.cn-sty-signal .cn-btn {
  border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
}
.cnsite.cn-sty-signal .cn-img, .cnsite.cn-sty-signal .cn-ph,
.cnsite.cn-sty-signal .cn-card { border-radius: 2px; }

/* ---------- CIVIC - plain sans, an edge on the photo ------------------- */
.cnsite.cn-sty-civic { font-family: Inter, system-ui, -apple-system, sans-serif; }
.cnsite.cn-sty-civic .cn-h { font-family: Inter, sans-serif; font-weight: 800; letter-spacing: -.025em; }
.cnsite.cn-sty-civic .cn-eyebrow {
  color: inherit; opacity: 1; font-weight: 600; letter-spacing: .1em;
}
.cnsite.cn-sty-civic .cn-btn {
  border-radius: 5px; font-weight: 600; letter-spacing: .005em; padding-left: 28px; padding-right: 28px;
}
.cnsite.cn-sty-civic .cn-card { border-radius: 4px; }
.cnsite.cn-sty-civic .cn-img, .cnsite.cn-sty-civic .cn-ph { border-radius: 0; }
/* The coloured edge is a border on the image itself, so it needs no markup
   and cannot end up beside the wrong picture. Scoped to the storytelling
   sections - a gallery of twelve photos each wearing a bar is a fence. */
.cnsite.cn-sty-civic .cn-about .cn-img,
.cnsite.cn-sty-civic .cn-hero .cn-img { border-left: 9px solid var(--cn-brand); }

/* ---------- VERDANT - rounded, friendly, a circular portrait ----------- */
.cnsite.cn-sty-verdant { font-family: Inter, system-ui, sans-serif; }
.cnsite.cn-sty-verdant .cn-h {
  font-family: Poppins, Inter, sans-serif; font-weight: 700; letter-spacing: -.025em;
}
.cnsite.cn-sty-verdant .cn-eyebrow {
  font-family: Poppins, Inter, sans-serif; text-transform: none; letter-spacing: .005em;
  font-size: 15px; font-weight: 600; color: var(--cn-brand); opacity: 1;
}
.cnsite.cn-sty-verdant .cn-btn {
  border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; font-size: 13px;
  padding-left: 30px; padding-right: 30px;
}
.cnsite.cn-sty-verdant .cn-card { border-radius: 16px; }
.cnsite.cn-sty-verdant .cn-img, .cnsite.cn-sty-verdant .cn-ph { border-radius: 14px; }
/* Only the About portrait goes round, and only when it is the wide one -
   a circle needs a square, so the crop is forced here rather than hoped for. */
.cnsite.cn-sty-verdant .cn-about .cn-img.cn-wide,
.cnsite.cn-sty-verdant .cn-about .cn-ph.cn-wide {
  border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; max-width: 380px;
  margin-left: auto; margin-right: auto;
}

/* ---------- EDITORIAL - serif, quiet, a two-tone dash ------------------ */
.cnsite.cn-sty-editorial { font-family: 'EB Garamond', Georgia, serif; }
.cnsite.cn-sty-editorial .cn-h {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 600; letter-spacing: 0; line-height: 1.2;
}
.cnsite.cn-sty-editorial .cn-rich,
.cnsite.cn-sty-editorial .cn-lead { font-size: 18px; line-height: 1.7; }
.cnsite.cn-sty-editorial .cn-eyebrow {
  font-family: Inter, sans-serif; font-size: 11.5px; letter-spacing: .16em; opacity: 1;
}
/* One pseudo-element, two tones, drawn with a gradient - no extra markup
   and it sits on the text baseline whatever the alignment. */
.cnsite.cn-sty-editorial .cn-eyebrow::before {
  content: ''; display: inline-block; width: 64px; height: 2px; margin-right: 14px;
  vertical-align: middle; opacity: .75;
  background: linear-gradient(90deg, var(--cn-accent) 0 30px, transparent 30px 34px, currentColor 34px 64px);
}
.cnsite.cn-sty-editorial .cn-btn {
  font-family: Inter, sans-serif; border-radius: 2px; text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; font-weight: 600;
}
.cnsite.cn-sty-editorial .cn-img, .cnsite.cn-sty-editorial .cn-ph,
.cnsite.cn-sty-editorial .cn-card { border-radius: 0; }

/* ---------- MERIDIAN - serif headline, soft shapes --------------------- */
.cnsite.cn-sty-meridian { font-family: Inter, system-ui, sans-serif; }
.cnsite.cn-sty-meridian .cn-h {
  font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.01em;
}
.cnsite.cn-sty-meridian .cn-eyebrow {
  font-family: Inter, sans-serif; color: var(--cn-accent); opacity: 1;
  letter-spacing: .18em; font-size: 11.5px; font-weight: 600;
}
.cnsite.cn-sty-meridian .cn-btn { border-radius: 99px; }
.cnsite.cn-sty-meridian .cn-card { border-radius: 14px; }
/* One corner squared off. It is the cheapest detail in the whole set and
   the one people ask about. */
.cnsite.cn-sty-meridian .cn-img, .cnsite.cn-sty-meridian .cn-ph { border-radius: 14px 14px 14px 0; }

/* On a phone every style keeps its type but loses its swagger: the big
   serif headlines and the wide tracking are decisions about a desktop
   column. The base stylesheet already brings .cn-h down; these keep the
   decorations from crowding a 360px screen. */
@media only screen and (max-width: 991px) {
  .cnsite.cn-sty-editorial .cn-eyebrow::before { width: 40px; margin-right: 10px;
    background: linear-gradient(90deg, var(--cn-accent) 0 18px, transparent 18px 22px, currentColor 22px 40px); }
  .cnsite.cn-sty-verdant .cn-about .cn-img.cn-wide { max-width: 260px; }
  .cnsite.cn-sty-signal .cn-eyebrow { padding-bottom: 8px; }
}
/* ---------- links inside a member's own writing --------------------------
   The About body is the one place a member's own markup reaches the page,
   and as of 31 July 2026 that markup may contain an anchor. Everything else
   the sanitiser keeps - bold, italic, underline, lists - already inherits
   the surrounding type and needs no rule. A link does, for two reasons.

   THE FIRST IS THE DIRECTORY THEME. It sets link colour globally and beats
   plain inheritance, which is why this stylesheet already reclaims headings
   and links in a final block. Without a rule here a member's link renders
   in the directory's blue on the member's own site, in every style, and
   looks like a mistake.

   THE SECOND IS THAT A LINK MUST LOOK LIKE ONE. Colour alone is not enough
   - it fails for the reader who cannot separate those two colours, and a
   member's brand pair is chosen by the member, so there is no contrast
   ratio anyone can promise here. The underline is what carries it.

   Drawn from the member's OWN pair: their brand for the word, their accent
   for the line under it. A style that changes their fonts changes these
   with them, because nothing below fixes a size or a family. */
.cnsite .cn-rich a {
  color: var(--cn-brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  text-decoration-color: var(--cn-accent);
  /* A pasted URL with no spaces in it is one long word, and one long word
     in a 320px column pushes the whole page sideways. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.cnsite .cn-rich a:hover,
.cnsite .cn-rich a:focus {
  color: var(--cn-accent);
  text-decoration-color: var(--cn-accent);
}
/* On a dark, brand or accent band the brand colour is the background, so a
   link painted in it disappears. Inherit the band's own computed ink and
   let the underline do the work instead - the same stance cnInk takes for
   the header, and for the same reason: the member never chooses this, so it
   can never be chosen wrongly. */
.cnsite .cn-t-dark .cn-rich a,
.cnsite .cn-t-brand .cn-rich a,
.cnsite .cn-t-accent .cn-rich a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}
.cnsite .cn-t-dark .cn-rich a:hover,
.cnsite .cn-t-brand .cn-rich a:hover,
.cnsite .cn-t-accent .cn-rich a:hover,
.cnsite .cn-t-dark .cn-rich a:focus,
.cnsite .cn-t-brand .cn-rich a:focus,
.cnsite .cn-t-accent .cn-rich a:focus { opacity: .78; }

/* ========================= THE DESIGN PANEL ==============================
   The tokens a member sets in the builder's Design tab - their palette,
   their type, their two buttons, their two corner radii.

   THE WHOLE BLOCK IS WRITTEN AS FALLBACKS. Every rule here restates a value
   the sheet above already sets, with a custom property in front of it:

       .cnsite.cn-dsn .cn-btn { border-radius: var(--cn-rb, var(--cn-br)); }

   Unset property -> the fallback -> exactly the pixel value that was there
   before this block existed. So a member who never opens the panel renders
   byte-for-byte what they rendered yesterday, and 154 published sites do not
   move. Same stance that let the styles ship in one evening.

   TWO THINGS MAKE IT SAFE, and both matter:

   1. .cn-dsn is on the .cnsite wrapper ONLY when the member actually has a
      design stored. No design, no class, none of these rules exist. It is
      also what buys the specificity: a .cn-sty-* rule is (0,3,0) and would
      otherwise beat a plain .cnsite rule, so the member's own number would
      lose to the style they picked.

   2. The per-style defaults below (--cn-br, --cn-ir, --cn-fh ...) name what
      each style already draws. That is why an UNSET token falls back to the
      style's own value rather than to the plain one - a member on Verdant
      who pins nothing keeps their pill button.

   COUPLING: widget 66's cnDsnVars() emits these properties, widget 71
   validates what may be stored and widget 72 offers it. t66dsn.php reads
   this file and the widget and fails if a fallback here stops matching the
   value the sheet above it sets. */

/* ---- what each style already draws, named ------------------------------
   Two families per site is a hard rule, so a type level picks WHICH of the
   two - never a font from a list. These are the two, per style. */
.cnsite {
  --cn-fh: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cn-fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cn-wh: 700;
  --cn-bp: 13px 26px;
  --cn-bf: 15px;
  --cn-br: 7px;
  --cn-ir: 10px;
  --cn-cr: 10px;
}
.cnsite.cn-sty-signal {
  --cn-fh: 'Plus Jakarta Sans', Inter, sans-serif;
  --cn-fb: Inter, system-ui, -apple-system, sans-serif;
  --cn-wh: 800; --cn-bf: 13px; --cn-br: 2px; --cn-ir: 2px; --cn-cr: 2px;
}
.cnsite.cn-sty-civic {
  --cn-fh: Inter, sans-serif;
  --cn-fb: Inter, system-ui, -apple-system, sans-serif;
  --cn-wh: 800; --cn-bp: 13px 28px; --cn-br: 5px; --cn-ir: 0; --cn-cr: 4px;
}
.cnsite.cn-sty-verdant {
  --cn-fh: Poppins, Inter, sans-serif;
  --cn-fb: Inter, system-ui, sans-serif;
  --cn-wh: 700; --cn-bp: 13px 30px; --cn-bf: 13px; --cn-br: 99px; --cn-ir: 14px; --cn-cr: 16px;
}
.cnsite.cn-sty-editorial {
  --cn-fh: 'EB Garamond', Georgia, serif;
  --cn-fb: 'EB Garamond', Georgia, serif;
  --cn-wh: 600; --cn-bf: 12px; --cn-br: 2px; --cn-ir: 0; --cn-cr: 0;
}
.cnsite.cn-sty-meridian {
  --cn-fh: Fraunces, Georgia, serif;
  --cn-fb: Inter, system-ui, sans-serif;
  --cn-wh: 600; --cn-br: 99px; --cn-ir: 14px 14px 14px 0; --cn-cr: 14px;
}

/* ---- type: size -------------------------------------------------------
   The member sets ONE number per level and it becomes that level's NORMAL.
   Small and Large - the per-section size control, live since 30 July - are
   restated here so they scale from the member's number instead of fighting
   it. Without them a site set to 54px would drop back to 44 the moment a
   section was pinned to Normal, which reads as a bug rather than as a rule.

   THE PHONE BREAKPOINT NAMES THE SIZES TOO. The desktop rules here are more
   specific than the sheet's own mobile rule, so a size missing from the
   media query carries a 54px headline onto a 360px screen. This is the same
   trap the block controls hit on 30 July; it is written down twice because
   it was not noticed by reading either time. */
.cnsite.cn-dsn .cn-h { font-size: var(--cn-h1s, 44px); }
.cnsite.cn-dsn .cn-h.cn-sm { font-size: var(--cn-h2s, 30px); }
.cnsite.cn-dsn .cn-h.cn-xs { font-size: var(--cn-h3s, 21px); }
.cnsite.cn-dsn .cn-lead { font-size: var(--cn-pls, 18px); }
.cnsite.cn-dsn .cn-rich { font-size: var(--cn-ps, 16px); }
.cnsite.cn-dsn.cn-sty-editorial .cn-lead { font-size: var(--cn-pls, 18px); }
.cnsite.cn-dsn.cn-sty-editorial .cn-rich { font-size: var(--cn-ps, 18px); }
.cnsite.cn-dsn .cn-s-small .cn-h { font-size: var(--cn-h1ss, 34px); }
.cnsite.cn-dsn .cn-s-normal .cn-h { font-size: var(--cn-h1s, 44px); }
.cnsite.cn-dsn .cn-s-large .cn-h { font-size: var(--cn-h1sl, 54px); }
.cnsite.cn-dsn .cn-s-small .cn-lead { font-size: var(--cn-plss, 16px); }
.cnsite.cn-dsn .cn-s-normal .cn-lead { font-size: var(--cn-pls, 18px); }
.cnsite.cn-dsn .cn-s-large .cn-lead { font-size: var(--cn-plsl, 20px); }
.cnsite.cn-dsn .cn-s-small .cn-rich { font-size: var(--cn-pss, 15px); }
.cnsite.cn-dsn .cn-s-normal .cn-rich { font-size: var(--cn-ps, 16px); }
.cnsite.cn-dsn .cn-s-large .cn-rich { font-size: var(--cn-psl, 18px); }
@media (max-width: 780px) {
  .cnsite.cn-dsn .cn-h { font-size: var(--cn-h1m, 31px); }
  .cnsite.cn-dsn .cn-h.cn-sm { font-size: var(--cn-h2m, 24px); }
}
@media only screen and (max-width: 991px) {
  .cnsite.cn-dsn .cn-s-small .cn-h { font-size: var(--cn-h1ms, 26px); }
  .cnsite.cn-dsn .cn-s-normal .cn-h { font-size: var(--cn-h1m, 31px); }
  .cnsite.cn-dsn .cn-s-large .cn-h { font-size: var(--cn-h1ml, 34px); }
}

/* ---- type: family and weight ------------------------------------------
   H1 excludes the smaller two, which wear the same .cn-h class. Without the
   :not() pair, pinning the headline font would quietly repaint every H2 and
   H3 on the site as well. */
.cnsite.cn-dsn .cn-h:not(.cn-sm):not(.cn-xs) {
  font-family: var(--cn-h1f, var(--cn-fh)); font-weight: var(--cn-h1w, var(--cn-wh));
  line-height: var(--cn-h1lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h1lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-h.cn-sm {
  font-family: var(--cn-h2f, var(--cn-fh)); font-weight: var(--cn-h2w, var(--cn-wh));
  line-height: var(--cn-h2lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h2lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-h.cn-xs {
  font-family: var(--cn-h3f, var(--cn-fh)); font-weight: var(--cn-h3w, var(--cn-wh));
  line-height: var(--cn-h3lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h3lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-rich {
  font-family: var(--cn-pf, var(--cn-fb)); font-weight: var(--cn-pw, 400);
  line-height: var(--cn-plh, 1.7);
  letter-spacing: var(--cn-plt, normal);
}
/* THE INTRO LINE IS P2 AND FALLS BACK TO P1. Two var() deep on purpose: a
   member who never opens P2 gets exactly what P1 says, which is what the
   single rule this replaced already did. */
.cnsite.cn-dsn .cn-lead {
  font-family: var(--cn-p2f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p2w, var(--cn-pw, 400));
  /* Editorial draws its lead at 1.7 rather than 1.6, so the default is a
     variable and not a literal - the eyebrow's lesson, reapplied before it
     could bite a second time. */
  line-height: var(--cn-p2lh, var(--cn-p2lhd, 1.6));
  letter-spacing: var(--cn-p2lt, normal);
}
/* Three deep, and every innermost value is what that style already draws.
   The eyebrow inherits the BODY family today - it sets no font-family of
   its own - so `inherit` is the honest floor here, not var(--cn-fh). */
.cnsite.cn-dsn .cn-eyebrow {
  font-size: var(--cn-h4s, var(--cn-ebs, 12.5px));
  font-family: var(--cn-h4f, var(--cn-ebf, inherit));
  font-weight: var(--cn-h4w, var(--cn-ebw, inherit));
  line-height: var(--cn-h4lh, normal);
  /* THE TRACKING IS THE EYEBROW. It was held back this morning on the
     grounds that capitals and spacing belong to the chosen look - and they
     still do, which is why the default is that look's own value. What has
     changed is that a member now has a field to overrule it with. */
  letter-spacing: var(--cn-h4lt, var(--cn-eblt, .14em));
}

/* ---- type: colour -----------------------------------------------------
   ONLY on the two light backgrounds. On dark, brand and accent the text
   colour is computed from the background and always has been - that is the
   rule that makes an unreadable heading impossible, and a palette colour
   pinned globally would drive straight through it. A member who wants a
   coloured headline gets one everywhere it can be read. */
.cnsite.cn-dsn .cn-t-white .cn-h:not(.cn-sm):not(.cn-xs),
.cnsite.cn-dsn .cn-t-light .cn-h:not(.cn-sm):not(.cn-xs) { color: var(--cn-h1c, inherit); }
.cnsite.cn-dsn .cn-t-white .cn-h.cn-sm,
.cnsite.cn-dsn .cn-t-light .cn-h.cn-sm { color: var(--cn-h2c, inherit); }
.cnsite.cn-dsn .cn-t-white .cn-h.cn-xs,
.cnsite.cn-dsn .cn-t-light .cn-h.cn-xs { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-t-white .cn-lead, .cnsite.cn-dsn .cn-t-light .cn-lead,
.cnsite.cn-dsn .cn-t-white .cn-rich, .cnsite.cn-dsn .cn-t-light .cn-rich,
.cnsite.cn-dsn .cn-t-white .cn-rich p,
.cnsite.cn-dsn .cn-t-light .cn-rich p { color: var(--cn-pc, inherit); }
/* Same selector, one line later, so P2's colour beats P1's on the lead
   without either rule having to grow a class nobody can see. */
.cnsite.cn-dsn .cn-t-white .cn-lead,
.cnsite.cn-dsn .cn-t-light .cn-lead { color: var(--cn-p2c, var(--cn-pc, inherit)); }
/* Light tones only, like every other coloured text here. On dark, brand and
   accent the colour is computed from the background and must stay computed -
   that is the rule that makes an unreadable eyebrow impossible. */
.cnsite.cn-dsn .cn-t-white .cn-eyebrow,
.cnsite.cn-dsn .cn-t-light .cn-eyebrow { color: var(--cn-h4c, var(--cn-ebc, inherit)); }

/* ---- type: THE CARDS, WHICH WERE NEVER IN IT --------------------------
   17px and 14px were written into the base rules, so the whole Design tab
   drove .cn-lead and .cn-rich and left every service card behind.

   EVERY FALLBACK IS TODAY'S VALUE, which is what makes this safe to push
   at 154 published sites: with no design row, or with a member who has
   never touched the type levels, these resolve to exactly the numbers the
   base rules already carry and nothing moves.

   A CARD IS ALWAYS A WHITE BOX, so a palette colour on it is always
   readable and needs no tone guard. .cn-svc has no box - it stands on the
   section's own background - so it keeps the same light-tones-only guard
   every other coloured text in this file uses. That asymmetry is the rule
   that makes an unreadable heading impossible, not an oversight. */
.cnsite.cn-dsn .cn-card h4, .cnsite.cn-dsn .cn-svc h4 {
  font-size: var(--cn-cth, 17px);
  font-family: var(--cn-h3f, var(--cn-fh));
  font-weight: var(--cn-ctw, 650);
  line-height: var(--cn-h3lh, normal);
  letter-spacing: var(--cn-h3lt, normal);
}
.cnsite.cn-dsn .cn-card p, .cnsite.cn-dsn .cn-svc p {
  font-size: var(--cn-cps, 14px);
  font-family: var(--cn-p3f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p3w, var(--cn-pw, inherit));
  /* 1.55 and not P1's 1.7 - card text has always been tighter, and falling
     back to P1 here would change every card the day this shipped. */
  line-height: var(--cn-p3lh, 1.55);
  letter-spacing: var(--cn-p3lt, normal);
}
.cnsite.cn-dsn .cn-card h4 { color: var(--cn-h3c, var(--cn-ink)); }
.cnsite.cn-dsn .cn-card p { color: var(--cn-p3c, var(--cn-pc, var(--cn-muted))); }
.cnsite.cn-dsn .cn-t-white .cn-svc h4,
.cnsite.cn-dsn .cn-t-light .cn-svc h4 { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-t-white .cn-svc p,
.cnsite.cn-dsn .cn-t-light .cn-svc p { color: var(--cn-p3c, var(--cn-pc, inherit)); }

/* ---- buttons ----------------------------------------------------------
   Button 1 is the solid one every section already draws; Button 2 is the
   outlined one beside it. Two, because a dark button dies on a dark band.

   Text colour is COMPUTED from the fill and mouse-over, never chosen -
   cnInk() decides it, the same rule the header has always followed. So the
   member picks two colours and cannot make an unreadable button. */
.cnsite.cn-dsn .cn-btn { border-radius: var(--cn-rb, var(--cn-br)); }
/* BUTTON 1 CAN BE AN OUTLINE NOW - 4 September. It never could, because it
   is the SOLID one: .cn-btn carries border:0 and this rule never asked for
   one back. --cn-b1bw is 0 until the member switches this style's Look to
   Outline, so every published button on every site keeps the border it has
   always had, which is none. The colour defaults to transparent rather than
   currentColor for the same reason: a width of 0 shows nothing either way,
   but a stray 1px from somewhere else would show the wrong thing. */
.cnsite.cn-dsn .cn-btn:not(.cn-ghost):not(.cn-inv) {
  background: var(--cn-b1bg, var(--cn-accent));
  border: var(--cn-b1bw, 0) solid var(--cn-b1bd, transparent);
  padding: var(--cn-b1p, var(--cn-bp)); font-size: var(--cn-b1f, var(--cn-bf));
}
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv),
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv):link,
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv):visited,
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv):focus,
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv):active,
.cnsite.cn-dsn .cn-btn:not(.cn-ghost):not(.cn-inv) { color: var(--cn-b1ink, var(--cn-aink)); }
.cnsite.cn-dsn .cn-btn:not(.cn-ghost):not(.cn-inv):hover,
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv):hover {
  background: var(--cn-b1hv, var(--cn-b1bg, var(--cn-accent)));
  color: var(--cn-b1hi, var(--cn-b1ink, var(--cn-aink)));
  border-color: var(--cn-b1hbd, var(--cn-b1bd, transparent));
  filter: var(--cn-b1fx, brightness(1.07));
}
.cnsite.cn-dsn .cn-btn.cn-ghost {
  background: var(--cn-b2bg, transparent);
  border-color: var(--cn-b2bd, currentColor);
  padding: var(--cn-b2p, var(--cn-bp)); font-size: var(--cn-b2f, var(--cn-bf));
}
.cnsite.cn-dsn a.cn-btn.cn-ghost,
.cnsite.cn-dsn a.cn-btn.cn-ghost:link,
.cnsite.cn-dsn a.cn-btn.cn-ghost:visited,
.cnsite.cn-dsn a.cn-btn.cn-ghost:focus,
.cnsite.cn-dsn a.cn-btn.cn-ghost:active,
.cnsite.cn-dsn .cn-btn.cn-ghost { color: var(--cn-b2ink, inherit); }
.cnsite.cn-dsn .cn-btn.cn-ghost:hover,
.cnsite.cn-dsn a.cn-btn.cn-ghost:hover {
  background: var(--cn-b2hv, var(--cn-b2bg, transparent));
  color: var(--cn-b2hi, var(--cn-b2ink, inherit));
  border-color: var(--cn-b2hbd, var(--cn-b2bd, currentColor));
  filter: none; opacity: var(--cn-b2op, .78);
}

/* Two buttons of DIFFERENT sizes in one row: the row is an inline-flex and
   its default alignment is stretch, so the small one was being pulled back
   up to the tall one's height. The padding and the type were correct all
   along - the box was not. Scoped to .cn-dsn because it is only possible to
   have two different sizes once a member has set one. */
.cnsite.cn-dsn .cn-btns { align-items: center; }

/* ---- corners ----------------------------------------------------------
   Two numbers, not one: a pill button with square photos is a real look and
   Verdant already ships it. Images means photos, placeholders, cards and
   the boxed panel - NOT the logo. The logo is the member's own artwork and
   rounding it cuts into it. */
.cnsite.cn-dsn .cn-img, .cnsite.cn-dsn .cn-ph { border-radius: var(--cn-ri, var(--cn-ir)); }
.cnsite.cn-dsn .cn-card { border-radius: var(--cn-ri, var(--cn-cr)); }
.cnsite.cn-dsn .cn-boxed { border-radius: var(--cn-ri, 14px); }
.cnsite.cn-dsn .cn-rich img { border-radius: var(--cn-ri, 8px); }

/* ---- PREVIEW ONLY: the section browser's shelf ------------------------
   `?bare=1` puts cn-bare on the wrapper and the page arrives as sections
   and nothing else. The browser stacks a member's own sections to be
   looked at and chosen from - a header and a footer round each one would
   be most of the picture and none of the choice.

   DIRECT CHILDREN only. A member's own layout may hold a section that
   draws something with one of these class names inside it, and a preview
   that quietly deleted part of the thing being previewed would be worse
   than no preview. */
.cnsite.cn-bare > .cn-head,
.cnsite.cn-bare > .cn-foot { display: none; }

/* ---- PREVIEW ONLY: the shelf paints its own gaps ----------------------
   The same three fixes the header drawer got, asked for in one sentence:
   "just like how remove the round cornors on the header and footer, let do
   the same with all other seciton too... and remove the white background."

   The drawer draws a title bar over each card and it needs somewhere to put
   it that is NOT on top of the section being previewed. So the shelf leaves
   a margin, and the margin is dark - a white band between two cards reads
   as part of the section above it, which is exactly what he pointed at in
   the parts drawer an hour earlier.

   THE NUMBER IS IN RENDER PIXELS AND IT GETS SHRUNK. The section drawer is
   430px wide against a 1336px render - about 0.29 - so 116px lands near
   34px on screen: 26 for the bar and the rest clear air. The parts drawer
   is WIDER and therefore needs LESS margin, which is why that number is 64
   and this one is 116, and why neither may be copied from the other.
   t72brw checks each against the drawer width it belongs to.

   flow-root is load-bearing rather than tidy: without it the FIRST
   section's top margin collapses through this element, the background
   starts below it, and the strip above comes out white. That shipped once
   already and he found it inside ten minutes. */
.cnsite.cn-bare { background: #0e1526; display: flow-root; }
.cnsite.cn-bare > .cn-sec { margin-top: 116px; }
.cnsite.cn-bare > .cn-sec:first-child { margin-top: 112px; }

/* ---- PREVIEW ONLY: a thumbnail is not a page of copy -------------------
   His words, looking at four About previews stuffed with his own real
   About text: "we dont want to fill there text in the thumbnail like there
   about us text, looks bad ... all section needs to looks nice because they
   are like a thumbnail."

   He is right, and the answer is not to fake the words - it is to show
   fewer of them. A shelf card is about a fifth of full size, so copy that
   reads as two tidy paragraphs on the real page arrives as a grey block,
   and every text-led variant looks the same as every other. The member's
   OWN words still fill the section the moment it lands on the page. The
   thumbnail stops after a few lines and fades out, so the cut reads as
   deliberate rather than as something broken.

   ONLY the two classes that carry body copy. Headlines, eyebrows, buttons,
   figures and photos are what tell one arrangement from another, and they
   are short by nature - clamping them would make the previews MORE alike,
   which is the opposite of the point. */
.cnsite.cn-bare .cn-rich,
.cnsite.cn-bare .cn-lead {
  /* 16em, and the number was MEASURED against his own About copy in a live
     drawer rather than guessed. At 5.6em a text-only card came out 70px tall
     beside a 134px photo card - a near-empty white band, which is a worse
     way to be unreadable than a grey block. At 16em the four About cards
     land at 107 / 133 / 133 / 96, so the shelf reads as one tidy set and a
     text-led variant still visibly carries text. */
  max-height: 16em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, transparent);
}

/* ======================= THE CLAMP ==================================== */
/* NOTHING THE MEMBER TYPES MAY CHANGE THE SHAPE OF THE LAYOUT.

   His condition, and it is a dependency rather than a preference - the
   auto-fill gets its licence FROM this, not the other way round:

     "right they data can go, only if the display layout doesn't get messed
      up and it matches look and feel 100%"

   Measured on his own account first: his first service is called "Concrete
   Slab Repair & Leveling For Residential Homes". Nine words. Three cards
   side by side with titles of one, three and one lines means the three
   pictures below them do not line up, and a member seeing that concludes
   the SECTION is broken. It is not. Their service is called nine words.

   THE OTHER HALF OF THE SAME RULE IS ALREADY IN THIS FILE, thirty lines up:
   pictures crop to a pinned ratio rather than pushing their card taller.
   Text clamps to a LINE COUNT, pictures crop to a RATIO, and between them
   nothing a member supplies can move anything.

   AND IT IS WHY EDITING IS AN ESCAPE HATCH, NOT THE FIX. If a long title
   only looked right because the member went in and shortened it, every one
   of them would have to be a designer to get a decent page - and most will
   not be, so most pages would go out looking broken. The layout is robust
   first. They can still shorten it; they do not have to.

   -webkit-line-clamp with -webkit-box is the one that works everywhere,
   including in every browser this directory's members actually use. The
   unprefixed `line-clamp` is listed beside it so this ages forwards. */
/* ---- THE CLAMP, LOOSENED - 30 August ---------------------------------
   Three lines cut every card on his page mid-sentence - "recovering from
   injury, or anyone who...", "into your workplace with a..." - while the
   site he is copying shows the whole paragraph. It was the single most
   visible difference left between the two.

   RAISED, NOT REMOVED. The clamp is not there to be tidy; it is there so
   one member who pastes four paragraphs into a card cannot make a row of
   cards a screen and a half tall. Seven lines is past anything anybody
   writes on a card and still a ceiling. Three lines was simply set too
   near the middle of normal.

   The heading goes 2 -> 3 for the same reason: a card called "Semi Private
   Personal Training" wraps to three at the sizes he is now using. */
.cnsite .cn-card h4,
.cnsite .cn-svc h4 {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.cnsite .cn-card p,
.cnsite .cn-svc p {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden;
}
/* A section's own heading gets two lines and its lead gets three. A heading
   is the one piece of text a member is most likely to write a paragraph
   into, and it is the piece with the most air around it to lose. */
.cnsite .cn-h {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cnsite .cn-lead {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* NOT the About prose. That section exists to be read at length, it is one
   column rather than a row of equals, and there is nothing beside it to
   fall out of line with. Clamping it would be cutting off the one thing the
   member actually wrote. .cn-rich is deliberately absent from all of this. */

/* ------------------------- THE SHORT LAST ROW -------------------------- */
/* NOT DONE HERE, and the first attempt is worth recording because it looked
   right and did nothing at all.

     .cn-grid { justify-content: center; }

   That is a no-op on this grid. The tracks are `repeat(var(--cn-cols,3),
   minmax(0,1fr))`, so they always fill the container, there is no free
   space for justify-content to distribute, and the orphan still sits in
   column one. It would have shipped as a rule that silently did nothing -
   which is the exact failure this project spent the day writing rules
   about.

   THE CORRECT SHAPE, for whoever does it: the renderer knows both numbers,
   so PHP emits `grid-column-start` on the FIRST item of the short last row.
   With c columns and r left over:

     left    1
     centre  floor((c - r) / 2) + 1
     right   c - r + 1

   One integer, computed once, no class explosion and nothing for the CSS to
   guess. It belongs with the panel control that chooses between the three,
   and neither exists yet. See HANDOVER_9 section 10r. */
.cnsite .cn-grid > * { min-width: 0; }

/* ---- ONE LEVEL OF SUB-MENU ---------------------------------------
   NOTE THE BANNER STYLE. It is not the ===== box every other section of
   this file opens with, and that is load-bearing: splice.py finds the
   start of the tail by looking for the FIRST line matching the parts
   stylesheet's own opening line, which is a plain row of equals signs
   with no title on it. Written that way, this comment WAS that line, and
   the next build cut the file off here and threw the whole tail away.
   Caught by splice.py --check on the first run rather than in a push.

   The markup is in w66.data.php and w66.parts.inc.php and is the same
   three elements everywhere it appears:

     <span class='cn-navgrp'> <a>Parent</a>
       <span class='cn-navsub'> <a>Child</a> <a>Child</a> </span>
     </span>

   plus <ul class='cn-fsub'> for the footer's own links column, which is a
   list rather than a row and nests by being a list.

   IT IS ABOVE THE SPLICE SEAM ON PURPOSE. Everything below the banner that
   follows this block is the TAIL, and splice.py replaces the whole tail
   from w66.parts.css every time it runs - so a rule written down there
   would be silently thrown away by the next build. Nothing here is allowed
   to depend on being late in the file either: the tail styles .cn-pnav and
   .cn-fl, and on a specificity TIE the later rule wins, so every selector
   below that has to beat one of those carries an extra class on purpose.
   t66pages asserts both facts.

   A MEMBER WITH NO CHILDREN GETS BYTE-IDENTICAL RENDERING. Not one selector
   here matches anything unless .cn-navgrp, .cn-navsub or .cn-fsub is in the
   markup, and the renderer emits none of those until a member nests a page.
   The four rules that touch elements which already exist - the header, the
   two kinds of bar, the slot - are gated on :has(.cn-navgrp) for exactly
   that reason.

   THE COLOURS ARE THE MEMBER'S, read from the properties this file already
   sets: the five band tokens (--cn-pw ... --cn-pdd), the hairlines, the
   accent, and the card radius from their Design panel. No hex is introduced
   except as a fallback for a page rendered without the renderer - the same
   stance the bands themselves take a hundred lines down. And per the rule
   at the band block: --cn-brand is NEVER read here for a surface.
   =================================================================== */

/* ---- the default is a PLAIN NESTED LIST that needs no pointer ---------
   Static, visible, indented. This is what the FOOTER gets and what the
   PHONE PANEL gets - both places where the children are already on screen
   and there is no pointer to open anything with. The drop-down below is
   the exception, added back for the header bar.

   THE NUMBER THIS BLOCK HANDS OVER AT IS NOT A FREE CHOICE. It has to be
   the width at which the header menu stops being drawn, and that width is
   set by ONE rule far below this one - `.cn-mbtn { display: flex }` inside
   `@media (max-width: 760px)`, which is where the hamburger appears and
   the bar's menu goes into the panel. So the header menu is on screen at
   761px and up, and the drop-down has to start at exactly 761px.

   IT SAID 992 FOR A DAY AND THAT WAS A BUG. The comment that used to sit
   here asserted "below 991px the stylesheet hides the header menu". It
   does not and it never did - 991 is the directory theme's breakpoint for
   its OWN navbar, not this renderer's. The result was that from 761px to
   991px the header menu was still in the bar while its children had
   already fallen back to this indented list, so a parent and its child
   stacked into the middle of a horizontal row and shoved the rest of the
   menu sideways. He caught it at about 950px: "when is this size, menu is
   messed up." The old header family has the same shape one step lower -
   `.cn-nav` hides at 780px - so 761 covers both with no gap.

   t66pages reads BOTH numbers out of this file and fails when they stop
   agreeing. Move the hamburger breakpoint and that assertion tells you
   this one has to move with it. */
.cnsite .cn-navgrp {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: inherit; min-width: 0;
}
.cnsite .cn-navsub {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: inherit; min-width: 0;
  padding-left: 14px;
}
/* Children read as children rather than as more of the same row. Written
   with .cn-navgrp in front so it beats .cn-pnav a and .cn-nav a, which live
   in the spliced tail and would otherwise win the tie by being later. */
.cnsite .cn-navgrp .cn-navsub a {
  text-transform: none; letter-spacing: normal; opacity: .78;
}
.cnsite .cn-navgrp .cn-navsub a:hover { opacity: 1; }

/* ---- a parent SAYS it has children, and a child SAYS it is one -------
   Two marks, both drawn in CSS on the existing markup. Nothing in
   w66.data.php or w66.parts.inc.php changes for either of them, so a
   member with no children still gets byte-identical markup AND neither
   of these selectors can match anything on their page.

   BOTH ARE currentColor, NEVER A HEX. The member picks their menu colour
   against their own bar - white letters on navy is the common case - so a
   grey written as a hex is invisible on half the bars in the catalogue and
   muddy on the rest. currentColor inherits the colour they already chose
   and the opacity does the rest: it reads as light grey on a dark bar and
   as grey on a white one, with no way to make it disappear. Same stance as
   cnInk and as the drop-down panel's colour rule below. */
/* A STROKED CHEVRON, NOT A FILLED TRIANGLE. His reference is Divi and he is
   right that it reads better: a solid triangle is a heavy little blob beside
   14px type, and every theme he compared against draws two thin strokes.

   IT IS ONE ROTATED BOX with two of its four borders drawn - so the shape
   IS the rotation, which makes the transform load-bearing rather than
   decorative. That matters two rules down: an override that reset this to
   `transform: none` would not un-flip the chevron, it would turn it back
   into a square. Hence --cn-chev: the ANGLE is what gets overridden and the
   shape cannot be lost by touching it. */
/* ---- THE HEADING IS A BUTTON, AND A BUTTON ARRIVES WEARING CHROME --
   Border, background, padding, its own font family and a centred
   text-align, none of which any menu entry wants. Cleared here, once.

   WHAT IS NOT IN THIS RULE MATTERS AS MUCH AS WHAT IS. No font-size, no
   letter-spacing, no text-transform, no opacity, no font-weight beyond
   `inherit` - every one of those belongs to a FAMILY rule, and the
   family rules for the parts header live below the splice seam while
   this one lives above it. Same specificity, so the later rule wins,
   which is the way round it has to be. Reset text-transform here and
   the heading silently stops being uppercase in the old header family
   while this file goes on looking correct.

   cursor: default RATHER THAN pointer. It does not go anywhere. The
   panel it opens is opened by hover and by focus, so the pointing hand
   would be promising a destination that does not exist. */
.cnsite .cn-navgrp > .cn-navhead {
  background: none; border: 0; margin: 0; padding: 0;
  font-family: inherit; font-weight: inherit; font-style: inherit;
  line-height: inherit; color: inherit; text-align: left;
  display: inline-flex; align-items: center; cursor: default;
}
/* The caret is the ONE mark that says this row opens something, so it
   belongs on the heading above all - a heading with no caret is a word
   in a menu that gives no sign it does anything. Added to the existing
   rule rather than given one of its own: the chevron IS the rotation of
   a two-bordered box, and a second copy of that geometry would be a
   second thing to keep in step. */
.cnsite .cn-navgrp > a::after,
.cnsite .cn-navgrp > .cn-navhead::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-left: 8px; margin-bottom: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(var(--cn-chev, 45deg));
  opacity: .55;
  transition: transform .15s ease;
}
/* THE CHILD COMBINATOR IS LOAD-BEARING. The children are anchors inside
   .cn-navsub, which is itself inside .cn-navgrp, so a descendant selector
   here would put a caret on every child as well as the parent. `>` matches
   only the parent link, which is the sole direct <a> the emitter writes. */
.cnsite .cn-navgrp .cn-navsub a::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 8px; height: 0; margin-right: 8px;
  border-top: 1px solid currentColor;
  opacity: .6;
}

/* ---- and in a HEADER, on a real screen, it is a drop-down -------------
   761px, not 992px, and the reason is written out at the top of this
   block: it is `@media (max-width: 760px)` on .cn-mbtn plus one. Above
   this width the header menu is in the bar and its children belong in a
   panel that opens; at or below it the menu is in the hamburger and the
   static list above is what the panel draws. No gap, no overlap. */
@media (min-width: 761px) {
  .cnsite .cn-head .cn-navgrp {
    position: relative; flex-direction: row; align-items: center;
  }
  .cnsite .cn-head .cn-navsub {
    /* THE 8px IS A GAP HE ASKED FOR, AND IT COMES WITH A BRIDGE.
       His words, 5 August: the accent line "needs to come down little more".
       It sat flush against the underside of the parent link, so the line read
       as an underline on the word rather than as the top of a panel.

       A GAP BETWEEN A PARENT AND ITS HOVER PANEL IS THE OLDEST WAY TO BREAK
       ONE. The panel is absolutely positioned, so it contributes nothing to
       .cn-navgrp's own box - the group is exactly as tall as the link. Move
       the panel down 8px and the pointer crosses 8px of dead ground on its
       way there, :hover goes false, and the panel closes under the cursor.
       The ::before below is the bridge that keeps those 8px inside the
       group; see the note on it. Take one away and you must take both. */
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
    display: none;
    min-width: 210px; padding: 6px 0; gap: 0;
    /* THE PANEL WEARS THE BAR'S BAND. This replaces "paper and ink on every
       band", which was the earlier call here and was wrong for one reason
       that only showed up with real references: in BOTH of the sites he
       sent, the panel is the same colour as the bar it hangs from. White
       under a white bar on the Divi one, black under a black bar on
       cargenixsdetailing. The panel is not a card that appeared next to the
       header, it is the header continuing downwards - and paper under a
       black bar reads as the former however well drawn it is.

       The old comment said a matching panel "would have to know which band"
       - and it does not have to guess, because the bar already SAYS. Five
       classes, .cn-bg-w through .cn-bg-dd, set by the same table forty
       lines down that paints the bars themselves. So this is that table
       again rather than a sixth opinion about colour, which is the house
       rule about building the table instead of the special case.

       The default below is still paper, so a bar carrying no band class at
       all - a fixture, a page rendered without the renderer - lands
       somewhere readable rather than transparent over the hero. */
    background: var(--cn-pw, #fff);
    color: var(--cn-pink, var(--cn-ink, #14181f));
    --cn-subwash: rgba(0, 0, 0, .05);
    border: 1px solid var(--cn-phair, rgba(0, 0, 0, .10));
    /* THE ACCENT LINE ACROSS THE TOP is the whole tell in his reference -
       it is what makes the panel read as belonging to the item above it
       rather than as a box that happened to appear. Divi draws it in the
       theme colour; here it is the MEMBER's accent, which is the same idea
       with their palette instead of ours. It replaces the top hairline
       rather than sitting under it, so the panel does not gain a line. */
    border-top: 3px solid var(--cn-accent);
    /* SQUARE AT THE TOP, THEIRS AT THE BOTTOM. Flush top corners are what
       makes the accent line look like an underline on the parent instead of
       a stripe on a card - that is the Divi look he asked for. The bottom
       two still follow the card radius, because that is a choice the member
       made in their Design panel and this panel is still a card. Rounding
       all four again is the one-line way back if he prefers it.

       AND IT NOW READS THE SLIDER RATHER THAN THE LOOK. The sentence above
       has said "a choice the member made in their Design panel" since the day
       it was written, and the code under it read --cn-cr, which is what the
       STYLE PACK says and not what the member set. A comment that states the
       intent and code that does not do it is worse than neither; found while
       fixing the same slip in four form rules. */
    border-radius: 0 0 var(--cn-ri, var(--cn-cr, 10px)) var(--cn-ri, var(--cn-cr, 10px));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  }
  /* ---- THE BRIDGE ACROSS THE GAP -----------------------------------
     Invisible, and the only reason the 8px above is survivable. It extends
     the PANEL's hit area up into the gap; the panel is inside .cn-navgrp, so
     the pointer resting on the bridge still holds .cn-navgrp:hover and the
     panel stays open while the hand travels.

     NO BACKGROUND, NO BORDER, NOTHING TO SEE. It is hit area and nothing
     else, so the gap really is a gap.

     IT INHERITS display FROM .cn-navsub, which is display:none until the
     panel opens - so the bridge does not exist while the menu is closed and
     cannot swallow a click aimed at the bar above it.

     -8px AND 8px ARE THE SAME NUMBER AS THE GAP and have to stay that way; a
     bridge shorter than the gap leaves a dead line the pointer can fall
     through, which is the same bug with a smaller target.

     SCOPED UNDER .cn-navgrp WITH A CHILD COMBINATOR, and the harness is what
     asked for that. The first cut read `.cn-head .cn-navsub::before`, which
     is just as unreachable for a member with no children - but the rule this
     block is held to is that EVERY ::before and ::after names .cn-navgrp, so
     that the "cannot reach 168 members" argument is one thing to check rather
     than a judgement per selector. The tighter selector is also the more
     correct one: the bridge belongs to a panel hanging off a group, which is
     the only panel there is. */
  .cnsite .cn-head .cn-navgrp > .cn-navsub::before {
    content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  }
  /* ---- THE LAST ONE OPENS TO THE LEFT ------------------------------
     His screenshot, 5 August: the menu is right-aligned in the bar, so the
     LAST item sits flush against the right edge of the window - and a 210px
     panel hanging off its left corner has nowhere to go but off the screen.
     He caught it on a narrow window; it is true at every width, because the
     last item is always the one against the edge.

     right: 0 HANGS IT OFF THE OTHER CORNER, so it grows inwards. left: auto
     is not optional beside it - leaving left: 0 in force pins BOTH edges and
     stretches the panel across the whole bar instead of moving it.

     THIS IS POSITIONAL, NOT MEASURED, AND THAT IS A REAL LIMIT WORTH WRITING
     DOWN. CSS cannot ask how much room is left, so this fixes the item that
     is always against the edge rather than any item that happens to overflow.
     A second-to-last item with a short neighbour could still clip. The
     general answer is either JavaScript measuring the bar - which this
     published page deliberately has none of, the same reason the phone menu
     runs off a checkbox - or CSS anchor positioning, which is not safe to
     put in front of 168 member sites yet. When it is, this rule is what it
     replaces. */
  .cnsite .cn-head .cn-navgrp:last-child > .cn-navsub { left: auto; right: 0; }
  /* BOTH, AND NEVER HOVER ALONE. focus-within is what makes this reachable
     from a keyboard, and it works because the PARENT link is not inside the
     hidden element: tabbing to it opens the panel, which makes the children
     focusable, which keeps it open while they are tabbed through. A
     hover-only menu is unreachable without a pointer - the same defect the
     tab strip's switch had for a fortnight. */
  .cnsite .cn-head .cn-navgrp:hover > .cn-navsub,
  .cnsite .cn-head .cn-navgrp:focus-within > .cn-navsub { display: flex; }
  /* THE CARET TURNS OVER WHEN THE PANEL IS OPEN, on the same two states
     that open it - never on hover alone, for the keyboard reason spelled
     out above. It is the only moving part on a member's header and it is
     cosmetic: if the transition is dropped the caret still points the
     right way, because the transform is what says which way, not the
     animation. */
  .cnsite .cn-head .cn-navgrp:hover > a::after,
  .cnsite .cn-head .cn-navgrp:hover > .cn-navhead::after,
  .cnsite .cn-head .cn-navgrp:focus-within > a::after,
  .cnsite .cn-head .cn-navgrp:focus-within > .cn-navhead::after { --cn-chev: -135deg; }
  /* THE FIVE BANDS, AND NOTHING BUT THE FIVE BANDS. Each line is the same
     pair the bar itself is painted with - see .cn-bg-* below - so a band
     added or recoloured there arrives here without this block being
     touched. The wash is what a hovered row is lifted by, and it has to
     turn over with the band: a black wash on a black panel is nothing at
     all. --cn-phair / --cn-phairD already encode exactly that flip for
     hairlines, and this is the same idea one step stronger. */
  .cnsite .cn-head .cn-bg-w .cn-navsub {
    background: var(--cn-pw); color: var(--cn-pink);
    --cn-subwash: rgba(0, 0, 0, .05);
  }
  .cnsite .cn-head .cn-bg-l .cn-navsub {
    background: var(--cn-pl); color: var(--cn-pink);
    --cn-subwash: rgba(0, 0, 0, .06);
  }
  .cnsite .cn-head .cn-bg-m .cn-navsub {
    background: var(--cn-pm); color: var(--cn-pw, #fff);
    --cn-subwash: rgba(255, 255, 255, .12);
  }
  .cnsite .cn-head .cn-bg-d .cn-navsub {
    background: var(--cn-pd); color: var(--cn-pw, #fff);
    --cn-subwash: rgba(255, 255, 255, .12);
  }
  .cnsite .cn-head .cn-bg-dd .cn-navsub {
    background: var(--cn-pdd); color: var(--cn-pw, #fff);
    --cn-subwash: rgba(255, 255, 255, .12);
  }
  /* THE MEMBER'S MENU COLOUR IS NOT CARRIED INTO THE PANEL, and this is the
     one declaration here that overrules them. They pick that colour against
     their BAR - white letters on a dark bar is the common case - and the
     panel is not the bar; carried across, it is white on white and their
     sub-menu is gone. The renderer writes the colour inline, so nothing but
     !important reaches it. Same reasoning as cnInk: a header may not be
     made unreadable by a choice made somewhere else. */
  .cnsite .cn-head .cn-navgrp .cn-navsub a {
    display: block; width: 100%; padding: 7px 16px;
    font-size: 14px; font-weight: 500; line-height: 1.35;
    white-space: nowrap; opacity: .9;
    /* INHERIT, NOT A NAMED COLOUR. The reasoning that put an !important
       here is unchanged and still load-bearing: the member's menu colour is
       written INLINE on every one of these anchors by the renderer, it was
       chosen against their BAR, and carried into the panel it is white on
       white. What changed is the answer. Naming --cn-pink was right while
       the panel was always paper; now that the panel wears the bar's band,
       the panel itself is the thing that knows, and the rule above sets a
       colour on it for exactly this to pick up. */
    color: inherit !important;
  }
  /* NO DASH INSIDE THE CARD. The dash says "I belong to the row above me",
     which is worth saying in a list where a parent and a child are the same
     kind of line. In the drop-down every row in the panel is a child - the
     panel itself is the statement - so the dash is decoration that makes a
     tidy card look like a bulleted list. The phone panel undoes this again
     a few rules down, because there parent and child DO share a list. */
  .cnsite .cn-head .cn-navgrp .cn-navsub a::before { display: none; }
  /* A HOVERED ROW LIGHTS UP THE WHOLE ROW, not just the words. That is the
     other half of what his references do and it is what makes the panel
     feel like a menu rather than a list of links - the target is the row,
     so the feedback should be the row. The wash comes from the band rules
     above, which is why this line names no colour of its own. */
  .cnsite .cn-head .cn-navgrp .cn-navsub a:hover,
  .cnsite .cn-head .cn-navgrp .cn-navsub a:focus-visible,
  .cnsite .cn-head .cn-navgrp .cn-navsub a[aria-current] {
    color: var(--cn-accent) !important; opacity: 1;
    background: var(--cn-subwash, rgba(0, 0, 0, .05));
  }
  /* THE PHONE PANEL IS NOT A HEADER BAR even though it lives inside the
     header element. It is only ever open below 991px in practice, but a
     window RESIZED while it is open lands here, and a drop-down inside a
     column of thumb-sized rows is not a thing anybody meant. */
  .cnsite .cn-head .cn-mpanel .cn-navgrp { position: static; flex-direction: column; }
  .cnsite .cn-head .cn-mpanel .cn-navsub {
    position: static; display: flex; flex-direction: column;
    min-width: 0; padding: 0 0 0 16px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .cnsite .cn-head .cn-mpanel .cn-navgrp .cn-navsub a {
    color: inherit !important; white-space: normal;
  }
  /* AND THE PANEL IS A LIST AGAIN, so both marks come back: the dash,
     because a row in the panel is not visibly a child of the row above it
     without one, and a caret that does NOT turn over, because nothing in
     the panel opens or closes - the children are already there. Same
     reasoning as the rest of this mpanel block: it only ever runs when a
     window is resized wide with the panel open, and it exists so that
     lands somewhere sensible rather than half drop-down. */
  .cnsite .cn-head .cn-mpanel .cn-navgrp .cn-navsub a::before { display: inline-block; }
  /* THE ANGLE, NEVER `transform: none`. The chevron's shape is a 45deg
     rotation of a two-bordered box, so none would leave a small square
     sitting beside the label rather than an unflipped chevron. Overriding
     the variable puts it back where it started and cannot lose the shape.
     Carries :hover and :focus-within so it OUT-SPECIFIES the header rule
     above rather than tying with it and relying on source order. */
  .cnsite .cn-head .cn-mpanel .cn-navgrp:hover > a::after,
  .cnsite .cn-head .cn-mpanel .cn-navgrp:hover > .cn-navhead::after,
  .cnsite .cn-head .cn-mpanel .cn-navgrp:focus-within > a::after,
  .cnsite .cn-head .cn-mpanel .cn-navgrp:focus-within > .cn-navhead::after { --cn-chev: 45deg; }
}

/* ---- what the panel hangs out of ------------------------------------
   NOT AN overflow FIX - there is no overflow:hidden anywhere on the header,
   the bar, the pin or the slot, and that was checked rather than assumed.
   It is a PAINT ORDER fix, which fails in exactly the same way and is the
   easier one to miss: .cn-pbar is position:relative, so a later bar is a
   later positioned element and paints OVER an earlier bar's drop-down; and
   .cn-sl-c carries a transform, which makes a stacking context that a
   z-index inside it cannot escape.

   Each one is gated on :has(.cn-navgrp), so a member with no children gets
   the stacking they have today, unchanged. .cn-sl-c and .cn-pbar are styled
   in the spliced tail, so these carry an extra class to beat them on
   specificity rather than on position. */
.cnsite .cn-head:has(.cn-navgrp) { position: relative; z-index: 30; }
.cnsite .cn-head .cn-hbar:has(.cn-navgrp),
.cnsite .cn-head .cn-pbar:has(.cn-navgrp) { position: relative; z-index: 1; }
.cnsite .cn-head .cn-sl:has(.cn-navgrp) { position: relative; z-index: 1; }
.cnsite .cn-head .cn-pin .cn-sl-c:has(.cn-navgrp) { z-index: 2; }

/* ---- the footer's own links column ----------------------------------
   A nested list, indented, always visible, no pointer anywhere near it.
   .cn-foot.cn-parts ul zeroes the padding on every list in the parts
   footer and lives in the tail at higher specificity than a two-class
   selector, so this carries the element as well to win outright. */
.cnsite .cn-foot .cn-fl ul.cn-fsub {
  list-style: none; margin: 6px 0 2px; padding: 0 0 0 14px;
}
.cnsite .cn-foot .cn-fl ul.cn-fsub li:last-child { margin-bottom: 0; }
.cnsite .cn-foot .cn-fl ul.cn-fsub a { opacity: .78; }
.cnsite .cn-foot .cn-fl ul.cn-fsub a:hover { opacity: 1; }

/* ===================================================================
   HEADERS AND FOOTERS - the look, taken off his fourteen and his eight

   Read w66.parts.inc.php first: the markup is a stack of bars, each bar
   a background and three slots, and a footer is the same thing with a
   band of columns in the middle.

   His reference set REPLACED the old look on 1 August, so the five
   greys below are now the site's, not just the header's. The accent is
   the one thing that belongs to the member, and it is only ever the
   LIVE bit - an active link, an icon, a small label. It is never a
   background. That is what keeps an orange contractor looking like his
   screenshot instead of like an orange website.

   Sizes here were measured off the screenshots at their capture width
   and then normalised: he said more than once that the margins in a
   capture are an artefact and to read the design band, not the picture.
   So the bars are full-bleed and the CONTENT sits in one container at
   one padding, which is also what keeps vertical spacing the same from
   one section to the next.
   =================================================================== */

/* THE OLD HEADER AND FOOTER RULES DO NOT APPLY HERE.

   `.cnsite .cn-foot { padding: 52px 28px 24px }` has been in this
   stylesheet since the first footer, and the parts machine inherits it
   by sharing the class name - which is why he saw a dark band with
   white all the way round it instead of a footer running edge to edge.
   Same for the header's white background and its bottom rule.

   `cn-parts` is on the element the new renderer emits and nowhere else,
   so this resets exactly those two and leaves every existing site
   untouched. */
.cnsite .cn-head.cn-parts {
  padding: 0; background: none; border-bottom: 0; color: inherit;
}
.cnsite .cn-foot.cn-parts { padding: 0; background: none; }
.cnsite .cn-foot.cn-parts p, .cnsite .cn-foot.cn-parts li {
  font-size: inherit; opacity: 1; margin: 0;
}
.cnsite .cn-foot.cn-parts ul { margin: 0; padding: 0; }
.cnsite .cn-foot.cn-parts .cn-logo { margin-bottom: 16px; }

/* THE FIVE BANDS. A bar names one of these, never a colour.

   These values are the REFERENCE GREYS, straight off his screenshots, and
   they are the fallback rather than the answer: widget 66 writes the same
   four custom properties inline on .cnsite, derived from the member's own
   brand, and an inline declaration beats this one. So a page rendered by
   the live engine is branded, and anything rendered without it - a saved
   draft, a fixture, this file opened on its own - still looks like the
   drawings instead of collapsing to unstyled. */
.cnsite {
  --cn-pw:  #ffffff;
  --cn-pl:  #ededed;
  --cn-pm:  #5c5c5c;
  --cn-pd:  #3a3a3a;
  --cn-pdd: #2f2f2f;
  --cn-pink:#1c1c1c;
  --cn-phair: rgba(0, 0, 0, .10);
  --cn-phairD: rgba(255, 255, 255, .16);
}

/* AND THE WAY BACK TO GREY. Custom properties inherit, so re-declaring them
   on the header or the footer beats the inline ones set on .cnsite above it
   - which is the whole reason the bands are properties and not hard-coded
   backgrounds. It is per part, so a member can have a branded header over a
   neutral footer if that is what their logo wants.

   Nothing else in this file may read --cn-brand directly for a band. The
   moment a band is painted from the brand rather than from one of these
   five, this switch stops being able to turn it off. */
.cnsite .cn-parts.cn-pnat {
  --cn-pl:  #ededed;
  --cn-pm:  #5c5c5c;
  --cn-pd:  #3a3a3a;
  --cn-pdd: #2f2f2f;
}

/* ---------------------------------------------------------------- bars */
.cnsite .cn-pbar { width: 100%; display: flex; align-items: center; }
/* THE SAME COLUMN A SECTION USES, worked out the same way.

     "when page is in full in the browser, the logo and the top is not
      left align see the gap?"

   This was `max-width: 1280px; margin: 0 auto; padding: 0 32px`, which
   centres a 1280 box AND THEN insets 32px inside it - so the bar's
   contents started 32px further in than the page below it. His logo sat
   inboard of his own headline, and the footer columns inboard of the
   About text above them.

   The old .cn-hbar hit exactly this and already carries the answer, with
   a comment saying so: a section is a full-width block with 28px of
   padding and a 1280px wrap inside, so its content starts at
   (100% - 1280) / 2 once the viewport is wide enough for that to beat the
   padding. max() is that sentence. Copying the formula rather than a
   number is the point - the two now cannot drift, because there is one
   arithmetic and both read it.

   28 rather than 32 on a phone as well, for the same reason: a header
   four pixels inboard of the page is still not aligned. */
.cnsite .cn-pin {
  position: relative; width: 100%; margin: 0;
  padding: 0 max(28px, calc((100% - 1280px) / 2));
  display: flex; align-items: center; min-height: inherit;
  flex-wrap: wrap; row-gap: 10px;
}
/* A bar that has had another bar folded into it can hold more than a
   line's worth, so it needs room to grow. The room goes on the INNER
   pin, not on the bar: the pin is the one carrying min-height, and
   everything here is border-box, so the padding sits INSIDE the height
   the design asked for. A bar whose contents fit on one line is then
   EXACTLY as tall as it was drawn - no stray strip above or below it,
   which is the little space he pointed at - and only a bar that has
   really wrapped gets any taller. */
.cnsite .cn-pbar { padding: 0; }
.cnsite .cn-pbar > .cn-pin { padding-top: 6px; padding-bottom: 6px; }
/* THE MEMBER'S OWN SPACE ABOVE AND BELOW THE BAR'S CONTENTS.

   Only on the bar carrying the logo, and only when they set a number -
   see cnBarHtml, which also stops emitting the preset's inline
   min-height at that point. That is the whole reason this can make a bar
   SMALLER: an inline min-height:96px cannot be beaten by a stylesheet, so
   it has to not be written rather than be overridden.

   The fallback is the six pixels every bar has always had, so setting one
   box and leaving the other is a sentence with a defined meaning. */
.cnsite .cn-head .cn-pbar.cn-hpad > .cn-pin {
  padding-top: var(--cn-hpt, 6px); padding-bottom: var(--cn-hpb, 6px);
}

/* ---- AND A DIFFERENT SPACING ONCE IT HAS LANDED ------------------------
   "on the background the pacing doesn't look bad even if is more, but on
   the white, the space stands out."

   The same bar, twice. Over the photograph it has no edge, so the space
   above and below the button is read as picture. White gives it an edge,
   and that space becomes a shape with a boundary - visible for the first
   time without having changed at all. A floating header is two designs
   sharing one bar, so it gets two spacings.

   min-height: 0 !important, AND THE ALTERNATIVE IS WORSE. The preset
   writes min-height INLINE on the bar, and exactly one thing beats an
   inline declaration. Moving every bar's height into a custom property is
   the cleaner shape and would touch every header and footer on every site
   to fix one state of one preset. Five classes and a scroll state cannot
   reach anything else.

   BOTH NUMBERS ARE RESOLVED IN PHP. --cn-hst is always a concrete value
   when cn-hsp is present, because the renderer holds the resting number
   too and can fall back to it without a chain of var() defaults. */
.cnsite .cn-head.cn-float.cn-solid .cn-pbar.cn-hsp {
  min-height: 0 !important;
}
.cnsite .cn-head.cn-float.cn-solid .cn-pbar.cn-hsp > .cn-pin {
  padding-top: var(--cn-hst, 6px); padding-bottom: var(--cn-hsb, 6px);
}
/* The colour already fades over .28s. A bar that fades and SNAPS is worse
   than either change on its own, so the height travels with it. min-height
   is animatable, which is what lets the 96 come down smoothly rather than
   dropping to nothing and letting the padding grow back. */
.cnsite .cn-head.cn-float .cn-pbar.cn-hsp,
.cnsite .cn-head.cn-float .cn-pbar.cn-hsp > .cn-pin {
  transition: min-height .28s ease, padding-top .28s ease, padding-bottom .28s ease,
              background-color .28s ease;
}
.cnsite .cn-bg-w  { background: var(--cn-pw);  color: var(--cn-pink); }
.cnsite .cn-bg-l  { background: var(--cn-pl);  color: var(--cn-pink); }
.cnsite .cn-bg-m  { background: var(--cn-pm);  color: #fff; }
.cnsite .cn-bg-d  { background: var(--cn-pd);  color: #fff; }
.cnsite .cn-bg-dd { background: var(--cn-pdd); color: #fff; }
.cnsite .cn-tint-light { background: #9b9b9b; color: #fff; }

.cnsite .cn-pbar.cn-hair  { border-bottom: 1px solid var(--cn-phair); }
.cnsite .cn-bg-m.cn-hair,
.cnsite .cn-bg-d.cn-hair,
.cnsite .cn-bg-dd.cn-hair { border-bottom-color: var(--cn-phairD); }

/* His #17 - the only one where the bar itself is inset rather than
   full width. A switch on the bar, not a separate header. */
.cnsite .cn-pbar.cn-inset { width: auto; margin: 0 clamp(16px, 6vw, 90px); }

/* --------------------------------------------------------------- slots */
/* THE SLOTS WRAP. His screenshots showed a menu printed on top of a
   contact stack: everything in a slot is nowrap by design, so once a
   bar had more in it than the window is wide the parts overflowed and
   sat on each other. Wrapping stacks them instead, which is ugly at
   worst and readable always. */
.cnsite .cn-sl {
  display: flex; align-items: center; gap: 22px; min-width: 0;
  flex-wrap: wrap; row-gap: 8px;
}
.cnsite .cn-sl:empty { display: none; }
.cnsite .cn-sl-l { margin-right: auto; }
.cnsite .cn-sl-r { margin-left: auto; }
/* The centre slot is centred on the BAR, not on what is left over
   between its neighbours - otherwise a long phone number on the right
   drags a centred menu off centre, which is the sort of thing he spots
   in the first screenshot. */
.cnsite .cn-sl-c {
  position: absolute; left: 50%; transform: translateX(-50%);
}
.cnsite .cn-pvr {
  width: 1px; align-self: center; height: 26px;
  background: currentColor; opacity: .22;
}

/* ---------------------------------------------------------------- logo */
.cnsite .cn-head .cn-logo {
  font-size: 30px; font-weight: 800; letter-spacing: -1.2px; line-height: 1;
  color: inherit; text-decoration: none; white-space: nowrap;
}
/* THE 46px CEILING IS FOR THE DEFAULT MARK ONLY.

   "when logo is uploaded, it doesn't get any wider then how it is now"

   He had typed 46 into the Height box and nothing above it did anything,
   and this line was why: max-height BEATS an inline height, whatever the
   specificity, so a member's own number was silently clamped. Width is
   auto and follows the height, so "does not get taller" reads as "does
   not get wider" - which is how he found it.

   The ceiling still earns its place for the mark this rule was written
   for: the member's profile PHOTO standing in for a logo, which is a
   square crop and has no business setting the height of a header bar. An
   uploaded wordmark is the opposite case - it was chosen, it was sized,
   and the box in the panel is the whole point of it.

   So the cap now excludes .cn-logo-wide, which is the class the renderer
   puts on an uploaded logo and on nothing else. */
.cnsite .cn-head .cn-logo:not(.cn-logo-wide) img,
.cnsite .cn-foot .cn-logo:not(.cn-logo-wide) img { max-height: 46px; width: auto; display: block; }
/* An uploaded logo is sized by the member's own number, read from the
   property the renderer sets on the anchor above it. Here rather than
   inline, so the phone rule below can clamp it - an inline height cannot
   be overridden by a media query at all.

   AND !important, WHICH IS NOT LAZINESS - IT IS THE ONLY THING THAT WORKS.
   Read out of his own browser on 3 August, in the builder's preview frame:

       viewport 769px and up   height 84px    our rule wins
       viewport 767px and down height 85.2px  our rule loses

   85.2px is the natural height of a 305x119 logo at its width ceiling -
   in other words `height: auto`. BD's own theme carries, in
   critical-styles.pkgd.min.css on their CDN,

       @media (max-width: 767px) { img { height: auto !important; ... } }

   which is the ordinary responsive-image reset every theme ships. It is
   `!important`, so NO specificity beats it: an inline style loses to it
   too - proved by setting one and watching the computed height not move.

   THIS HAD BEEN SILENTLY TRUE SINCE 3 AUGUST. The min(...) clamp added
   that day never ran on a real phone either, and neither the offline suite
   nor the Chromium rig could see it, because the rig loads OUR stylesheet
   and not the directory's. The rig now says so out loud - logoshot.js. */
.cnsite .cn-head .cn-logo-wide img,
.cnsite .cn-foot .cn-logo-wide img { display: block; height: var(--cn-lgh, 40px) !important; }
/* AIR ABOVE AND BELOW, which is the other half of "one can go up to 90
   height, and when they do, it almost touch the top and bottom". The bar
   is min-height and centres what is in it, so padding on the logo is what
   makes the bar taller rather than what crops the logo.

   The fallback is 0px, which is what every one of the 168 live sites
   computes today - so this rule changes nothing until a member types a
   number. It must stay 0: a fallback that is not the current value would
   move every header on the site the moment this shipped. */
.cnsite .cn-head .cn-logo-wide { padding: var(--cn-lgp, 0px) 0; }
.cnsite .cn-foot .cn-logo {
  font-size: 27px; font-weight: 800; letter-spacing: -1.1px; line-height: 1;
  color: inherit; text-decoration: none; display: inline-block;
}

/* ----------------------------------------------------------------- nav */
.cnsite .cn-pnav { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }
/* AND THE HEADING TAKES ITS TYPE FROM HERE - one place, no copy. */
.cnsite .cn-pnav a,
.cnsite .cn-pnav .cn-navhead {
  font-size: 16px; font-weight: 600; color: inherit; text-decoration: none;
  white-space: nowrap;
}
.cnsite .cn-pnav.cn-up a,
.cnsite .cn-pnav.cn-up .cn-navhead {
  text-transform: uppercase; font-size: 15px; letter-spacing: .6px;
}
.cnsite .cn-pnav-sm { gap: 22px; }
.cnsite .cn-pnav-sm a,
.cnsite .cn-pnav-sm .cn-navhead { font-size: 14.5px; font-weight: 600; }
.cnsite .cn-pnav a:hover,
.cnsite .cn-pnav .cn-navhead:hover,
.cnsite .cn-pnav a[aria-current] { color: var(--cn-accent); }
/* His #9, #11 and #12 all show one menu item in the live colour. That
   item is the page they are on, which is the only honest thing for it to
   be - so the accent earns its place instead of being decoration. */

/* A logo and a menu sharing the left slot need more air between them
   than two menu items do. #1, #39, #40 and #50 all give it. */
.cnsite .cn-head .cn-logo + .cn-pnav { margin-left: 24px; }

/* ------------------------------------------------------------- contact */
.cnsite .cn-ctrun { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.cnsite .cn-ctstack { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.cnsite .cn-ct {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: inherit; text-decoration: none;
  white-space: nowrap;
}
.cnsite .cn-ct svg { width: 19px; height: 19px; flex: 0 0 19px; }
.cnsite .cn-ct:hover svg { color: var(--cn-accent); }
.cnsite .cn-ct-t { display: flex; flex-direction: column; line-height: 1.3; }
.cnsite .cn-ct-t b { font-size: 14px; font-weight: 700; }
.cnsite .cn-ct-t i { font-size: 14.5px; font-style: normal; opacity: .92; }

.cnsite .cn-phblock, .cnsite .cn-phbox {
  display: inline-flex; align-items: center; gap: 11px;
  color: inherit; text-decoration: none;
}
.cnsite .cn-phblock svg, .cnsite .cn-phbox svg { width: 22px; height: 22px; flex: 0 0 22px; }
.cnsite .cn-phblock span, .cnsite .cn-phbox span {
  display: flex; flex-direction: column; line-height: 1.2;
}
.cnsite .cn-phblock b { font-size: 14px; font-weight: 700; opacity: .6; }
.cnsite .cn-phblock i { font-size: 20px; font-weight: 800; font-style: normal; }
/* His #9 puts the number in its own lighter panel FLUSH TO THE BAR EDGE,
   not inside the container - the panel touches the left of the window.
   Pulling it back by the container padding is not enough, because the
   container is also centred inside a wider window, so it is taken out of
   flow and pinned to the bar instead. It is the only thing in that slot,
   so nothing moves when it leaves. */
.cnsite .cn-pbar { position: relative; }
.cnsite .cn-phbox {
  position: absolute; left: 0; top: 0; height: 100%;
  padding: 0 34px; background: rgba(255, 255, 255, .12);
}
.cnsite .cn-phbox b { display: none; }
.cnsite .cn-phbox i { font-size: 17px; font-weight: 700; font-style: normal; }

/* -------------------------------------------------------------- social */
.cnsite .cn-psoc { display: inline-flex; align-items: center; gap: 15px; }
.cnsite .cn-psoc a { color: inherit; display: inline-flex; }
.cnsite .cn-psoc svg { width: 16px; height: 16px; }
.cnsite .cn-psoc a:hover { color: var(--cn-accent); }
.cnsite .cn-psoc.cn-muted { opacity: .45; }
/* THE SQUARE IS A FILLED CHIP, NOT AN OUTLINE, AS OF 12 AUGUST.

   It was a 1px currentColor box, and it had never once rendered: no
   header preset names a shape at all, and the only two footers that do
   ask for 'round' and 'bare'. So this is a redefinition of something no
   member has ever seen rather than a change under anybody.

   Redefined to match the sheet he chose from - "icon in square" beside
   "icon in a circle", both filled, which is also what the classic
   .cn-soc chips have always been. An outline and a fill standing next to
   each other in one picker are two different ideas, not two shapes.

   3px, the same radius the classic chips use, so the two ways this site
   draws a social chip agree. */
.cnsite .cn-psoc.cn-s-square { gap: 12px; }
.cnsite .cn-psoc.cn-s-square a {
  width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: 3px; background: var(--cn-pd); color: #fff;
}
.cnsite .cn-psoc.cn-s-round { gap: 12px; }
.cnsite .cn-psoc.cn-s-round a {
  width: 34px; height: 34px; border-radius: 50%; align-items: center;
  justify-content: center; background: var(--cn-pd); color: #fff;
}
/* --cn-aink, NOT #fff. This hover paints the chip in the member's ACCENT
   and then wrote white marks on it whatever that accent was - so f13's
   footer, the one preset that has actually been drawing these, gave a
   member with a yellow or a light green accent white-on-yellow the moment
   a visitor's pointer crossed it. Same fault as the header button and the
   same fix: the ink already computed for that colour. */
.cnsite .cn-psoc.cn-s-square a:hover,
.cnsite .cn-psoc.cn-s-round a:hover { background: var(--cn-accent); color: var(--cn-aink); }

/* ------------------------------------------------- search, quote, cell */
.cnsite .cn-psearch, .cnsite .cn-pquote { color: inherit; display: inline-flex; }
.cnsite .cn-psearch svg, .cnsite .cn-pquote svg { width: 21px; height: 21px; }
.cnsite .cn-psearch:hover, .cnsite .cn-pquote:hover { color: var(--cn-accent); }
/* .cn-pacct went with the account part it dressed - nothing emits that
   class any more. Left named here and nowhere else so a search for it
   finds this line rather than nothing. */
.cnsite .cn-pcell {
  align-self: stretch; display: inline-flex; align-items: center; padding: 0 30px;
  border-left: 1px solid var(--cn-phair); border-right: 1px solid var(--cn-phair);
  font-size: 15px; font-weight: 600; color: inherit; text-decoration: none;
}
.cnsite .cn-ptag { font-size: 15px; font-weight: 600; }
.cnsite .cn-bg-w .cn-ptag, .cnsite .cn-bg-l .cn-ptag { color: #8d8d8d; }

/* An unwritten line, shown only in the builder. It has to read as
   something to type over rather than as copy somebody wrote. */
.cnsite .cn-prompt {
  opacity: .6; border-bottom: 1px dashed currentColor; padding-bottom: 1px;
}
/* The sentence under an empty section. It borrows .cn-prompt's quietness
   but NOT its dashed underline - that line means "type over me", and this
   is not something a member can type over. It is a whole paragraph rather
   than a phrase inside a line, so it wants air above it and a size that
   does not compete with the section's own title.

   IT LIVES HERE, in w66.parts.css, because .cn-prompt does - and this file
   is spliced onto the TAIL of w66.css. Written into w66.css directly it is
   silently reverted by the next splice.py run. `splice.py --check` caught
   exactly that on the way to writing this line. */
.cnsite .cn-emptysay {
  border-bottom: 0; padding-bottom: 0; margin-top: 18px;
  font-size: 13.5px; line-height: 1.5;
}

/* ---------- THE ALBUM TABS, and they run on no JavaScript --------------
   "gallery name shows as tab on top and when they click the tab it shows
    those photos below"

   A radio per album, a label per radio, and the checked radio shows its own
   panel through a sibling selector. Exactly the mechanism the mobile menu
   uses. A page that needs a script to show its pictures is a page that
   shows no pictures the day the script fails, and this renderer has held
   that line for the slider and the menu already.

   THE RADIOS ARE OFF SCREEN, NOT display:none. A hidden input cannot be
   focused, so keyboard users lose the tabs entirely; parked outside the
   viewport it still takes focus and still answers the arrow keys, which is
   how a radio group is meant to be driven. */
.cnsite .cn-tabr { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cnsite .cn-tabrow {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px;
}
/* THE CORNER IS THE BUTTON CORNER, not a pill of its own.

   A tab is a button, so it rounds like every other button on the page:
   the member's own number from Design -> Your corners -> Buttons, and
   when they have not set one, whatever their style already draws. That
   is exactly the expression .cn-btn uses, and reusing it is the point -
   two hard-coded pills sitting next to a 5px button is what he saw and
   what he asked to be rid of: "the tab button should be same round
   corner as other button on the page, or same as they choose from their
   main setting".

   WRITTEN WITHOUT .cn-dsn, unlike the design block above. That gate
   exists there to buy specificity against .cn-sty-* rules; nothing in
   this sheet or any style sheet sets a radius on .cn-tab, so there is no
   fight to win, and a plain rule keeps the pinned-number path and the
   never-opened-the-panel path on one line instead of two. --cn-br is
   defined on .cnsite itself and restated per style, so the fallback
   lands whether or not the member has a design stored. */
.cnsite .cn-tab {
  cursor: pointer; font-size: 13px; line-height: 1; padding: 9px 14px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-rb, var(--cn-br));
  background: transparent; color: inherit; opacity: .72;
  user-select: none; white-space: nowrap;
}
.cnsite .cn-tab:hover { opacity: 1; border-color: var(--cn-accent); }
/* EVERY PANE HIDDEN, then the checked one shown.

   PAIRED BY CLASS, NOT BY POSITION, and the first version got that wrong in
   the most misleading way available: :nth-of-type counts among siblings of
   the same TAG, and the tab row is a div standing in front of the panes,
   which are also divs. So the row was div one, every pane was shifted by
   one, and he pressed Tab 1 and saw nothing while Tab 2 showed him Tab 1's
   photos. The markup writes the index into the class now; there is nothing
   left to count and nothing that later markup can push out of step.

   NO first-of-type FALLBACK. The renderer marks the first radio `checked`,
   so the first pane shows for the same reason every other one does. An
   always-visible first pane would have to be turned off again by every
   other rule here, which is exactly the kind of fight that hides a bug.
   :checked and ~ are what the mobile menu already rests on. */
.cnsite .cn-tabpane { display: none; }
.cnsite .cn-tabr.cn-tr-1:checked ~ .cn-tabpane.cn-tp-1,
.cnsite .cn-tabr.cn-tr-2:checked ~ .cn-tabpane.cn-tp-2,
.cnsite .cn-tabr.cn-tr-3:checked ~ .cn-tabpane.cn-tp-3,
.cnsite .cn-tabr.cn-tr-4:checked ~ .cn-tabpane.cn-tp-4,
.cnsite .cn-tabr.cn-tr-5:checked ~ .cn-tabpane.cn-tp-5,
.cnsite .cn-tabr.cn-tr-6:checked ~ .cn-tabpane.cn-tp-6,
.cnsite .cn-tabr.cn-tr-7:checked ~ .cn-tabpane.cn-tp-7,
.cnsite .cn-tabr.cn-tr-8:checked ~ .cn-tabpane.cn-tp-8,
.cnsite .cn-tabr.cn-tr-9:checked ~ .cn-tabpane.cn-tp-9,
.cnsite .cn-tabr.cn-tr-10:checked ~ .cn-tabpane.cn-tp-10 { display: block; }
.cnsite .cn-tabr.cn-tr-1:checked ~ .cn-tabrow .cn-tab.cn-tb-1,
.cnsite .cn-tabr.cn-tr-2:checked ~ .cn-tabrow .cn-tab.cn-tb-2,
.cnsite .cn-tabr.cn-tr-3:checked ~ .cn-tabrow .cn-tab.cn-tb-3,
.cnsite .cn-tabr.cn-tr-4:checked ~ .cn-tabrow .cn-tab.cn-tb-4,
.cnsite .cn-tabr.cn-tr-5:checked ~ .cn-tabrow .cn-tab.cn-tb-5,
.cnsite .cn-tabr.cn-tr-6:checked ~ .cn-tabrow .cn-tab.cn-tb-6,
.cnsite .cn-tabr.cn-tr-7:checked ~ .cn-tabrow .cn-tab.cn-tb-7,
.cnsite .cn-tabr.cn-tr-8:checked ~ .cn-tabrow .cn-tab.cn-tb-8,
.cnsite .cn-tabr.cn-tr-9:checked ~ .cn-tabrow .cn-tab.cn-tb-9,
.cnsite .cn-tabr.cn-tr-10:checked ~ .cn-tabrow .cn-tab.cn-tb-10 {
  opacity: 1; background: var(--cn-accent); border-color: var(--cn-accent); color: var(--cn-aink, #fff);
}
/* ---------- EIGHT, THEN LOAD MORE -------------------------------------
   "is there way to make this one where it only shows up to 8, and then add
    a load more option? so the page is not to long"

   A CHECKBOX, not a radio, and that is the whole difference: opening one
   tab's extra photos must not close another's. Same no-JavaScript rule as
   the tabs themselves.

   The extra photos are a SECOND grid rather than tiles hidden one by one -
   one element to toggle, and no argument about what display value an <img>
   or a placeholder <div> should be put back to. */
.cnsite .cn-morer { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cnsite .cn-grid.cn-xtra { display: none; margin-top: 20px; }
.cnsite .cn-morer:checked ~ .cn-grid.cn-xtra { display: grid; }
/* The button goes when there is nothing left to load. It is a LABEL, so it
   needs to be told to look like the button it is standing in for - and
   that includes the corner, which comes from the member's Buttons number
   for the same reason the tabs' does. */
.cnsite .cn-morelab {
  display: inline-block; margin: 22px auto 0; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1; padding: 13px 22px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-rb, var(--cn-br));
  color: inherit; user-select: none;
}
.cnsite .cn-morelab:hover { border-color: var(--cn-accent); color: var(--cn-accent); }
.cnsite .cn-morer:checked ~ .cn-morelab { display: none; }
/* Centred under the grid, which needs the pane to be a column rather than
   a plain block - a margin auto does nothing to an inline-block. */
.cnsite .cn-tabpane { flex-direction: column; align-items: center; }
.cnsite .cn-morer:focus-visible ~ .cn-morelab { outline: 2px solid var(--cn-accent); outline-offset: 2px; }

/* TWO ACROSS ON A PHONE, not one. The site's own mobile rule collapses
   every grid to a single column, which is right for cards carrying words
   and wrong for photographs: one picture per screen turns a gallery into a
   scroll, and his placeholder art filled a whole phone with one grey
   shape. "on mobile can we do 2 at a time".

   Scoped to the GALLERY section, so cards and service rows keep the single
   column that suits them. It has to come after the site rule to win, which
   is what this file being the tail of that stylesheet guarantees. */
@media (max-width: 780px) {
  .cnsite .cn-gallery .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cnsite .cn-tabrow { gap: 6px; }
  .cnsite .cn-tab { font-size: 12.5px; padding: 8px 12px; }
}

/* Keyboard focus has to be visible on the LABEL, because the input it
   belongs to is parked off screen. */
.cnsite .cn-tabr:focus-visible ~ .cn-tabrow .cn-tab { outline: 2px solid var(--cn-accent); outline-offset: 2px; }

/* -------------------------------------------------------------- button */
.cnsite .cn-head .cn-btn, .cnsite .cn-foot .cn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 34px; white-space: nowrap; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  border: 1.6px solid transparent; border-radius: 0;
}
/* These modifiers MUST carry the same weight as the base rule above.
   Written as .cnsite .cn-b-pill they lose to .cnsite .cn-head .cn-btn on
   specificity, and the loss is silent: every pill comes out square and
   every outline comes out invisible, which is exactly what the first
   render showed. */
.cnsite .cn-head .cn-b-pill, .cnsite .cn-foot .cn-b-pill { border-radius: 30px; }
.cnsite .cn-head .cn-b-outline, .cnsite .cn-foot .cn-b-outline {
  background: none; color: inherit; border-color: currentColor;
}
/* A solid button is the INVERSE of the bar it sits on, which is what
   his set actually does: dark-on-white in #39, white-on-dark in #11.
   One rule, both screenshots. */
.cnsite .cn-bg-w  .cn-b-solid,
.cnsite .cn-bg-l  .cn-b-solid { background: var(--cn-pd); color: #fff; border-color: var(--cn-pd); }
.cnsite .cn-bg-m  .cn-b-solid,
.cnsite .cn-bg-d  .cn-b-solid,
.cnsite .cn-bg-dd .cn-b-solid,
.cnsite .cn-tint-light .cn-b-solid { background: #fff; color: var(--cn-pink); border-color: #fff; }
.cnsite .cn-b-mut { background: #9b9b9b !important; color: #fff !important; }
.cnsite .cn-head .cn-btn:hover, .cnsite .cn-foot .cn-btn:hover {
  background: var(--cn-accent); color: var(--cn-aink); border-color: var(--cn-accent);
}

/* =================================================================
   FOOTER
   ================================================================= */
.cnsite .cn-foot { display: block; }
.cnsite .cn-ftop { border-bottom: 1px solid var(--cn-phair); min-height: 52px; display: flex; }
.cnsite .cn-fbody { padding: 56px 0; }
.cnsite .cn-fbody > .cn-pin { display: grid; gap: 36px; align-items: start; }
.cnsite .cn-c1 > .cn-pin { grid-template-columns: 1fr; }
.cnsite .cn-c2 > .cn-pin { grid-template-columns: 1fr 1fr; }
.cnsite .cn-c3 > .cn-pin { grid-template-columns: 1fr 1fr 1fr; }
.cnsite .cn-c4 > .cn-pin { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.cnsite .cn-c5 > .cn-pin { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; }
/* A brand block that carries a paragraph needs the room his #13, #8 and
   #2 give it. Marking the COLUMN wide rather than hard-coding the first
   track keeps the rule true when the brand block is switched off. */
.cnsite .cn-c4.cn-w1 > .cn-pin { grid-template-columns: 1.9fr 1fr 1fr 1fr; }
/* THE BRAND'S SHARE SHRINKS WITH THE COUNT. 1.9 out of 4.9 is a fifth of
   the band and reads as balanced; the same 1.9 against only two remaining
   lists was nearly half the width, which bunched them into the middle and
   left dead space on the right. 1.5 at three and 1.2 at two keep the brand
   first without letting it take the row: at 1440 the three-column band goes
   from 589/310/310 to 518/345/345, and the two-column from 815/429 to
   679/565. */
.cnsite .cn-c3.cn-w1 > .cn-pin { grid-template-columns: 1.5fr 1fr 1fr; }
.cnsite .cn-c2.cn-w1 > .cn-pin { grid-template-columns: 1.2fr 1fr; }
.cnsite .cn-fcol { min-width: 0; }

.cnsite .cn-fh {
  font-size: 14.5px; font-weight: 800; letter-spacing: .2px; margin: 0 0 16px;
}
.cnsite .cn-fh.cn-up { text-transform: uppercase; letter-spacing: .9px; font-size: 13.5px; }
.cnsite .cn-fh.cn-fh-rule {
  padding-bottom: 11px; border-bottom: 1px solid currentColor;
}
.cnsite .cn-bg-l .cn-fh-rule, .cnsite .cn-bg-w .cn-fh-rule { border-bottom-color: #cfcfcf; }
.cnsite .cn-bg-d .cn-fh-rule, .cnsite .cn-bg-m .cn-fh-rule,
.cnsite .cn-bg-dd .cn-fh-rule { border-bottom-color: rgba(255, 255, 255, .28); }

.cnsite .cn-fl { list-style: none; margin: 0; padding: 0; }
.cnsite .cn-fl.cn-fl-b { list-style: disc; padding-left: 17px; }
.cnsite .cn-fl li { margin: 0 0 11px; font-size: 13.5px; font-weight: 500; }
.cnsite .cn-fl a { color: inherit; text-decoration: none; }
.cnsite .cn-fl a:hover { color: var(--cn-accent); }
.cnsite .cn-fci { display: flex; align-items: flex-start; gap: 11px; }
.cnsite .cn-fci svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; opacity: .85; }

.cnsite .cn-fname {
  font-size: 23px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px;
  margin: 0 0 14px;
}
.cnsite .cn-fbl { font-size: 13.5px; line-height: 2; margin: 0 0 18px; opacity: .72; }
.cnsite .cn-fmore {
  font-size: 13.5px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; color: inherit; display: table; margin-top: 16px;
}
.cnsite .cn-fbrand .cn-psoc { margin-top: 4px; }
/* His #8 - the brand block lifted out of the band so it overlaps what
   is above it. A property of the column, not a different footer. */
.cnsite .cn-fbrand.cn-raised { background: var(--cn-pdd); padding: 30px 34px; }

.cnsite .cn-fkick {
  font-size: 11px; letter-spacing: 4px; font-weight: 700; opacity: .85; margin: 0 0 7px;
}
.cnsite .cn-fcity {
  font-size: 22px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 22px;
}
.cnsite .cn-floc .cn-ctstack { flex-direction: column; align-items: flex-start; gap: 14px; }

.cnsite .cn-fbot { display: flex; align-items: center; font-size: 13px; }
.cnsite .cn-fbot.cn-hair  { border-top: 1px solid var(--cn-phair); }
.cnsite .cn-fbot.cn-hairT { border-top: 1px solid var(--cn-phairD); }
.cnsite .cn-pcopy { opacity: .9; }
/* THE CREDIT LINE, sitting with the copyright on all eight preset
   footers. The rule the whole thing hangs on is the LINK COLOUR: this
   lands on a dark bar in six of the eight, and the directory theme sets
   link colours globally and beats plain inheritance, so without the
   explicit colour the one link a free member's site owes the directory
   comes out navy on near-black and is invisible. inherit, so it takes
   the bar's own ink whichever bar it lands on. */
.cnsite .cn-pcred { opacity: .9; }
.cnsite .cn-pcred a { color: inherit; text-decoration: none; }
.cnsite .cn-pcred a:hover { text-decoration: underline; }
.cnsite .cn-pcred b { font-weight: 700; }
/* The separator only appears when there is something to separate it
   from - f7's bottom bar centres the copyright on its own and a leading
   bar there would read as a typo. */
.cnsite .cn-pcopy + .cn-pcred::before {
  content: "|"; opacity: .45; margin: 0 8px; font-weight: 400;
}
/* The fallback strip, for a member who switched their bottom bar off.
   Short, quiet and centred - it is the smallest answer to "the line has
   to be somewhere", not a band in its own right. */
.cnsite .cn-fbot.cn-fcredonly { min-height: 0; padding: 12px 0; font-size: 12.5px; }
.cnsite .cn-pbadge { display: inline-flex; gap: 8px; align-items: center; }
.cnsite .cn-pbadge i {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: 3px;
  padding: 4px 9px; opacity: .8;
}

/* --------------------------------------------------------- cta cards */
.cnsite .cn-fctaband { padding-bottom: 0; }
/* The call-to-action cards sit in the same column as everything else -
   they were centred-plus-32 like the bars, and drifted for the same
   reason. Same formula, so they cannot drift apart again. */
.cnsite .cn-fcta {
  display: grid; gap: 26px; margin: 0;
  padding: 34px max(28px, calc((100% - 1280px) / 2)) 0;
}
.cnsite .cn-fcta.cn-n1 { grid-template-columns: 1fr; }
.cnsite .cn-fcta.cn-n2 { grid-template-columns: 1fr 1fr; }
.cnsite .cn-fcta.cn-n3 { grid-template-columns: 1fr 1fr 1fr; }
.cnsite .cn-fcard {
  min-height: 178px; padding: 22px; display: flex; flex-direction: column;
  justify-content: space-between; background: var(--cn-pw); color: var(--cn-pink);
  text-decoration: none;
}
.cnsite .cn-fi svg { width: 40px; height: 40px; display: block; opacity: .9; }
.cnsite .cn-ftx { display: block; }
.cnsite .cn-frow { display: flex; align-items: center; gap: 16px; }
.cnsite .cn-far { margin-left: auto; font-size: 26px; line-height: 1; }
/* THE FILLED CARD KEEPS ITS ICON AND ITS ARROW.

     "see why the text and icon that was there top left not showing"

   It had two rules of its own hiding both - `visibility: hidden` on the
   icon and `display: none` on the arrow - so the first of three otherwise
   identical cards was missing the two marks the other two carried. The
   visibility, rather than display, is why it read as a gap rather than as
   a different design: the 40px the icon would have taken was still being
   held open above the words.

   Nothing was wrong with them; they were a deliberate flourish copied
   from a reference, and he asked why the card was missing what its
   neighbours had. Three cards that behave the same way is the easier
   thing to explain, so the two rules are gone rather than commented out -
   a rule kept "in case" is a rule the next reader has to decide about
   again. */
.cnsite .cn-fcard.cn-fill { background: #6b6b6b; color: #fff; }
.cnsite .cn-fk {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; margin-bottom: 8px; opacity: .8;
}
.cnsite .cn-fcard:not(.cn-fill) .cn-fk { color: var(--cn-accent); opacity: 1; }
.cnsite .cn-fb { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.4px; }
.cnsite .cn-fcard:hover { background: var(--cn-accent); color: var(--cn-aink); }
.cnsite .cn-fcard:hover .cn-fk { color: inherit; }

/* =================================================================
   NARROW
   The bars keep their order and their contents; they stop being one
   line. Nothing is hidden on a phone - a member who switched a part on
   meant it to be there.
   ================================================================= */
/* ---- WHERE THERE IS ROOM, THEY STAY SIDE BY SIDE ----------------------
   Moved down from 1000px on 19 Aug. The grid rule was lifted OUT of the
   1000px block rather than that block being re-pointed: everything else in
   there - nav gaps, run spacing - belongs at 1000 and had nothing to do
   with this.

   THE ORPHAN IS WHY. At about 990px a three-column footer - Brand, Pages,
   Contact - was being handed two tracks, and three items in two tracks is
   two rows with the bottom-right quadrant empty: Brand over Contact in the
   first track, Pages alone in the second, and a hole beside it. That is
   worse than either three across or a clean 2x2.

   SO THREE COLUMNS NEVER TAKE TWO TRACKS ANY MORE. They hold three across
   until 760, where everything stacks to one, and the arithmetic is what
   says they fit: at 880px the three tracks compute to 322/215/215, and the
   widest heading a footer column carries - "Areas we serve" - measures
   about 88px. There is no width at which two tracks is the right answer
   for three columns, so the case is removed rather than reshaped. That
   also settles the old asymmetry here, where a three-column band folded
   only when its first column was the wide one and stayed three across
   otherwise: both now behave the same.

   FOUR still folds here, and folds cleanly - four items in two tracks is
   exactly two full rows with no hole. At 880 four tracks would be
   278/146/146/146, which still holds "Services" and "Get in touch" but is
   the point where folding reads better than squeezing.

   c5 keeps its old behaviour and would orphan the same way, five items in
   two tracks leaving a half row. NO PRESET HAS FIVE COLUMNS, so it cannot
   be reached today; it is named here so that adding one is known to need a
   shape of its own rather than inheriting this one. */
@media (max-width: 860px) {
  .cnsite .cn-c4 > .cn-pin, .cnsite .cn-c5 > .cn-pin,
  .cnsite .cn-c4.cn-w1 > .cn-pin {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1000px) {
  .cnsite .cn-ctrun, .cnsite .cn-ctstack { gap: 20px; }
  .cnsite .cn-pnav { gap: 16px; }
  .cnsite .cn-pnav a,
  .cnsite .cn-pnav .cn-navhead { font-size: 15px; }
}

/* THE SHELF LEAVES ROOM FOR A TITLE BAR. `?parts=all` stacks every preset
   in one page for the drawer to cut up, and edge to edge they read as one
   very tall header. The margin is what the builder puts the name bar into -
   it is on the SHELF wrapper, which only exists on that page, so nothing on
   a member's site moves.

   THIS NUMBER IS IN RENDER PIXELS AND IT GETS SHRUNK. The drawer renders
   this page 1336px wide and scales the whole thing down to fit the panel,
   so the gap on screen is a fraction of what is written here. At 30px in a
   430px drawer it came out below 9px, the title bar is 22px, and every
   title landed across the bottom of the preview above it. He sent three
   screenshots of it.

   THE PARTS DRAWER IS 760px WIDE - about 0.54 - so 64 x 0.54 is roughly
   35px: 22 for the bar and the rest clear air between cards. If that width
   ever changes this has to move with it, in the opposite direction: a wider
   drawer shrinks less and needs LESS margin here, not more. t72brw reads
   both numbers and fails when they stop fitting. Do not tune this by
   reading the render - open the drawer. */
.cnsite .cn-shelf { margin-top: 64px; }
.cnsite .cn-shelf:first-child { margin-top: 60px; }

/* AND THE GAP IS DARK, NOT WHITE.

   That margin showed the page behind it, and the page is white - so
   between every two presets sat a white band the width of the drawer,
   which reads as part of the header above it rather than as a gap. He drew
   an arrow at three of them: "that's not part of the header and footer,
   that white need to go away."

   This is the builder's panel colour written into the renderer, which is
   normally the wrong direction entirely. It is allowed here for one reason:
   .cn-pshelf only exists on `?parts=all` and `?pfoot=all`, a page that is
   generated to be cut up by the drawer and is never served to anybody. If
   this class ever appears on a member's page, something is badly wrong -
   and t66parts asserts it cannot. */
/* FLOW-ROOT IS THE LOAD-BEARING HALF OF THIS RULE, not tidiness.

   The first shelf carries a margin-top like every other one, and a first
   child's top margin COLLAPSES THROUGH its parent when the parent has no
   border, padding or formatting context of its own. So the margin moved
   onto .cnsite, .cnsite started 32px further down, and the strip above it
   was the page - white - with the first preset's name sitting on it in
   grey. Every card below it was fine, which is exactly what a collapsed
   margin looks like: "not sure why that one has white background, hmm."

   flow-root gives this element its own formatting context, so the margin
   stays inside and the background covers it. */
.cnsite.cn-pshelf { background: #0e1526; display: flow-root; }

/* =================================================================
   THE PHONE
   A hamburger, and one panel holding everything the bars put away.
   It works from a checkbox rather than a script: this markup lands on
   a member's published page, and a menu that needs JavaScript to open
   is a menu that does not open when the JavaScript does not arrive.
   ================================================================= */
.cnsite .cn-mtog {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  margin: 0; padding: 0; border: 0;
}
.cnsite .cn-mbtn {
  display: none; width: 44px; height: 44px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; cursor: pointer;
  margin-right: -10px;
}
.cnsite .cn-mbtn i {
  display: block; width: 24px; height: 2px; background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.cnsite .cn-mtog:focus-visible ~ .cn-pbar .cn-mbtn { outline: 2px solid var(--cn-accent); }
.cnsite .cn-mtog:checked ~ .cn-pbar .cn-mbtn i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cnsite .cn-mtog:checked ~ .cn-pbar .cn-mbtn i:nth-child(2) { opacity: 0; }
.cnsite .cn-mtog:checked ~ .cn-pbar .cn-mbtn i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cnsite .cn-mpanel { display: none; }
.cnsite .cn-mtog:checked ~ .cn-mpanel { display: block; }
/* ---- AND IT CLOSES AGAIN WHEN THE WINDOW GROWS. His #7, 5 August.

   The rule directly above has no width gate at all, so it was true at
   every width: open the hamburger on a phone, turn the phone sideways -
   or drag a desktop window from 700px back to 1200px - and the panel
   stayed on screen, sitting under a header that had already put its menu
   back in the bar. The checkbox is still checked, because nothing
   unchecks it; the panel is not "open" in any sense the member chose,
   it is simply never told to leave.

   761 IS NOT A NEW NUMBER AND MUST NEVER BECOME ONE. It is the width the
   hamburger itself stops being drawn at - `.cn-mbtn { display: flex }`
   inside `@media (max-width: 760px)`, a little below this - plus one. The
   panel must be gone at exactly the width the button that opens it is
   gone, or there is a band where a member can see a panel with no way to
   close it. The sub-menu block above the splice seam hands over at the
   same 761 for the same reason and writes out the same argument;
   t66pages reads all of them out of the stylesheet and fails when they
   stop agreeing, so this number cannot drift from the hamburger on its
   own.

   THE CHECKBOX IS DELIBERATELY LEFT CHECKED. Unchecking it would need
   JavaScript, and this menu runs off a checkbox precisely so that it
   works on a published page with no script at all. Hiding the panel is
   the whole fix; if the member shrinks the window back down the panel is
   still open, which is the state they last chose and is harmless.

   THE SUB-MENU BLOCK ANTICIPATED A RESIZE LANDING HERE and handled only
   the .cn-navsub styling, not the panel's own visibility - two halves of
   one behaviour, each correct alone, neither checked against the other.
   That is the same shape as the header-nav gate of 5 August and is now
   the fifth finding of it in a fortnight.

   IT LIVES IN w66.parts.css BECAUSE IT IS BELOW THE SPLICE SEAM. Written
   into w66.css directly it survives exactly until the next splice.py run,
   which rebuilds the whole tail from this file and throws it away
   silently. That happened to this very rule once, an hour after it was
   written, and splice.py is what noticed. */
@media (min-width: 761px) {
  .cnsite .cn-mtog:checked ~ .cn-mpanel { display: none; }
}
.cnsite .cn-mpanel > .cn-pin {
  flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 22px;
}
/* The panel takes the colour of the bar the button sits on, so opening
   it does not feel like arriving somewhere else. */
.cnsite .cn-mpanel { background: var(--cn-pw); color: var(--cn-pink);
  border-top: 1px solid var(--cn-phair); }
.cnsite .cn-p-h11 .cn-mpanel, .cnsite .cn-p-h9 .cn-mpanel,
.cnsite .cn-p-h12 .cn-mpanel, .cnsite .cn-p-h49 .cn-mpanel,
.cnsite .cn-p-h17 .cn-mpanel, .cnsite .cn-p-h3 .cn-mpanel,
.cnsite .cn-p-h8 .cn-mpanel {
  background: var(--cn-pd); color: #fff; border-top-color: var(--cn-phairD);
}
/* Every row in the panel is a thumb-sized target, which is the whole
   reason the menu moved in here rather than wrapping onto four lines. */
.cnsite .cn-mpanel .cn-pnav,
.cnsite .cn-mpanel .cn-ctrun { display: block; }
.cnsite .cn-mpanel .cn-pnav a,
.cnsite .cn-mpanel .cn-pnav .cn-navhead,
.cnsite .cn-mpanel .cn-ct {
  display: flex; align-items: center; min-height: 48px; width: 100%;
  border-bottom: 1px solid currentColor; font-size: 17px;
}
.cnsite .cn-mpanel .cn-pnav a,
.cnsite .cn-mpanel .cn-pnav .cn-navhead { border-bottom-color: rgba(128,128,128,.25); }
.cnsite .cn-mpanel .cn-ct { border-bottom: 0; min-height: 44px; font-size: 15px; }
.cnsite .cn-mpanel .cn-pnav-sm a,
.cnsite .cn-mpanel .cn-pnav-sm .cn-navhead { font-size: 14.5px; min-height: 42px; opacity: .75; }
/* Without this the button falls back to a browser link - blue,
   underlined, centred - because the fill rules key off the BAR colour
   and the panel is not a bar. */
.cnsite .cn-mpanel .cn-btn {
  width: 100%; margin-top: 18px; background: var(--cn-pd); color: #fff;
  border-color: var(--cn-pd);
}
.cnsite .cn-p-h11 .cn-mpanel .cn-btn, .cnsite .cn-p-h9 .cn-mpanel .cn-btn,
.cnsite .cn-p-h12 .cn-mpanel .cn-btn, .cnsite .cn-p-h49 .cn-mpanel .cn-btn,
.cnsite .cn-p-h17 .cn-mpanel .cn-btn, .cnsite .cn-p-h3 .cn-mpanel .cn-btn,
.cnsite .cn-p-h8 .cn-mpanel .cn-btn {
  background: #fff; color: var(--cn-pink); border-color: #fff;
}
.cnsite .cn-mpanel .cn-psoc { margin-top: 14px; gap: 6px; }
/* A 20px icon is not a thumb target. The mark stays 20px; the thing you
   press around it is 44. */
.cnsite .cn-mpanel .cn-psoc a {
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.cnsite .cn-mpanel .cn-psoc svg { width: 20px; height: 20px; }

@media (max-width: 760px) {
  /* The bars keep their order and their contents. What leaves them is
     the MENU, and only because six items wrapping onto four lines is
     not a menu. Everything else stays where the member put it. */
  .cnsite .cn-mbtn { display: flex; }
  /* On a phone a header is a logo and a hamburger. He is right that
     stacking three bars of contact runs and social rows onto a 390px
     screen is too much, and every site he sent as a reference does the
     same thing at this width. The bars are not deleted - everything in
     them is in the panel, one tap away. */
  .cnsite .cn-head .cn-pbar:not(.cn-mkeep) { display: none; }
  .cnsite .cn-head .cn-mkeep .cn-sl > *:not(.cn-logo):not(.cn-mbtn) { display: none; }
  .cnsite .cn-head .cn-mkeep .cn-sl-c { display: none; }
  .cnsite .cn-head .cn-mkeep .cn-pin { flex-wrap: nowrap; min-height: 64px; }
  /* The wrap reset a few rules down clears the auto margins that hold
     the two ends apart. This bar does not wrap, so it wants them back -
     without this the hamburger sits against the logo instead of at the
     far edge, which is where a thumb reaches for it. */
  .cnsite .cn-head .cn-mkeep .cn-sl-r { margin-left: auto; }
  .cnsite .cn-head .cn-mkeep .cn-sl-l { margin-right: auto; }
  /* A header with no menu at all keeps its bars, because there is no
     panel to move them into. */
  .cnsite .cn-head:not(:has(.cn-mkeep)) .cn-pbar { display: flex; }
  .cnsite .cn-head .cn-logo { font-size: 24px; letter-spacing: -.9px; }
  .cnsite .cn-head .cn-logo:not(.cn-logo-wide) img { max-height: 36px; }
  /* AN UPLOADED LOGO KEEPS ITS OWN NUMBER ON A PHONE TOO, up to a point.
     A flat 36px cap here would reintroduce exactly the bug above, one
     breakpoint down; a member who set 50 would see 50 on a laptop and 36
     on the phone in their hand and reasonably call that broken. min()
     honours their number and still refuses to let a 90px wordmark eat a
     phone screen. The variable is set inline beside the height, so a
     logo saved before this existed falls back to the old 40.

     THAT min() IS NOW THE FALLBACK RATHER THAN THE ANSWER. A member who
     sets a phone size gets exactly it - which is the whole point of the
     control, and it is why the clamp cannot stay on the outside of the
     var(): min(var(--cn-lghm, ...), 56px) would cap their own phone
     number at 56 too, and a tall square badge asked for at 90 would come
     back 56 with no way to say otherwise.

     Untouched, the chain is: no phone size -> min(desktop, 56), which is
     byte-for-byte what this line computed yesterday. */
  /* !important for the reason spelled out at the desktop rule: the theme's
     own `img { height: auto !important }` starts at 767px, which is inside
     this block, so without it every phone in the world ignores both the
     member's number and this ceiling. */
  .cnsite .cn-head .cn-logo-wide img { height: var(--cn-lghm, min(var(--cn-lgh, 40px), 56px)) !important; }
  /* And the spacing follows the size: no phone number means the desktop
     one, no desktop one means 0. Two links of the same chain. */
  .cnsite .cn-head .cn-logo-wide { padding: var(--cn-lgpm, var(--cn-lgp, 0px)) 0; }
  /* A long email is the one thing that can push a bar wider than the
     phone. It wraps instead. */
  .cnsite .cn-ct { white-space: normal; overflow-wrap: anywhere; }
  .cnsite .cn-ptag, .cnsite .cn-pcell { font-size: 13.5px; }
  .cnsite .cn-pcell { padding: 0 14px; border: 0; }
  .cnsite .cn-ctstack { flex-direction: column; align-items: flex-start; gap: 12px; }

  .cnsite .cn-pin { flex-wrap: wrap; padding: 14px 20px; row-gap: 12px; }
  /* The cards take the phone gutter too - 20px is what a section uses
     here, and a footer card inboard of the words above it is the same
     misalignment one breakpoint down. */
  .cnsite .cn-fcta { padding: 26px 20px 0; }
  .cnsite .cn-mpanel > .cn-pin { padding: 8px 20px 22px; row-gap: 0; }
  .cnsite .cn-sl { flex-wrap: wrap; gap: 16px; }
  .cnsite .cn-sl-l, .cnsite .cn-sl-r { margin: 0; }
  .cnsite .cn-sl-c { position: static; transform: none; }
  .cnsite .cn-pbar { min-height: 0 !important; }
  .cnsite .cn-pbar.cn-inset { margin: 0; width: 100%; }
  /* Once the bars wrap, pinning it to the edge would sit it on top of
     whatever wrapped underneath. It goes back in the flow. */
  .cnsite .cn-phbox { position: static; height: auto; padding: 8px 14px; }
  .cnsite .cn-c2 > .cn-pin, .cnsite .cn-c3 > .cn-pin, .cnsite .cn-c4 > .cn-pin,
  .cnsite .cn-c5 > .cn-pin, .cnsite .cn-c4.cn-w1 > .cn-pin,
  .cnsite .cn-c3.cn-w1 > .cn-pin, .cnsite .cn-c2.cn-w1 > .cn-pin { grid-template-columns: 1fr; }
  .cnsite .cn-fcta { grid-template-columns: 1fr !important; }
  .cnsite .cn-fbrand.cn-raised { margin-top: 0 !important; }
  .cnsite .cn-head .cn-btn, .cnsite .cn-foot .cn-btn { height: 46px; padding: 0 24px; }
}

/* ==================== CLICK TO ENLARGE ==================================
     "can it have click to enlarge like popup. with left and right arrow
      and close?"

   A radio group per gallery section. Radio zero is checked and has no
   pane, so "closed" is a value rather than an absence - the backdrop and
   the cross both simply select it. Nothing here can leave two overlays
   open, because a radio group cannot hold two values at once.

   NO JAVASCRIPT, the same line the tabs and the mobile menu hold. */

/* The wrapper round a gallery photo has NO BOX. The layout classes are on
   the <img> - .cn-img.cn-sq, the masonry column flow, .cn-track
   img.cn-slide - and five style sheets target .cn-img directly, so a
   wrapper with a box of its own would have moved every one of them.
   display:contents means the picture sits exactly where it sat before.
   The cursor therefore has to go on the img: the label has nothing to
   hover. */
.cnsite .cn-lbo { display: contents; }
.cnsite .cn-lbo > .cn-img { cursor: zoom-in; }

/* THE RADIOS ARE OFF SCREEN, NOT display:none - a hidden input cannot take
   focus, and these are what make the overlay reachable and dismissable
   from a keyboard at all. Same stance as the tabs. */
.cnsite .cn-lbr { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ONE PAIR PER PHOTO A SECTION CAN POSSIBLY DRAW, and the number is not a
   guess: widget 66 allows $CN_ALBUM_MAX albums of $CN_GAL_MAX photos, so
   the tabbed arrangement tops out at 10 x 40 = 400. Writing exactly that
   many means there is NO CAP HERE - no photo the renderer will draw can
   end up with a tile that opens nothing, and no truncation to mention in a
   comment and then forget. t66brw.php multiplies those two constants and
   fails if this list ever falls short of them.

   IT WAS 160 UNTIL 3 AUGUST, when $CN_GAL_MAX went from 16 to 40 because a
   member with twenty photos was silently showing sixteen. THIS LIST IS WHY
   THAT WAS NOT A ONE-CHARACTER CHANGE, and it is worth knowing that the
   whole list could be one rule: emit each pane IMMEDIATELY AFTER its own
   radio and `.cn-lbr:checked + .cn-lb` pairs them by adjacency, with no
   index anywhere and no cap to keep in step. Not done before launch on
   purpose - it moves markup the tabs and the overlays both sit in, and the
   240 lines below are boring, provable and cost 1.5 KB down the wire once
   gzip has seen them. */
.cnsite .cn-lb { display: none; }
.cnsite .cn-lbr.cn-lb-1:checked ~ .cn-lb.cn-lbp-1,
.cnsite .cn-lbr.cn-lb-2:checked ~ .cn-lb.cn-lbp-2,
.cnsite .cn-lbr.cn-lb-3:checked ~ .cn-lb.cn-lbp-3,
.cnsite .cn-lbr.cn-lb-4:checked ~ .cn-lb.cn-lbp-4,
.cnsite .cn-lbr.cn-lb-5:checked ~ .cn-lb.cn-lbp-5,
.cnsite .cn-lbr.cn-lb-6:checked ~ .cn-lb.cn-lbp-6,
.cnsite .cn-lbr.cn-lb-7:checked ~ .cn-lb.cn-lbp-7,
.cnsite .cn-lbr.cn-lb-8:checked ~ .cn-lb.cn-lbp-8,
.cnsite .cn-lbr.cn-lb-9:checked ~ .cn-lb.cn-lbp-9,
.cnsite .cn-lbr.cn-lb-10:checked ~ .cn-lb.cn-lbp-10,
.cnsite .cn-lbr.cn-lb-11:checked ~ .cn-lb.cn-lbp-11,
.cnsite .cn-lbr.cn-lb-12:checked ~ .cn-lb.cn-lbp-12,
.cnsite .cn-lbr.cn-lb-13:checked ~ .cn-lb.cn-lbp-13,
.cnsite .cn-lbr.cn-lb-14:checked ~ .cn-lb.cn-lbp-14,
.cnsite .cn-lbr.cn-lb-15:checked ~ .cn-lb.cn-lbp-15,
.cnsite .cn-lbr.cn-lb-16:checked ~ .cn-lb.cn-lbp-16,
.cnsite .cn-lbr.cn-lb-17:checked ~ .cn-lb.cn-lbp-17,
.cnsite .cn-lbr.cn-lb-18:checked ~ .cn-lb.cn-lbp-18,
.cnsite .cn-lbr.cn-lb-19:checked ~ .cn-lb.cn-lbp-19,
.cnsite .cn-lbr.cn-lb-20:checked ~ .cn-lb.cn-lbp-20,
.cnsite .cn-lbr.cn-lb-21:checked ~ .cn-lb.cn-lbp-21,
.cnsite .cn-lbr.cn-lb-22:checked ~ .cn-lb.cn-lbp-22,
.cnsite .cn-lbr.cn-lb-23:checked ~ .cn-lb.cn-lbp-23,
.cnsite .cn-lbr.cn-lb-24:checked ~ .cn-lb.cn-lbp-24,
.cnsite .cn-lbr.cn-lb-25:checked ~ .cn-lb.cn-lbp-25,
.cnsite .cn-lbr.cn-lb-26:checked ~ .cn-lb.cn-lbp-26,
.cnsite .cn-lbr.cn-lb-27:checked ~ .cn-lb.cn-lbp-27,
.cnsite .cn-lbr.cn-lb-28:checked ~ .cn-lb.cn-lbp-28,
.cnsite .cn-lbr.cn-lb-29:checked ~ .cn-lb.cn-lbp-29,
.cnsite .cn-lbr.cn-lb-30:checked ~ .cn-lb.cn-lbp-30,
.cnsite .cn-lbr.cn-lb-31:checked ~ .cn-lb.cn-lbp-31,
.cnsite .cn-lbr.cn-lb-32:checked ~ .cn-lb.cn-lbp-32,
.cnsite .cn-lbr.cn-lb-33:checked ~ .cn-lb.cn-lbp-33,
.cnsite .cn-lbr.cn-lb-34:checked ~ .cn-lb.cn-lbp-34,
.cnsite .cn-lbr.cn-lb-35:checked ~ .cn-lb.cn-lbp-35,
.cnsite .cn-lbr.cn-lb-36:checked ~ .cn-lb.cn-lbp-36,
.cnsite .cn-lbr.cn-lb-37:checked ~ .cn-lb.cn-lbp-37,
.cnsite .cn-lbr.cn-lb-38:checked ~ .cn-lb.cn-lbp-38,
.cnsite .cn-lbr.cn-lb-39:checked ~ .cn-lb.cn-lbp-39,
.cnsite .cn-lbr.cn-lb-40:checked ~ .cn-lb.cn-lbp-40,
.cnsite .cn-lbr.cn-lb-41:checked ~ .cn-lb.cn-lbp-41,
.cnsite .cn-lbr.cn-lb-42:checked ~ .cn-lb.cn-lbp-42,
.cnsite .cn-lbr.cn-lb-43:checked ~ .cn-lb.cn-lbp-43,
.cnsite .cn-lbr.cn-lb-44:checked ~ .cn-lb.cn-lbp-44,
.cnsite .cn-lbr.cn-lb-45:checked ~ .cn-lb.cn-lbp-45,
.cnsite .cn-lbr.cn-lb-46:checked ~ .cn-lb.cn-lbp-46,
.cnsite .cn-lbr.cn-lb-47:checked ~ .cn-lb.cn-lbp-47,
.cnsite .cn-lbr.cn-lb-48:checked ~ .cn-lb.cn-lbp-48,
.cnsite .cn-lbr.cn-lb-49:checked ~ .cn-lb.cn-lbp-49,
.cnsite .cn-lbr.cn-lb-50:checked ~ .cn-lb.cn-lbp-50,
.cnsite .cn-lbr.cn-lb-51:checked ~ .cn-lb.cn-lbp-51,
.cnsite .cn-lbr.cn-lb-52:checked ~ .cn-lb.cn-lbp-52,
.cnsite .cn-lbr.cn-lb-53:checked ~ .cn-lb.cn-lbp-53,
.cnsite .cn-lbr.cn-lb-54:checked ~ .cn-lb.cn-lbp-54,
.cnsite .cn-lbr.cn-lb-55:checked ~ .cn-lb.cn-lbp-55,
.cnsite .cn-lbr.cn-lb-56:checked ~ .cn-lb.cn-lbp-56,
.cnsite .cn-lbr.cn-lb-57:checked ~ .cn-lb.cn-lbp-57,
.cnsite .cn-lbr.cn-lb-58:checked ~ .cn-lb.cn-lbp-58,
.cnsite .cn-lbr.cn-lb-59:checked ~ .cn-lb.cn-lbp-59,
.cnsite .cn-lbr.cn-lb-60:checked ~ .cn-lb.cn-lbp-60,
.cnsite .cn-lbr.cn-lb-61:checked ~ .cn-lb.cn-lbp-61,
.cnsite .cn-lbr.cn-lb-62:checked ~ .cn-lb.cn-lbp-62,
.cnsite .cn-lbr.cn-lb-63:checked ~ .cn-lb.cn-lbp-63,
.cnsite .cn-lbr.cn-lb-64:checked ~ .cn-lb.cn-lbp-64,
.cnsite .cn-lbr.cn-lb-65:checked ~ .cn-lb.cn-lbp-65,
.cnsite .cn-lbr.cn-lb-66:checked ~ .cn-lb.cn-lbp-66,
.cnsite .cn-lbr.cn-lb-67:checked ~ .cn-lb.cn-lbp-67,
.cnsite .cn-lbr.cn-lb-68:checked ~ .cn-lb.cn-lbp-68,
.cnsite .cn-lbr.cn-lb-69:checked ~ .cn-lb.cn-lbp-69,
.cnsite .cn-lbr.cn-lb-70:checked ~ .cn-lb.cn-lbp-70,
.cnsite .cn-lbr.cn-lb-71:checked ~ .cn-lb.cn-lbp-71,
.cnsite .cn-lbr.cn-lb-72:checked ~ .cn-lb.cn-lbp-72,
.cnsite .cn-lbr.cn-lb-73:checked ~ .cn-lb.cn-lbp-73,
.cnsite .cn-lbr.cn-lb-74:checked ~ .cn-lb.cn-lbp-74,
.cnsite .cn-lbr.cn-lb-75:checked ~ .cn-lb.cn-lbp-75,
.cnsite .cn-lbr.cn-lb-76:checked ~ .cn-lb.cn-lbp-76,
.cnsite .cn-lbr.cn-lb-77:checked ~ .cn-lb.cn-lbp-77,
.cnsite .cn-lbr.cn-lb-78:checked ~ .cn-lb.cn-lbp-78,
.cnsite .cn-lbr.cn-lb-79:checked ~ .cn-lb.cn-lbp-79,
.cnsite .cn-lbr.cn-lb-80:checked ~ .cn-lb.cn-lbp-80,
.cnsite .cn-lbr.cn-lb-81:checked ~ .cn-lb.cn-lbp-81,
.cnsite .cn-lbr.cn-lb-82:checked ~ .cn-lb.cn-lbp-82,
.cnsite .cn-lbr.cn-lb-83:checked ~ .cn-lb.cn-lbp-83,
.cnsite .cn-lbr.cn-lb-84:checked ~ .cn-lb.cn-lbp-84,
.cnsite .cn-lbr.cn-lb-85:checked ~ .cn-lb.cn-lbp-85,
.cnsite .cn-lbr.cn-lb-86:checked ~ .cn-lb.cn-lbp-86,
.cnsite .cn-lbr.cn-lb-87:checked ~ .cn-lb.cn-lbp-87,
.cnsite .cn-lbr.cn-lb-88:checked ~ .cn-lb.cn-lbp-88,
.cnsite .cn-lbr.cn-lb-89:checked ~ .cn-lb.cn-lbp-89,
.cnsite .cn-lbr.cn-lb-90:checked ~ .cn-lb.cn-lbp-90,
.cnsite .cn-lbr.cn-lb-91:checked ~ .cn-lb.cn-lbp-91,
.cnsite .cn-lbr.cn-lb-92:checked ~ .cn-lb.cn-lbp-92,
.cnsite .cn-lbr.cn-lb-93:checked ~ .cn-lb.cn-lbp-93,
.cnsite .cn-lbr.cn-lb-94:checked ~ .cn-lb.cn-lbp-94,
.cnsite .cn-lbr.cn-lb-95:checked ~ .cn-lb.cn-lbp-95,
.cnsite .cn-lbr.cn-lb-96:checked ~ .cn-lb.cn-lbp-96,
.cnsite .cn-lbr.cn-lb-97:checked ~ .cn-lb.cn-lbp-97,
.cnsite .cn-lbr.cn-lb-98:checked ~ .cn-lb.cn-lbp-98,
.cnsite .cn-lbr.cn-lb-99:checked ~ .cn-lb.cn-lbp-99,
.cnsite .cn-lbr.cn-lb-100:checked ~ .cn-lb.cn-lbp-100,
.cnsite .cn-lbr.cn-lb-101:checked ~ .cn-lb.cn-lbp-101,
.cnsite .cn-lbr.cn-lb-102:checked ~ .cn-lb.cn-lbp-102,
.cnsite .cn-lbr.cn-lb-103:checked ~ .cn-lb.cn-lbp-103,
.cnsite .cn-lbr.cn-lb-104:checked ~ .cn-lb.cn-lbp-104,
.cnsite .cn-lbr.cn-lb-105:checked ~ .cn-lb.cn-lbp-105,
.cnsite .cn-lbr.cn-lb-106:checked ~ .cn-lb.cn-lbp-106,
.cnsite .cn-lbr.cn-lb-107:checked ~ .cn-lb.cn-lbp-107,
.cnsite .cn-lbr.cn-lb-108:checked ~ .cn-lb.cn-lbp-108,
.cnsite .cn-lbr.cn-lb-109:checked ~ .cn-lb.cn-lbp-109,
.cnsite .cn-lbr.cn-lb-110:checked ~ .cn-lb.cn-lbp-110,
.cnsite .cn-lbr.cn-lb-111:checked ~ .cn-lb.cn-lbp-111,
.cnsite .cn-lbr.cn-lb-112:checked ~ .cn-lb.cn-lbp-112,
.cnsite .cn-lbr.cn-lb-113:checked ~ .cn-lb.cn-lbp-113,
.cnsite .cn-lbr.cn-lb-114:checked ~ .cn-lb.cn-lbp-114,
.cnsite .cn-lbr.cn-lb-115:checked ~ .cn-lb.cn-lbp-115,
.cnsite .cn-lbr.cn-lb-116:checked ~ .cn-lb.cn-lbp-116,
.cnsite .cn-lbr.cn-lb-117:checked ~ .cn-lb.cn-lbp-117,
.cnsite .cn-lbr.cn-lb-118:checked ~ .cn-lb.cn-lbp-118,
.cnsite .cn-lbr.cn-lb-119:checked ~ .cn-lb.cn-lbp-119,
.cnsite .cn-lbr.cn-lb-120:checked ~ .cn-lb.cn-lbp-120,
.cnsite .cn-lbr.cn-lb-121:checked ~ .cn-lb.cn-lbp-121,
.cnsite .cn-lbr.cn-lb-122:checked ~ .cn-lb.cn-lbp-122,
.cnsite .cn-lbr.cn-lb-123:checked ~ .cn-lb.cn-lbp-123,
.cnsite .cn-lbr.cn-lb-124:checked ~ .cn-lb.cn-lbp-124,
.cnsite .cn-lbr.cn-lb-125:checked ~ .cn-lb.cn-lbp-125,
.cnsite .cn-lbr.cn-lb-126:checked ~ .cn-lb.cn-lbp-126,
.cnsite .cn-lbr.cn-lb-127:checked ~ .cn-lb.cn-lbp-127,
.cnsite .cn-lbr.cn-lb-128:checked ~ .cn-lb.cn-lbp-128,
.cnsite .cn-lbr.cn-lb-129:checked ~ .cn-lb.cn-lbp-129,
.cnsite .cn-lbr.cn-lb-130:checked ~ .cn-lb.cn-lbp-130,
.cnsite .cn-lbr.cn-lb-131:checked ~ .cn-lb.cn-lbp-131,
.cnsite .cn-lbr.cn-lb-132:checked ~ .cn-lb.cn-lbp-132,
.cnsite .cn-lbr.cn-lb-133:checked ~ .cn-lb.cn-lbp-133,
.cnsite .cn-lbr.cn-lb-134:checked ~ .cn-lb.cn-lbp-134,
.cnsite .cn-lbr.cn-lb-135:checked ~ .cn-lb.cn-lbp-135,
.cnsite .cn-lbr.cn-lb-136:checked ~ .cn-lb.cn-lbp-136,
.cnsite .cn-lbr.cn-lb-137:checked ~ .cn-lb.cn-lbp-137,
.cnsite .cn-lbr.cn-lb-138:checked ~ .cn-lb.cn-lbp-138,
.cnsite .cn-lbr.cn-lb-139:checked ~ .cn-lb.cn-lbp-139,
.cnsite .cn-lbr.cn-lb-140:checked ~ .cn-lb.cn-lbp-140,
.cnsite .cn-lbr.cn-lb-141:checked ~ .cn-lb.cn-lbp-141,
.cnsite .cn-lbr.cn-lb-142:checked ~ .cn-lb.cn-lbp-142,
.cnsite .cn-lbr.cn-lb-143:checked ~ .cn-lb.cn-lbp-143,
.cnsite .cn-lbr.cn-lb-144:checked ~ .cn-lb.cn-lbp-144,
.cnsite .cn-lbr.cn-lb-145:checked ~ .cn-lb.cn-lbp-145,
.cnsite .cn-lbr.cn-lb-146:checked ~ .cn-lb.cn-lbp-146,
.cnsite .cn-lbr.cn-lb-147:checked ~ .cn-lb.cn-lbp-147,
.cnsite .cn-lbr.cn-lb-148:checked ~ .cn-lb.cn-lbp-148,
.cnsite .cn-lbr.cn-lb-149:checked ~ .cn-lb.cn-lbp-149,
.cnsite .cn-lbr.cn-lb-150:checked ~ .cn-lb.cn-lbp-150,
.cnsite .cn-lbr.cn-lb-151:checked ~ .cn-lb.cn-lbp-151,
.cnsite .cn-lbr.cn-lb-152:checked ~ .cn-lb.cn-lbp-152,
.cnsite .cn-lbr.cn-lb-153:checked ~ .cn-lb.cn-lbp-153,
.cnsite .cn-lbr.cn-lb-154:checked ~ .cn-lb.cn-lbp-154,
.cnsite .cn-lbr.cn-lb-155:checked ~ .cn-lb.cn-lbp-155,
.cnsite .cn-lbr.cn-lb-156:checked ~ .cn-lb.cn-lbp-156,
.cnsite .cn-lbr.cn-lb-157:checked ~ .cn-lb.cn-lbp-157,
.cnsite .cn-lbr.cn-lb-158:checked ~ .cn-lb.cn-lbp-158,
.cnsite .cn-lbr.cn-lb-159:checked ~ .cn-lb.cn-lbp-159,
.cnsite .cn-lbr.cn-lb-160:checked ~ .cn-lb.cn-lbp-160,
.cnsite .cn-lbr.cn-lb-161:checked ~ .cn-lb.cn-lbp-161,
.cnsite .cn-lbr.cn-lb-162:checked ~ .cn-lb.cn-lbp-162,
.cnsite .cn-lbr.cn-lb-163:checked ~ .cn-lb.cn-lbp-163,
.cnsite .cn-lbr.cn-lb-164:checked ~ .cn-lb.cn-lbp-164,
.cnsite .cn-lbr.cn-lb-165:checked ~ .cn-lb.cn-lbp-165,
.cnsite .cn-lbr.cn-lb-166:checked ~ .cn-lb.cn-lbp-166,
.cnsite .cn-lbr.cn-lb-167:checked ~ .cn-lb.cn-lbp-167,
.cnsite .cn-lbr.cn-lb-168:checked ~ .cn-lb.cn-lbp-168,
.cnsite .cn-lbr.cn-lb-169:checked ~ .cn-lb.cn-lbp-169,
.cnsite .cn-lbr.cn-lb-170:checked ~ .cn-lb.cn-lbp-170,
.cnsite .cn-lbr.cn-lb-171:checked ~ .cn-lb.cn-lbp-171,
.cnsite .cn-lbr.cn-lb-172:checked ~ .cn-lb.cn-lbp-172,
.cnsite .cn-lbr.cn-lb-173:checked ~ .cn-lb.cn-lbp-173,
.cnsite .cn-lbr.cn-lb-174:checked ~ .cn-lb.cn-lbp-174,
.cnsite .cn-lbr.cn-lb-175:checked ~ .cn-lb.cn-lbp-175,
.cnsite .cn-lbr.cn-lb-176:checked ~ .cn-lb.cn-lbp-176,
.cnsite .cn-lbr.cn-lb-177:checked ~ .cn-lb.cn-lbp-177,
.cnsite .cn-lbr.cn-lb-178:checked ~ .cn-lb.cn-lbp-178,
.cnsite .cn-lbr.cn-lb-179:checked ~ .cn-lb.cn-lbp-179,
.cnsite .cn-lbr.cn-lb-180:checked ~ .cn-lb.cn-lbp-180,
.cnsite .cn-lbr.cn-lb-181:checked ~ .cn-lb.cn-lbp-181,
.cnsite .cn-lbr.cn-lb-182:checked ~ .cn-lb.cn-lbp-182,
.cnsite .cn-lbr.cn-lb-183:checked ~ .cn-lb.cn-lbp-183,
.cnsite .cn-lbr.cn-lb-184:checked ~ .cn-lb.cn-lbp-184,
.cnsite .cn-lbr.cn-lb-185:checked ~ .cn-lb.cn-lbp-185,
.cnsite .cn-lbr.cn-lb-186:checked ~ .cn-lb.cn-lbp-186,
.cnsite .cn-lbr.cn-lb-187:checked ~ .cn-lb.cn-lbp-187,
.cnsite .cn-lbr.cn-lb-188:checked ~ .cn-lb.cn-lbp-188,
.cnsite .cn-lbr.cn-lb-189:checked ~ .cn-lb.cn-lbp-189,
.cnsite .cn-lbr.cn-lb-190:checked ~ .cn-lb.cn-lbp-190,
.cnsite .cn-lbr.cn-lb-191:checked ~ .cn-lb.cn-lbp-191,
.cnsite .cn-lbr.cn-lb-192:checked ~ .cn-lb.cn-lbp-192,
.cnsite .cn-lbr.cn-lb-193:checked ~ .cn-lb.cn-lbp-193,
.cnsite .cn-lbr.cn-lb-194:checked ~ .cn-lb.cn-lbp-194,
.cnsite .cn-lbr.cn-lb-195:checked ~ .cn-lb.cn-lbp-195,
.cnsite .cn-lbr.cn-lb-196:checked ~ .cn-lb.cn-lbp-196,
.cnsite .cn-lbr.cn-lb-197:checked ~ .cn-lb.cn-lbp-197,
.cnsite .cn-lbr.cn-lb-198:checked ~ .cn-lb.cn-lbp-198,
.cnsite .cn-lbr.cn-lb-199:checked ~ .cn-lb.cn-lbp-199,
.cnsite .cn-lbr.cn-lb-200:checked ~ .cn-lb.cn-lbp-200,
.cnsite .cn-lbr.cn-lb-201:checked ~ .cn-lb.cn-lbp-201,
.cnsite .cn-lbr.cn-lb-202:checked ~ .cn-lb.cn-lbp-202,
.cnsite .cn-lbr.cn-lb-203:checked ~ .cn-lb.cn-lbp-203,
.cnsite .cn-lbr.cn-lb-204:checked ~ .cn-lb.cn-lbp-204,
.cnsite .cn-lbr.cn-lb-205:checked ~ .cn-lb.cn-lbp-205,
.cnsite .cn-lbr.cn-lb-206:checked ~ .cn-lb.cn-lbp-206,
.cnsite .cn-lbr.cn-lb-207:checked ~ .cn-lb.cn-lbp-207,
.cnsite .cn-lbr.cn-lb-208:checked ~ .cn-lb.cn-lbp-208,
.cnsite .cn-lbr.cn-lb-209:checked ~ .cn-lb.cn-lbp-209,
.cnsite .cn-lbr.cn-lb-210:checked ~ .cn-lb.cn-lbp-210,
.cnsite .cn-lbr.cn-lb-211:checked ~ .cn-lb.cn-lbp-211,
.cnsite .cn-lbr.cn-lb-212:checked ~ .cn-lb.cn-lbp-212,
.cnsite .cn-lbr.cn-lb-213:checked ~ .cn-lb.cn-lbp-213,
.cnsite .cn-lbr.cn-lb-214:checked ~ .cn-lb.cn-lbp-214,
.cnsite .cn-lbr.cn-lb-215:checked ~ .cn-lb.cn-lbp-215,
.cnsite .cn-lbr.cn-lb-216:checked ~ .cn-lb.cn-lbp-216,
.cnsite .cn-lbr.cn-lb-217:checked ~ .cn-lb.cn-lbp-217,
.cnsite .cn-lbr.cn-lb-218:checked ~ .cn-lb.cn-lbp-218,
.cnsite .cn-lbr.cn-lb-219:checked ~ .cn-lb.cn-lbp-219,
.cnsite .cn-lbr.cn-lb-220:checked ~ .cn-lb.cn-lbp-220,
.cnsite .cn-lbr.cn-lb-221:checked ~ .cn-lb.cn-lbp-221,
.cnsite .cn-lbr.cn-lb-222:checked ~ .cn-lb.cn-lbp-222,
.cnsite .cn-lbr.cn-lb-223:checked ~ .cn-lb.cn-lbp-223,
.cnsite .cn-lbr.cn-lb-224:checked ~ .cn-lb.cn-lbp-224,
.cnsite .cn-lbr.cn-lb-225:checked ~ .cn-lb.cn-lbp-225,
.cnsite .cn-lbr.cn-lb-226:checked ~ .cn-lb.cn-lbp-226,
.cnsite .cn-lbr.cn-lb-227:checked ~ .cn-lb.cn-lbp-227,
.cnsite .cn-lbr.cn-lb-228:checked ~ .cn-lb.cn-lbp-228,
.cnsite .cn-lbr.cn-lb-229:checked ~ .cn-lb.cn-lbp-229,
.cnsite .cn-lbr.cn-lb-230:checked ~ .cn-lb.cn-lbp-230,
.cnsite .cn-lbr.cn-lb-231:checked ~ .cn-lb.cn-lbp-231,
.cnsite .cn-lbr.cn-lb-232:checked ~ .cn-lb.cn-lbp-232,
.cnsite .cn-lbr.cn-lb-233:checked ~ .cn-lb.cn-lbp-233,
.cnsite .cn-lbr.cn-lb-234:checked ~ .cn-lb.cn-lbp-234,
.cnsite .cn-lbr.cn-lb-235:checked ~ .cn-lb.cn-lbp-235,
.cnsite .cn-lbr.cn-lb-236:checked ~ .cn-lb.cn-lbp-236,
.cnsite .cn-lbr.cn-lb-237:checked ~ .cn-lb.cn-lbp-237,
.cnsite .cn-lbr.cn-lb-238:checked ~ .cn-lb.cn-lbp-238,
.cnsite .cn-lbr.cn-lb-239:checked ~ .cn-lb.cn-lbp-239,
.cnsite .cn-lbr.cn-lb-240:checked ~ .cn-lb.cn-lbp-240,
.cnsite .cn-lbr.cn-lb-241:checked ~ .cn-lb.cn-lbp-241,
.cnsite .cn-lbr.cn-lb-242:checked ~ .cn-lb.cn-lbp-242,
.cnsite .cn-lbr.cn-lb-243:checked ~ .cn-lb.cn-lbp-243,
.cnsite .cn-lbr.cn-lb-244:checked ~ .cn-lb.cn-lbp-244,
.cnsite .cn-lbr.cn-lb-245:checked ~ .cn-lb.cn-lbp-245,
.cnsite .cn-lbr.cn-lb-246:checked ~ .cn-lb.cn-lbp-246,
.cnsite .cn-lbr.cn-lb-247:checked ~ .cn-lb.cn-lbp-247,
.cnsite .cn-lbr.cn-lb-248:checked ~ .cn-lb.cn-lbp-248,
.cnsite .cn-lbr.cn-lb-249:checked ~ .cn-lb.cn-lbp-249,
.cnsite .cn-lbr.cn-lb-250:checked ~ .cn-lb.cn-lbp-250,
.cnsite .cn-lbr.cn-lb-251:checked ~ .cn-lb.cn-lbp-251,
.cnsite .cn-lbr.cn-lb-252:checked ~ .cn-lb.cn-lbp-252,
.cnsite .cn-lbr.cn-lb-253:checked ~ .cn-lb.cn-lbp-253,
.cnsite .cn-lbr.cn-lb-254:checked ~ .cn-lb.cn-lbp-254,
.cnsite .cn-lbr.cn-lb-255:checked ~ .cn-lb.cn-lbp-255,
.cnsite .cn-lbr.cn-lb-256:checked ~ .cn-lb.cn-lbp-256,
.cnsite .cn-lbr.cn-lb-257:checked ~ .cn-lb.cn-lbp-257,
.cnsite .cn-lbr.cn-lb-258:checked ~ .cn-lb.cn-lbp-258,
.cnsite .cn-lbr.cn-lb-259:checked ~ .cn-lb.cn-lbp-259,
.cnsite .cn-lbr.cn-lb-260:checked ~ .cn-lb.cn-lbp-260,
.cnsite .cn-lbr.cn-lb-261:checked ~ .cn-lb.cn-lbp-261,
.cnsite .cn-lbr.cn-lb-262:checked ~ .cn-lb.cn-lbp-262,
.cnsite .cn-lbr.cn-lb-263:checked ~ .cn-lb.cn-lbp-263,
.cnsite .cn-lbr.cn-lb-264:checked ~ .cn-lb.cn-lbp-264,
.cnsite .cn-lbr.cn-lb-265:checked ~ .cn-lb.cn-lbp-265,
.cnsite .cn-lbr.cn-lb-266:checked ~ .cn-lb.cn-lbp-266,
.cnsite .cn-lbr.cn-lb-267:checked ~ .cn-lb.cn-lbp-267,
.cnsite .cn-lbr.cn-lb-268:checked ~ .cn-lb.cn-lbp-268,
.cnsite .cn-lbr.cn-lb-269:checked ~ .cn-lb.cn-lbp-269,
.cnsite .cn-lbr.cn-lb-270:checked ~ .cn-lb.cn-lbp-270,
.cnsite .cn-lbr.cn-lb-271:checked ~ .cn-lb.cn-lbp-271,
.cnsite .cn-lbr.cn-lb-272:checked ~ .cn-lb.cn-lbp-272,
.cnsite .cn-lbr.cn-lb-273:checked ~ .cn-lb.cn-lbp-273,
.cnsite .cn-lbr.cn-lb-274:checked ~ .cn-lb.cn-lbp-274,
.cnsite .cn-lbr.cn-lb-275:checked ~ .cn-lb.cn-lbp-275,
.cnsite .cn-lbr.cn-lb-276:checked ~ .cn-lb.cn-lbp-276,
.cnsite .cn-lbr.cn-lb-277:checked ~ .cn-lb.cn-lbp-277,
.cnsite .cn-lbr.cn-lb-278:checked ~ .cn-lb.cn-lbp-278,
.cnsite .cn-lbr.cn-lb-279:checked ~ .cn-lb.cn-lbp-279,
.cnsite .cn-lbr.cn-lb-280:checked ~ .cn-lb.cn-lbp-280,
.cnsite .cn-lbr.cn-lb-281:checked ~ .cn-lb.cn-lbp-281,
.cnsite .cn-lbr.cn-lb-282:checked ~ .cn-lb.cn-lbp-282,
.cnsite .cn-lbr.cn-lb-283:checked ~ .cn-lb.cn-lbp-283,
.cnsite .cn-lbr.cn-lb-284:checked ~ .cn-lb.cn-lbp-284,
.cnsite .cn-lbr.cn-lb-285:checked ~ .cn-lb.cn-lbp-285,
.cnsite .cn-lbr.cn-lb-286:checked ~ .cn-lb.cn-lbp-286,
.cnsite .cn-lbr.cn-lb-287:checked ~ .cn-lb.cn-lbp-287,
.cnsite .cn-lbr.cn-lb-288:checked ~ .cn-lb.cn-lbp-288,
.cnsite .cn-lbr.cn-lb-289:checked ~ .cn-lb.cn-lbp-289,
.cnsite .cn-lbr.cn-lb-290:checked ~ .cn-lb.cn-lbp-290,
.cnsite .cn-lbr.cn-lb-291:checked ~ .cn-lb.cn-lbp-291,
.cnsite .cn-lbr.cn-lb-292:checked ~ .cn-lb.cn-lbp-292,
.cnsite .cn-lbr.cn-lb-293:checked ~ .cn-lb.cn-lbp-293,
.cnsite .cn-lbr.cn-lb-294:checked ~ .cn-lb.cn-lbp-294,
.cnsite .cn-lbr.cn-lb-295:checked ~ .cn-lb.cn-lbp-295,
.cnsite .cn-lbr.cn-lb-296:checked ~ .cn-lb.cn-lbp-296,
.cnsite .cn-lbr.cn-lb-297:checked ~ .cn-lb.cn-lbp-297,
.cnsite .cn-lbr.cn-lb-298:checked ~ .cn-lb.cn-lbp-298,
.cnsite .cn-lbr.cn-lb-299:checked ~ .cn-lb.cn-lbp-299,
.cnsite .cn-lbr.cn-lb-300:checked ~ .cn-lb.cn-lbp-300,
.cnsite .cn-lbr.cn-lb-301:checked ~ .cn-lb.cn-lbp-301,
.cnsite .cn-lbr.cn-lb-302:checked ~ .cn-lb.cn-lbp-302,
.cnsite .cn-lbr.cn-lb-303:checked ~ .cn-lb.cn-lbp-303,
.cnsite .cn-lbr.cn-lb-304:checked ~ .cn-lb.cn-lbp-304,
.cnsite .cn-lbr.cn-lb-305:checked ~ .cn-lb.cn-lbp-305,
.cnsite .cn-lbr.cn-lb-306:checked ~ .cn-lb.cn-lbp-306,
.cnsite .cn-lbr.cn-lb-307:checked ~ .cn-lb.cn-lbp-307,
.cnsite .cn-lbr.cn-lb-308:checked ~ .cn-lb.cn-lbp-308,
.cnsite .cn-lbr.cn-lb-309:checked ~ .cn-lb.cn-lbp-309,
.cnsite .cn-lbr.cn-lb-310:checked ~ .cn-lb.cn-lbp-310,
.cnsite .cn-lbr.cn-lb-311:checked ~ .cn-lb.cn-lbp-311,
.cnsite .cn-lbr.cn-lb-312:checked ~ .cn-lb.cn-lbp-312,
.cnsite .cn-lbr.cn-lb-313:checked ~ .cn-lb.cn-lbp-313,
.cnsite .cn-lbr.cn-lb-314:checked ~ .cn-lb.cn-lbp-314,
.cnsite .cn-lbr.cn-lb-315:checked ~ .cn-lb.cn-lbp-315,
.cnsite .cn-lbr.cn-lb-316:checked ~ .cn-lb.cn-lbp-316,
.cnsite .cn-lbr.cn-lb-317:checked ~ .cn-lb.cn-lbp-317,
.cnsite .cn-lbr.cn-lb-318:checked ~ .cn-lb.cn-lbp-318,
.cnsite .cn-lbr.cn-lb-319:checked ~ .cn-lb.cn-lbp-319,
.cnsite .cn-lbr.cn-lb-320:checked ~ .cn-lb.cn-lbp-320,
.cnsite .cn-lbr.cn-lb-321:checked ~ .cn-lb.cn-lbp-321,
.cnsite .cn-lbr.cn-lb-322:checked ~ .cn-lb.cn-lbp-322,
.cnsite .cn-lbr.cn-lb-323:checked ~ .cn-lb.cn-lbp-323,
.cnsite .cn-lbr.cn-lb-324:checked ~ .cn-lb.cn-lbp-324,
.cnsite .cn-lbr.cn-lb-325:checked ~ .cn-lb.cn-lbp-325,
.cnsite .cn-lbr.cn-lb-326:checked ~ .cn-lb.cn-lbp-326,
.cnsite .cn-lbr.cn-lb-327:checked ~ .cn-lb.cn-lbp-327,
.cnsite .cn-lbr.cn-lb-328:checked ~ .cn-lb.cn-lbp-328,
.cnsite .cn-lbr.cn-lb-329:checked ~ .cn-lb.cn-lbp-329,
.cnsite .cn-lbr.cn-lb-330:checked ~ .cn-lb.cn-lbp-330,
.cnsite .cn-lbr.cn-lb-331:checked ~ .cn-lb.cn-lbp-331,
.cnsite .cn-lbr.cn-lb-332:checked ~ .cn-lb.cn-lbp-332,
.cnsite .cn-lbr.cn-lb-333:checked ~ .cn-lb.cn-lbp-333,
.cnsite .cn-lbr.cn-lb-334:checked ~ .cn-lb.cn-lbp-334,
.cnsite .cn-lbr.cn-lb-335:checked ~ .cn-lb.cn-lbp-335,
.cnsite .cn-lbr.cn-lb-336:checked ~ .cn-lb.cn-lbp-336,
.cnsite .cn-lbr.cn-lb-337:checked ~ .cn-lb.cn-lbp-337,
.cnsite .cn-lbr.cn-lb-338:checked ~ .cn-lb.cn-lbp-338,
.cnsite .cn-lbr.cn-lb-339:checked ~ .cn-lb.cn-lbp-339,
.cnsite .cn-lbr.cn-lb-340:checked ~ .cn-lb.cn-lbp-340,
.cnsite .cn-lbr.cn-lb-341:checked ~ .cn-lb.cn-lbp-341,
.cnsite .cn-lbr.cn-lb-342:checked ~ .cn-lb.cn-lbp-342,
.cnsite .cn-lbr.cn-lb-343:checked ~ .cn-lb.cn-lbp-343,
.cnsite .cn-lbr.cn-lb-344:checked ~ .cn-lb.cn-lbp-344,
.cnsite .cn-lbr.cn-lb-345:checked ~ .cn-lb.cn-lbp-345,
.cnsite .cn-lbr.cn-lb-346:checked ~ .cn-lb.cn-lbp-346,
.cnsite .cn-lbr.cn-lb-347:checked ~ .cn-lb.cn-lbp-347,
.cnsite .cn-lbr.cn-lb-348:checked ~ .cn-lb.cn-lbp-348,
.cnsite .cn-lbr.cn-lb-349:checked ~ .cn-lb.cn-lbp-349,
.cnsite .cn-lbr.cn-lb-350:checked ~ .cn-lb.cn-lbp-350,
.cnsite .cn-lbr.cn-lb-351:checked ~ .cn-lb.cn-lbp-351,
.cnsite .cn-lbr.cn-lb-352:checked ~ .cn-lb.cn-lbp-352,
.cnsite .cn-lbr.cn-lb-353:checked ~ .cn-lb.cn-lbp-353,
.cnsite .cn-lbr.cn-lb-354:checked ~ .cn-lb.cn-lbp-354,
.cnsite .cn-lbr.cn-lb-355:checked ~ .cn-lb.cn-lbp-355,
.cnsite .cn-lbr.cn-lb-356:checked ~ .cn-lb.cn-lbp-356,
.cnsite .cn-lbr.cn-lb-357:checked ~ .cn-lb.cn-lbp-357,
.cnsite .cn-lbr.cn-lb-358:checked ~ .cn-lb.cn-lbp-358,
.cnsite .cn-lbr.cn-lb-359:checked ~ .cn-lb.cn-lbp-359,
.cnsite .cn-lbr.cn-lb-360:checked ~ .cn-lb.cn-lbp-360,
.cnsite .cn-lbr.cn-lb-361:checked ~ .cn-lb.cn-lbp-361,
.cnsite .cn-lbr.cn-lb-362:checked ~ .cn-lb.cn-lbp-362,
.cnsite .cn-lbr.cn-lb-363:checked ~ .cn-lb.cn-lbp-363,
.cnsite .cn-lbr.cn-lb-364:checked ~ .cn-lb.cn-lbp-364,
.cnsite .cn-lbr.cn-lb-365:checked ~ .cn-lb.cn-lbp-365,
.cnsite .cn-lbr.cn-lb-366:checked ~ .cn-lb.cn-lbp-366,
.cnsite .cn-lbr.cn-lb-367:checked ~ .cn-lb.cn-lbp-367,
.cnsite .cn-lbr.cn-lb-368:checked ~ .cn-lb.cn-lbp-368,
.cnsite .cn-lbr.cn-lb-369:checked ~ .cn-lb.cn-lbp-369,
.cnsite .cn-lbr.cn-lb-370:checked ~ .cn-lb.cn-lbp-370,
.cnsite .cn-lbr.cn-lb-371:checked ~ .cn-lb.cn-lbp-371,
.cnsite .cn-lbr.cn-lb-372:checked ~ .cn-lb.cn-lbp-372,
.cnsite .cn-lbr.cn-lb-373:checked ~ .cn-lb.cn-lbp-373,
.cnsite .cn-lbr.cn-lb-374:checked ~ .cn-lb.cn-lbp-374,
.cnsite .cn-lbr.cn-lb-375:checked ~ .cn-lb.cn-lbp-375,
.cnsite .cn-lbr.cn-lb-376:checked ~ .cn-lb.cn-lbp-376,
.cnsite .cn-lbr.cn-lb-377:checked ~ .cn-lb.cn-lbp-377,
.cnsite .cn-lbr.cn-lb-378:checked ~ .cn-lb.cn-lbp-378,
.cnsite .cn-lbr.cn-lb-379:checked ~ .cn-lb.cn-lbp-379,
.cnsite .cn-lbr.cn-lb-380:checked ~ .cn-lb.cn-lbp-380,
.cnsite .cn-lbr.cn-lb-381:checked ~ .cn-lb.cn-lbp-381,
.cnsite .cn-lbr.cn-lb-382:checked ~ .cn-lb.cn-lbp-382,
.cnsite .cn-lbr.cn-lb-383:checked ~ .cn-lb.cn-lbp-383,
.cnsite .cn-lbr.cn-lb-384:checked ~ .cn-lb.cn-lbp-384,
.cnsite .cn-lbr.cn-lb-385:checked ~ .cn-lb.cn-lbp-385,
.cnsite .cn-lbr.cn-lb-386:checked ~ .cn-lb.cn-lbp-386,
.cnsite .cn-lbr.cn-lb-387:checked ~ .cn-lb.cn-lbp-387,
.cnsite .cn-lbr.cn-lb-388:checked ~ .cn-lb.cn-lbp-388,
.cnsite .cn-lbr.cn-lb-389:checked ~ .cn-lb.cn-lbp-389,
.cnsite .cn-lbr.cn-lb-390:checked ~ .cn-lb.cn-lbp-390,
.cnsite .cn-lbr.cn-lb-391:checked ~ .cn-lb.cn-lbp-391,
.cnsite .cn-lbr.cn-lb-392:checked ~ .cn-lb.cn-lbp-392,
.cnsite .cn-lbr.cn-lb-393:checked ~ .cn-lb.cn-lbp-393,
.cnsite .cn-lbr.cn-lb-394:checked ~ .cn-lb.cn-lbp-394,
.cnsite .cn-lbr.cn-lb-395:checked ~ .cn-lb.cn-lbp-395,
.cnsite .cn-lbr.cn-lb-396:checked ~ .cn-lb.cn-lbp-396,
.cnsite .cn-lbr.cn-lb-397:checked ~ .cn-lb.cn-lbp-397,
.cnsite .cn-lbr.cn-lb-398:checked ~ .cn-lb.cn-lbp-398,
.cnsite .cn-lbr.cn-lb-399:checked ~ .cn-lb.cn-lbp-399,
.cnsite .cn-lbr.cn-lb-400:checked ~ .cn-lb.cn-lbp-400 {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 9000;
}
/* FIXED IS VIEWPORT-RELATIVE HERE, and that is checked rather than hoped:
   nothing between this element and the page root carries a transform, a
   filter or a containment, any one of which would silently turn "cover the
   window" into "cover this section". t66brw.php holds that line. */

/* The backdrop is a LABEL covering the whole overlay, so clicking anywhere
   off the picture closes it - the behaviour everybody expects and nobody
   is told about. It sits under the picture and the controls. */
.cnsite .cn-lbbg {
  position: absolute; inset: 0; background: rgba(8, 10, 14, .965);
  cursor: zoom-out; border: 0;
}
.cnsite .cn-lbimg {
  position: relative; max-width: 92vw; max-height: 86vh;
  width: auto; height: auto; object-fit: contain; border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
/* The controls sit above the backdrop. Big enough to hit with a thumb -
   44px is the size a finger actually is - and placed at the edges rather
   than on the picture, which is where his own example put them. */
.cnsite .cn-lbnav, .cnsite .cn-lbx {
  position: absolute; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; user-select: none; line-height: 1;
  background: rgba(255, 255, 255, .12); border-radius: 999px;
}
.cnsite .cn-lbnav { top: 50%; width: 52px; height: 52px; margin-top: -26px; font-size: 34px; }
.cnsite .cn-lbprev { left: 14px; padding-right: 3px; }
.cnsite .cn-lbnext { right: 14px; padding-left: 3px; }
.cnsite .cn-lbx { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 28px; }
.cnsite .cn-lbnav:hover, .cnsite .cn-lbx:hover { background: rgba(255, 255, 255, .26); }
/* Where you are in the set. Without it a long album is a maze. */
.cnsite .cn-lbn {
  position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center;
  color: rgba(255, 255, 255, .72); font-size: 12.5px; letter-spacing: .06em;
}
/* Focus has to be visible on the LABELS, because the input each one drives
   is parked off screen. */
.cnsite .cn-lbr:focus-visible ~ .cn-lb .cn-lbx,
.cnsite .cn-lbnav:focus-visible, .cnsite .cn-lbx:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
/* ON A PHONE THE ARROWS GET THEIR OWN LANE. At 96vw the picture ran under
   both of them and every tap near an edge was a coin toss between "next"
   and "you missed". Pulling the picture in to 82vw leaves a clear column
   on each side that is wider than a fingertip. */
@media (max-width: 780px) {
  .cnsite .cn-lbimg { max-width: 82vw; max-height: 74vh; }
  .cnsite .cn-lbnav { width: 42px; height: 42px; margin-top: -21px; font-size: 28px; }
  .cnsite .cn-lbprev { left: 5px; }
  .cnsite .cn-lbnext { right: 5px; }
  .cnsite .cn-lbx { top: 10px; right: 10px; }
}

/* SECTIONS WIDEN THEIR GUTTER AT 1200 AND THE BARS FOLLOW, or the column
   shifts under itself between 1280 and 1344 of viewport. The old .cn-hbar
   already carries this exact block; these two are the parts-era bars and
   the footer cards, joining it. Three selectors, one arithmetic.

   AT THE END OF THE FILE ON PURPOSE. These are longhand padding-left and
   padding-right, and .cn-fcta sets shorthand `padding` further up - a
   media block placed before it loses to that shorthand at equal
   specificity, silently, at exactly one viewport width. Measured: the
   cards sat at 28 while everything else moved to 32. Last wins, so last
   is where this goes. */
@media (min-width: 1200px) {
  .cnsite .cn-pin, .cnsite .cn-fcta {
    padding-left: max(32px, calc((100% - 1280px) / 2));
    padding-right: max(32px, calc((100% - 1280px) / 2));
  }
}

/* ==================== hero | advanced ====================================

   Stacked in ONE grid cell rather than laid side by side, so the section is
   as tall as its tallest slide from the first paint and does not jump as the
   slides change. It is also what makes the no-script case correct: slide 1
   is visible, the rest are in the document and invisible, and nothing has to
   run for that to be true.

   `behind` FIXES THE TEXT LIGHT HERE, in the stylesheet, rather than leaving
   it to the renderer to remember. A photograph has bright and dark patches,
   so there is no single brightness to compute an ink from; dark scrim plus
   light text is the only pair that survives an unknown picture.            */

.cnsite .cn-hadv { position: relative; }
/* THE TRACK CLIPS, AND THIS ONE LINE IS THE WHOLE OF THE SIDEWAYS
   SCROLLBAR ON EVERY HOME PAGE WITH A SLIDING HERO.

   Reported with two screenshots and a red circle round the scrollbar:
   "see the bottom scroll bar, it shouldn't go left and right... and i see
   it only on the home page on both site. i this it might the hero slide."
   It is the hero slide.

   The slides are stacked in ONE grid cell, and every slide that is not
   showing is parked 26px to the right waiting to come in - that is what
   makes the movement a slide rather than a fade. Parked slides are
   visibility:hidden, so nobody can see them, but a hidden element is
   still LAID OUT and still counts towards how wide the document is. So
   the page was 26px wider than the window from the moment it loaded,
   for a slide nobody could see.

   Measured on his own page at four widths: 1458 against a 1440 window,
   1298 against 1280, 918 against 900, 438 against 420. Eighteen pixels
   every time - 26 minus the section's own gutter - and zero after this
   line.

   clip AND NOT hidden. overflow-x:hidden forces overflow-y to compute as
   auto, which makes a scroll container out of the track and can put a
   vertical scrollbar inside the hero. clip cuts the overflow without
   creating one.

   THE ARROWS AND DOTS ARE NOT IN HERE. The renderer closes the track
   before it draws them, so clipping cannot reach them - checked, and
   measured after the change: same position, same size, and the slideshow
   still advances. */
.cnsite .cn-hadv-track { display: grid; overflow-x: clip; }
.cnsite .cn-hadv-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
}
.cnsite .cn-hadv-slide.is-on { opacity: 1; visibility: visible; }

.cnsite .cn-hadv-mv-fade .cn-hadv-slide,
.cnsite .cn-hadv-mv-slide .cn-hadv-slide {
  transition: opacity var(--cn-hadv-dur, .45s) ease,
              transform var(--cn-hadv-dur, .45s) ease,
              visibility var(--cn-hadv-dur, .45s);
}
.cnsite .cn-hadv-mv-slide .cn-hadv-slide { transform: translateX(26px); }
.cnsite .cn-hadv-mv-slide .cn-hadv-slide.is-on { transform: none; }

.cnsite .cn-hadv-in { display: grid; gap: 36px; align-items: center; }
.cnsite .cn-hadv-side .cn-hadv-in { grid-template-columns: 1fr 1fr; }
.cnsite .cn-hadv-none .cn-hadv-in { grid-template-columns: 1fr; max-width: 720px; }

.cnsite .cn-hadv-body { font-size: 15.5px; line-height: 1.7; opacity: .82; margin: 0 0 24px; }
.cnsite .cn-hadv-shot { position: relative; }
.cnsite .cn-hadv-shot .cn-img, .cnsite .cn-hadv-shot .cn-ph { width: 100%; }

/* ---------- the photograph behind the words ---------- */
.cnsite .cn-hadv-behind .cn-hadv-slide {
  background-size: cover;
  background-position: center;
  padding: 76px 28px;
  color: #fff;
}
.cnsite .cn-hadv-behind .cn-hadv-scrim {
  position: absolute; inset: 0;
  background: rgba(8, 12, 20, var(--cn-hadv-scrim, .45));
}
.cnsite .cn-hadv-behind .cn-hadv-in {
  position: relative; z-index: 1;
  grid-template-columns: 1fr;
  max-width: 660px; margin: 0 auto;
}
/* WHERE THE WORDS SIT OVER A PHOTO - 24 September. John: "when i do photo
   behind the text are move to right it should be left ... there is text
   alignment but left doesn't go all the way left." The words were a 660px
   column CENTRED in the page and only the text inside it followed the
   alignment - so Left meant "left inside a box in the middle", 300px in
   from where the tabs and the logo start. The column now goes to the side
   the alignment names: Left (and Auto, and Justified) on the page's own left
   edge, Right on the right, Center in the middle. adobe.com's is left. */
.cnsite .cn-hero:not(.cn-a-centre):not(.cn-a-right) .cn-hadv-behind .cn-hadv-in { margin-left: 0; margin-right: auto; }
.cnsite .cn-hero.cn-a-right .cn-hadv-behind .cn-hadv-in { margin-left: auto; margin-right: 0; }
.cnsite .cn-hero.cn-a-centre .cn-hadv-behind .cn-hadv-in { margin-left: auto; margin-right: auto; }

/* ---------- arrows and dots ----------
   Both are drawn with `hidden` on them and the script takes it off. A
   control that cannot work must not be on the screen, and on a page whose
   JavaScript never arrives these two cannot work.                         */
.cnsite .cn-hadv-arrows {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; justify-content: space-between;
  padding: 0 10px; pointer-events: none; z-index: 2;
}
.cnsite .cn-hadv-arrows button {
  pointer-events: auto;
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; color: inherit; font-size: 20px; line-height: 1;
  background: rgba(128, 128, 128, .22);
}
.cnsite .cn-hadv-arrows button:hover { background: rgba(128, 128, 128, .42); }
/* SHOWN ON HOVER, AND SHOWN TO SOMEBODY TABBING THROUGH - who has no hover
   and for whom these are the only way forward.

   :focus-visible AND NOT :focus-within, which is the whole of a small thing
   he noticed: "after clicking the arrow and then moving the mouse away, the
   arrows dont disappear until I click somewhere else." A clicked button
   keeps focus, :focus-within matched it, and the arrows sat there until the
   focus went somewhere else. :focus-visible is the browser own answer to
   exactly this question - it matches when focus arrived by keyboard and not
   when it arrived under a fingertip.

   TWO RULES AND NOT ONE SELECTOR LIST, and that is not tidiness. A browser
   that does not understand :has() throws away the WHOLE rule it appears in,
   so keeping the hover half in the same list would take hover-reveal down
   with it on that browser. Split, the worst case is an old browser that
   reveals on hover only. */
.cnsite .cn-hadv-arrhover .cn-hadv-arrows { opacity: 0; transition: opacity .18s; }
.cnsite .cn-hadv-arrhover:hover .cn-hadv-arrows { opacity: 1; }
.cnsite .cn-hadv-arrhover:has(:focus-visible) .cn-hadv-arrows { opacity: 1; }

.cnsite .cn-hadv-dots {
  display: flex; gap: 7px; justify-content: center; padding: 18px 0 0;
  position: relative; z-index: 2;
}
.cnsite .cn-hadv-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: currentColor; opacity: .32;
}
.cnsite .cn-hadv-dot.is-on { opacity: 1; }
.cnsite .cn-hadv-dot:hover { opacity: .7; }

/* ---------- the phone ----------
   Arrows go, because an arrow under a thumb sits on top of the words and
   swipe and the dots already do that job. The headline drops a size.

   THE BUTTONS KEEP THEIR OWN WIDTH, like the computer. They used to go
   full width here; John, 24 Sep, on his phone: "can the button be left
   align and similar like the desktop". Two buttons that do not fit side
   by side still wrap onto a second line; the row's alignment classes still
   decide left or centre.                                                   */
@media (max-width: 780px) {
  .cnsite .cn-hadv-side .cn-hadv-in { grid-template-columns: 1fr; gap: 22px; }
  .cnsite .cn-hadv-mobtop .cn-hadv-shot { order: -1; }
  .cnsite .cn-hadv-mobnopic .cn-hadv-shot { display: none; }
  .cnsite .cn-hadv-arrows { display: none; }
  .cnsite .cn-hadv .cn-btns { display: flex; flex-wrap: wrap; width: 100%; }
  .cnsite .cn-hadv .cn-btn { flex: 0 1 auto; text-align: center; }
  .cnsite .cn-hadv .cn-h { font-size: 32px; }
  .cnsite .cn-hadv-behind .cn-hadv-slide { padding: 56px 22px; }
}

/* Somebody who has asked their machine for less movement gets the change
   instantly rather than not at all - they still see every slide. */
@media (prefers-reduced-motion: reduce) {
  .cnsite .cn-hadv-slide {
    transition-duration: .001s !important;
    transform: none !important;
  }
}


/* ============ THE SLIDESHOW HERO'S WORDS ARE NOT CUT SHORT ==============

   TWO COMPLAINTS, ONE CAUSE. Both of these, from 8 August:

     "it looks bad when member types the word one needs to see and when
      screen is small it goes away with ... that not good, the text to show
      even it lkooks bad because, if they dont want to look bad, they keep
      it short, the i would both needs to have 4 lines and user can choose
      how they want to balance ... and sometime someone have 1 line with
      big letters and 4 or 5 line paraggraph"

     "also dont know why but letter is getting cut out little from the
      bottom"

   .cn-h clamps to two lines and .cn-lead to three, EVERYWHERE, with
   -webkit-box plus overflow:hidden. That is where both came from:

     * the third line of a headline turns into an ellipsis - his "...";
     * and -webkit-box with overflow:hidden clips at the padding box, so a
       headline set on a tight line-height has the tails of its g, y and p
       sliced off the LAST LINE WHETHER OR NOT ANYTHING WAS CLAMPED. That
       is the letter getting cut out from the bottom, and it is why it
       happened on short headlines too.

   THE CLAMP IS RIGHT WHERE IT LIVES AND WRONG HERE. The long note beside
   it upstairs is about a row of three cards whose titles are one, three
   and one lines high: the pictures below them stop lining up, the member
   did nothing to cause it, and the section reads as broken. THERE IS
   NOTHING BESIDE A HERO. One slide, one cell, no neighbour to fall out of
   line with - which is exactly the argument .cn-rich already wins on, and
   the reason it is deliberately absent from that block.

   So the slideshow's own words say what the member typed. Four lines,
   five lines, one enormous line: their page, their call, and he asked for
   it in those words. Every other section keeps its clamp untouched.

   THE SLIDESHOW ONLY. .cn-h and .cn-lead are worn by every section on the
   site and 168 published pages draw them. He was looking at this hero when
   he said it, so this is scoped to this hero. The descender clipping is
   the same bug everywhere it clamps - it is written down in the handover
   to ask him about rather than changed underneath him here.              */
.cnsite .cn-hadv .cn-h,
.cnsite .cn-hadv .cn-lead {
  /* display:block undoes -webkit-box, which is what makes the clamp exist
     at all - line-clamp on anything else does nothing. Both are set anyway
     so the intent survives somebody reading only one of the three lines. */
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  /* AND THE DESCENDERS COME BACK. Nothing to hide once nothing is clamped,
     and this is the line that stops the tails being sliced. */
  overflow: visible;
}


/* ============ ONE BACKGROUND, EDGE TO EDGE =============================

   The markup half of this is in widget_data with the long note on it: the
   slideshow now steps outside the section's 1280 wrap, so a slide's colour
   paints the band rather than a box sitting inside the section's tone. He
   could see both and could only find a control for one of them.

   The section therefore stops supplying the padding and each slide supplies
   its own, which is the same trade the overlay hero already makes two
   hundred lines up: .cn-sec.cn-hero.cn-v-overlay is padding 0 and .cn-overlay
   pays it back. The three numbers below are .cn-sec's own three, copied
   deliberately so a slideshow sits at exactly the height it did yesterday.

   BEHIND A PHOTOGRAPH IS UNTOUCHED. Its slide padding is set by
   .cn-hadv-behind .cn-hadv-slide, which is one class more specific than
   anything here and wins wherever the two meet - including in the phone
   query, which has its own behind rule as well.                          */
.cnsite .cn-sec.cn-hero.cn-v-advanced { padding: 0; }
.cnsite .cn-hadv-slide { padding: 64px 28px; }
@media (min-width: 1200px) {
  .cnsite .cn-hadv-slide { padding: 72px 32px; }
}
@media (max-width: 780px) {
  .cnsite .cn-hadv-slide { padding: 42px 20px; }
}

/* THE DOTS SIT ON THE BAND NOW, not underneath it. They were the last
   thing inside a box that ended where the words ended; with the band
   reaching the edges they would have dropped onto the section's own tone
   below the colour, which looks like the slideshow finished early. Over
   the band is also where the draft put them. .cn-hadv is already
   position:relative, which is what the arrows have always hung off. */
.cnsite .cn-hadv-dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  padding: 0;
}

/* ================= A BORDER IN PIXELS, AND A CENTRED ARROW =================

   "and i knwo u ahve a uto, thin , medium and thick, and the thick is not
    same thick how the default is ... maty they need numbers to choose form"

   thin/medium/thick are 2px, 4px and 8px and they stay, because they are
   stored on live sites and a word that stopped answering would take the
   border off a page nobody had touched. What the panel OFFERS now is one of
   these: a number, which is the only thing that can say 6.

   Twenty-one rules rather than an inline style, so cnBordCls keeps returning
   a class list and not one call site in the renderer had to change. Written
   out rather than generated because this is a stylesheet, and a stylesheet
   that needs a loop to be read is a stylesheet nobody reads.               */
.cnsite .cn-bw-p0  { --cn-bw: 0px; }
.cnsite .cn-bw-p1  { --cn-bw: 1px; }
.cnsite .cn-bw-p2  { --cn-bw: 2px; }
.cnsite .cn-bw-p3  { --cn-bw: 3px; }
.cnsite .cn-bw-p4  { --cn-bw: 4px; }
.cnsite .cn-bw-p5  { --cn-bw: 5px; }
.cnsite .cn-bw-p6  { --cn-bw: 6px; }
.cnsite .cn-bw-p7  { --cn-bw: 7px; }
.cnsite .cn-bw-p8  { --cn-bw: 8px; }
.cnsite .cn-bw-p9  { --cn-bw: 9px; }
.cnsite .cn-bw-p10 { --cn-bw: 10px; }
.cnsite .cn-bw-p11 { --cn-bw: 11px; }
.cnsite .cn-bw-p12 { --cn-bw: 12px; }
.cnsite .cn-bw-p13 { --cn-bw: 13px; }
.cnsite .cn-bw-p14 { --cn-bw: 14px; }
.cnsite .cn-bw-p15 { --cn-bw: 15px; }
.cnsite .cn-bw-p16 { --cn-bw: 16px; }
.cnsite .cn-bw-p17 { --cn-bw: 17px; }
.cnsite .cn-bw-p18 { --cn-bw: 18px; }
.cnsite .cn-bw-p19 { --cn-bw: 19px; }
.cnsite .cn-bw-p20 { --cn-bw: 20px; }

/* ---------------------------- the arrow ---------------------------------
   The button was 38px with a text glyph in it, relying on the browser to
   centre a character - which centres its ADVANCE WIDTH and not its ink. A
   flex box centres the drawing, the drawing is symmetrical, and 42px is the
   couple of pixels he asked for. The svg is sized here rather than in the
   markup so the two arrows can never disagree.                            */
.cnsite .cn-hadv-arrows button {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
}
.cnsite .cn-hadv-arrows button .cn-chev {
  width: 19px; height: 19px; display: block;
}

/* ---- the member's own families -----------------------------------------
   --cn-fh and --cn-fb are not new. They have been the two families since
   the design panel shipped, they are set per style a few hundred lines
   above, and every heading and every paragraph already reads through them
   as the FALLBACK of its own --cn-h1f. So a member choosing a font - for
   the whole site, or for one heading level - writes custom properties the
   existing rules already resolve, and nothing had to be added for them.

   THIS BLOCK IS FOR THE PARTS THAT HAVE NO LEVEL. Each style pins its body
   family straight onto .cnsite.cn-sty-X, which is (0,2,0), and pins a face
   of its own onto .cn-eyebrow and - on editorial - onto .cn-btn, both
   (0,3,0). A member who has chosen a body font expects the nav, the cards
   and the buttons to follow it, so these rules exist purely to outspecify
   those.

   EACH IS BEHIND ITS OWN CLASS, and the class is emitted only when that
   thing was actually chosen. Without that, an unset --cn-b1ff would fall
   back to `inherit` and quietly un-pin editorial's button face on sites
   whose members never opened this panel. Absent has to keep meaning
   absent.

   COUPLING: widget 66 emits the three classes beside cn-dsn. t66font.php
   asserts each appears only with its own choice, and that these selectors
   still outrank the .cn-sty-* ones above. */
.cnsite.cn-dsn.cn-ffb { font-family: var(--cn-fb); }
.cnsite.cn-dsn.cn-ffb .cn-eyebrow,
.cnsite.cn-dsn.cn-ffb .cn-btn { font-family: var(--cn-fb); }
/* Form controls do not inherit a family from their parent in any browser,
   so a chosen body font would stop at the edge of the contact form. */
.cnsite.cn-dsn.cn-ffb input,
.cnsite.cn-dsn.cn-ffb select,
.cnsite.cn-dsn.cn-ffb textarea,
.cnsite.cn-dsn.cn-ffb button { font-family: var(--cn-fb); }

/* The two buttons, each answering only its own class. b1 is the solid one
   and b2 the outlined one, which is the same pair every other button
   property in this block is split on. */
.cnsite.cn-dsn.cn-ffb1 .cn-btn:not(.cn-ghost):not(.cn-inv),
.cnsite.cn-dsn.cn-ffb1 a.cn-btn:not(.cn-ghost):not(.cn-inv) {
  font-family: var(--cn-b1ff);
}
.cnsite.cn-dsn.cn-ffb2 .cn-btn.cn-ghost,
.cnsite.cn-dsn.cn-ffb2 a.cn-btn.cn-ghost { font-family: var(--cn-b2ff); }
/* AND THE THIRD - 4 September. It has to be spelled out because Button 3
   carries .cn-ghost as well, so the rule above matches it: without this, a
   Button 3 on a site whose Button 2 names a family would quietly wear
   Button 2's. More classes, later in the file, so it wins either way. */
.cnsite.cn-dsn.cn-ffb3 .cn-btn.cn-ghost.cn-b3,
.cnsite.cn-dsn.cn-ffb3 a.cn-btn.cn-ghost.cn-b3 { font-family: var(--cn-b3ff); }


/* ===== the blog =========================================================
   ONE set of card rules with four arrangements over the top. cards and grid
   are the shared .cn-grid with a different column count; list and feature
   turn the same card on its side. That is why a fifth layout later is a
   branch and some CSS rather than a rebuild.

   EVERY VARIABLE CARRIES A LITERAL FALLBACK. A colour that resolves to
   nothing is not a wrong colour, it is invisible text, and this file is
   read on 168 sites whose Style sets a different subset of them. */
.cnsite .cn-bcard { display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--cn-boxline, var(--cn-line, #e5e9f0));
  text-decoration: none; color: inherit;
  box-shadow: var(--cn-shadow, none); }
.cnsite.cn-dsn .cn-bcard { border-radius: var(--cn-ri, var(--cn-cr, 10px)); }
.cnsite a.cn-bcard { transition: box-shadow .18s ease, transform .18s ease; }
.cnsite a.cn-bcard:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
  transform: translateY(-2px); }
.cnsite .cn-bshot { flex: none; }
/* Square inside the card - the card already carries the corners, and two
   radii nested inside each other read as a mistake at every size. */
.cnsite .cn-bshot .cn-img, .cnsite .cn-bshot .cn-ph {
  width: 100%; display: block; border-radius: 0; }
.cnsite .cn-bbody { padding: 15px 17px 17px; display: flex;
  flex-direction: column; flex: 1; }
.cnsite .cn-bmeta { margin: 0 0 8px; font-size: 12px; line-height: 1.4;
  color: var(--cn-dim, #64748b); display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px; }
.cnsite .cn-bcat { color: var(--cn-accent, #85ad0f); font-weight: 600; }
.cnsite .cn-bdot { width: 3px; height: 3px; border-radius: 50%; flex: none;
  display: inline-block; background: var(--cn-accent, #85ad0f); }
.cnsite .cn-bt { margin: 0 0 8px; font-size: 17px; line-height: 1.3;
  font-weight: 700; color: var(--cn-ink, #0f172a); }
.cnsite .cn-bex { margin: 0 0 14px; font-size: 14px; line-height: 1.6;
  color: var(--cn-dim, #64748b); flex: 1; }
.cnsite .cn-bmore { font-size: 13px; font-weight: 600;
  color: var(--cn-brand, #14213d); }
.cnsite a.cn-bcard:hover .cn-bmore { color: var(--cn-accent, #85ad0f); }

/* list - BD's own shape, and the one that survives a single article */
.cnsite .cn-blist { display: grid; gap: 18px; }
.cnsite .cn-brow { flex-direction: row; align-items: stretch; }
.cnsite .cn-brow .cn-bshot { width: 260px; }
.cnsite .cn-brow .cn-bshot .cn-img, .cnsite .cn-brow .cn-bshot .cn-ph {
  height: 100%; object-fit: cover; }
.cnsite .cn-brow .cn-bbody { padding: 18px 22px; }
.cnsite .cn-brow .cn-bt { font-size: 19px; }

/* feature - one big, a column beside it. The renderer draws cards instead
   below three articles, so this shape is never half-built. */
.cnsite .cn-bfeat { display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 20px; align-items: start; }
.cnsite .cn-bside { display: grid; gap: 16px; }
.cnsite .cn-bbig .cn-bt { font-size: 23px; }
.cnsite .cn-bmini .cn-bshot { width: 118px; }
.cnsite .cn-bmini .cn-bbody { padding: 12px 14px; }
.cnsite .cn-bmini .cn-bt { font-size: 14.5px; margin-bottom: 4px; }
.cnsite .cn-bmini .cn-bex, .cnsite .cn-bmini .cn-bmore { display: none; }

/* A DARK OR BRAND SECTION STILL HAS TO READ. The card keeps its own light
   panel rather than inheriting the band's ink, which is the same answer
   .cn-card already gives - one rule, not a second colour system. */
.cnsite .cn-t-dark .cn-bcard, .cnsite .cn-t-brand .cn-bcard,
.cnsite .cn-t-accent .cn-bcard { border-color: rgba(255, 255, 255, .14); }

@media (max-width: 860px) {
  .cnsite .cn-bfeat { grid-template-columns: 1fr; }
  .cnsite .cn-bmini { flex-direction: row; }
}
@media (max-width: 700px) {
  /* A 260px picture beside 90px of words is not a card, it is a mistake.
     Below this the row becomes the same stacked card as everywhere else. */
  .cnsite .cn-brow { flex-direction: column; }
  .cnsite .cn-brow .cn-bshot { width: 100%; }
  .cnsite .cn-brow .cn-bshot .cn-img, .cnsite .cn-brow .cn-bshot .cn-ph {
    height: auto; }
  .cnsite .cn-brow .cn-bbody { padding: 15px 17px 17px; }
  .cnsite .cn-brow .cn-bt { font-size: 17px; }
  .cnsite .cn-bmini .cn-bex { display: none; }
}
/* ============================= THE ARTICLE PAGE ==========================
   One article, on the member's own site.  Everything around it - header,
   footer, colours, fonts - is the page they already had; this block only has
   to make the reading column worth reading.

   EVERY VARIABLE CARRIES A LITERAL FALLBACK, the same rule the blog cards
   above follow: a colour that resolves to nothing is invisible text, not a
   wrong colour, and this file is read on 168 sites whose Style sets a
   different subset of them. */

/* A MEASURE, NOT A PAGE WIDTH.  The rest of this renderer lays cards and
   columns across 1280px.  A paragraph across 1280px is unreadable - the one
   number that matters for running text is how far the eye travels back to
   find the next line. */
.cnsite .cn-artcol { max-width: 825px; }

/* THE GRID.  825 + 56 + 320 = 1201, inside the 1280 wrap, and centred by
   justify-content rather than by stretching - so the measure stays a
   measure at every viewport instead of growing to fill whatever is left.

   minmax(0, ...) on both tracks and not 1fr: a grid item's default
   min-width is auto, so one long unbroken word in a title would push the
   track wider than the track is allowed to be and the sidebar would slide
   off the page.  This is the same class of bug as the srcset guards in
   the worker - it only shows up on the one row that has the bad input. */
/* THE GRID FILLS THE WRAP, and that is his correction, 9 August, drawn as
   two red lines down the header's own edges: "make sure the width of the
   page match is with everhting else on the page like even with header,
   because it looks little smaller".

   He was right and the measurement says so. The .cn-artgrid ELEMENT was
   already the full 1280 wrap - 35 to 1315, the same 35 the header's own
   content starts at - but justify-content:center held its two tracks in
   the middle at 1201 and inset both edges by 40px. The element lined up;
   what you could see did not.

   1fr on the first track, and .cn-artcol keeps the 825 measure INSIDE it.
   So the text starts on the header's left edge, the sidebar ends on its
   right edge, and the slack falls into the gutter between them where it
   reads as air rather than as a narrow page. Matching the edges and
   keeping the measure are not in conflict - centring was the only reason
   they looked as though they were. */
.cnsite .cn-artgrid { display: grid; align-items: start;
/* THE SLACK GOES TO THE SIDEBAR, NOT TO THE GUTTER.  His second look,
   9 August, circling the empty channel between the two: the edges lined
   up but the gap had swallowed 135px.

   1fr on the FIRST track made the article column 904 wide with an 825
   measure inside it, so 79px of dead space sat against the gutter's 56
   and read as one enormous gutter.  Putting 1fr on the SECOND track
   instead gives the article its 825 exactly, the sidebar 399, and a gap
   that is the 56 it says it is.

   This is the version that satisfies both of his notes at once: the
   outer edges still match the header, and the measure is still 825.
   The slack had to land somewhere - a wider sidebar is somewhere it
   does work, an empty channel is not. */
/* 300px IS A FLOOR, NOT A PREFERENCE, and its absence was a real bug he
   found by dragging the window: at tablet width the article column held
   its 825 and the sidebar got whatever was left - about 130px - so
   'DreamStyler, LLC' broke mid-word and the buttons stacked one
   character to a line.

   minmax(0, 825px) reads as 'up to 825' but a track only gives ground
   when something else asks for it, and minmax(0, 1fr) asks for nothing.
   With a 300px minimum the ARTICLE yields first, which is the right way
   round: a narrower measure is still a measure, a 130px sidebar is
   wreckage.

   THE FOLD AT 980 WAS NEVER THE PROBLEM. The damage happened between
   980 and about 1200, which is exactly the range no phone and no
   desktop is in - and precisely why he found it by dragging rather than
   by looking at either end. Check the MIDDLE of a responsive range. */
/* BOTH TRACKS SHRINK TOGETHER, which is what BD's own article page does
   and what he pointed at: "in bd i see they shrik both before going up
   and down on phone". Theirs is a plain Bootstrap 8/4, so the two
   columns hold their proportion at every width and neither one is ever
   the one that gives.

   2fr and 1fr do the same thing here and make the 300px floor of an
   hour ago unnecessary - a third of the wrap is never 130px, so the
   crush he found cannot recur by arithmetic rather than by a guard.
   At the 1280 wrap that is 816 and 408, within a dozen pixels of the
   825/399 he approved, so the desktop view he signed off does not move.

   .cn-artcol keeps its 825 ceiling for the solo case and for any wrap
   wider than this one. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px; }
.cnsite .cn-artgrid.cn-artsolo { grid-template-columns: minmax(0, 1fr); }

/* Sticky, because the whole point is that the right-hand third is not
   empty - and it goes empty again the moment the reader scrolls past it.
   top clears nothing in particular: this renderer draws no fixed header. */
.cnsite .cn-artside { position: sticky; top: 24px; }
/* TINTED, NOT WHITE, AND THAT IS A CONTRAST FIX RATHER THAN A TASTE ONE.
   DreamStyler's own button style is white-on-dark - it reads perfectly in
   his navy header and vanishes completely on a white card, which is what
   the first push produced: two buttons that looked like centred text.
   Seen in the live render, not predicted.

   The article section is hardcoded cn-t-white, so a tint here can never
   land on an equally tinted page - which is the failure mode that would
   make this fix worse than the bug for somebody else's Style. */
.cnsite .cn-asb { background: var(--cn-tint, #f8fafc);
  border: 1px solid var(--cn-line, #e2e8f0);
  border-radius: var(--cn-ri, var(--cn-cr, 10px)); padding: 20px; margin: 0 0 20px; }
.cnsite .cn-asb:last-child { margin-bottom: 0; }
.cnsite .cn-asbname { margin: 0 0 2px; font-weight: 700; font-size: 17px;
  color: var(--cn-brand, #14213d); }
.cnsite .cn-asbmeta { margin: 0 0 10px; font-size: 13px;
  color: var(--cn-dim, #64748b); }
.cnsite .cn-asbtext { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.cnsite .cn-asbbtn { display: block; width: 100%; text-align: center;
  margin: 0 0 8px; }
.cnsite .cn-asbbtn:last-child { margin-bottom: 0; }
.cnsite .cn-asbh { margin: 0 0 14px; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cn-dim, #64748b); }
.cnsite .cn-asblist { list-style: none; margin: 0; padding: 0; }
.cnsite .cn-asblist li { display: flex; gap: 12px; margin: 0 0 14px; }
.cnsite .cn-asblist li:last-child { margin-bottom: 0; }
.cnsite .cn-asbthumb { flex: 0 0 64px; }
.cnsite .cn-asbthumb img { width: 64px; height: 48px; object-fit: cover;
  display: block; border-radius: var(--cn-ri, var(--cn-cr, 10px)); }
.cnsite .cn-asbtx { min-width: 0; }
.cnsite .cn-asbtx a { font-size: 14px; font-weight: 600; line-height: 1.35;
  display: block; color: var(--cn-brand, #14213d); text-decoration: none; }
.cnsite .cn-asbtx a:hover { color: var(--cn-accent, #85ad0f); }
.cnsite .cn-asbtx span { display: block; margin-top: 3px; font-size: 12px;
  color: var(--cn-dim, #64748b); }
.cnsite .cn-asbfoot { margin: 16px 0 0; font-size: 13px; font-weight: 600; }
.cnsite .cn-asbfoot a { color: var(--cn-accent, #85ad0f);
  text-decoration: none; }

/* ONE BREAKPOINT, and it is the grid's own, not the page's 700.  The
   sidebar has to fold as soon as 825 + 320 stops fitting, which happens
   long before a phone. */
@media (max-width: 980px) {
  .cnsite .cn-artgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cnsite .cn-artside { position: static; }
}

/* .cn-artback went with the link it styled, 9 August.  The rule is deleted
   rather than left orphaned - dead CSS in a 190KB stylesheet is how the next
   reader concludes a feature exists. */
.cnsite .cn-artpage .cn-h { margin: 0 0 10px; font-size: 34px; line-height: 1.2; }
/* The meta line now sits BELOW the title, so its top margin is the one that
   closes to the headline and its bottom margin is the one that opens to the
   picture.  It used to be the other way round. */
.cnsite .cn-artpage .cn-bmeta { margin: 0 0 24px; }

.cnsite .cn-artshot { margin: 0 0 26px; }
.cnsite .cn-artshot .cn-img { width: 100%; display: block; height: auto;
  border-radius: 0; }
.cnsite.cn-dsn .cn-artshot .cn-img {
  border-radius: var(--cn-ri, var(--cn-cr, 10px)); }

/* THE BODY.  cnSanRich hands this block p, br, strong, em, b, i, u, ul, ol,
   li and a - and NOTHING ELSE.  A heading in the stored article arrives here
   as a paragraph, which is why there are no h2/h3 rules below: they would be
   dead code.  If that ruling changes, the rules come with it.

   .cn-rich already sets the size, the leading and the paragraph rhythm; only
   what an ARTICLE has and the About box never did is added here. */
.cnsite .cn-artbody { font-size: 17px; }
.cnsite .cn-artbody ul, .cnsite .cn-artbody ol {
  margin: 0 0 16px; padding-left: 22px; }
.cnsite .cn-artbody li { margin: 0 0 8px; }
.cnsite .cn-artbody li:last-child { margin-bottom: 0; }
/* A LEAD-IN IS THE ONLY STRUCTURE THAT SURVIVES the sanitiser, so it has to
   carry the weight a heading used to.  A paragraph that is entirely bold is
   how every one of these articles marks a step. */
.cnsite .cn-artbody p > strong:only-child {
  display: block; color: var(--cn-brand, #14213d); }

@media (max-width: 700px) {
  .cnsite .cn-artpage .cn-h { font-size: 26px; }
  .cnsite .cn-artbody { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   CLICK TO LOAD MORE RESULTS

   BD's OWN LISTING SHAPE, matched on purpose: a full-width bar, not a pill.
   A member who has seen this control on their own Community Blog Articles tab
   should meet the same one on their website rather than a second dialect of
   the same idea.

   .cn-btn is inherited for the type and cursor only - every colour below is
   overridden, because .cn-btn paints itself in the brand and a bar that size
   in full brand reads as the loudest thing on the page.

   TONE-SAFE ON PURPOSE. A blog section can sit on white, tint, dark, brand or
   accent, so the fill is a neutral grey at low alpha rather than a hex: it
   darkens a light tone and lightens a dark one, and `color: inherit` keeps the
   label on whatever ink cnInk() already picked for that tone.

   THE [hidden] RULE IS LOAD-BEARING. The button is rendered hidden and the
   script removes the attribute as its proof of life - but `display: block`
   below beats the browser's own `[hidden] { display: none }`, so without this
   line the button would be visible to exactly the visitors whose JavaScript
   never arrived, doing nothing when clicked.
   ------------------------------------------------------------------------- */
.cnsite .cn-bmorewrap { margin: 24px 0 0; }
.cnsite .cn-btn.cn-bmorebtn {
  display: block; width: 100%; padding: 16px 18px; border: 0; border-radius: 8px;
  background: rgba(128, 128, 128, .14); color: inherit;
  font-weight: 600; letter-spacing: 0; cursor: pointer; }
.cnsite .cn-btn.cn-bmorebtn:hover { background: rgba(128, 128, 128, .22); filter: none; }
.cnsite .cn-btn.cn-bmorebtn[hidden] { display: none; }

/* Collapsed by the SCRIPT, never by this stylesheet. If the rule below were
   applied at render time instead, a member whose JavaScript failed to load
   would lose every post past the tenth - see the note in widget_data. */
.cnsite .cn-bhid { display: none !important; }

/* ===================== THE CONTACT FORM ==================================
   FORMS_PLAN section 2. The `form` variant of the contact section.

   THE CARD CARRIES ITS OWN COLOURS AND THAT IS DELIBERATE. A section can be
   set to any of five tones, and dark, brand and accent all set a light INK on
   a dark background. Inputs inheriting that are white text in a white box -
   invisible, and invisible to every offline harness, which is the exact bug
   the article sidebar shipped with on 9 August (55 assertions and 20
   mutations passed against buttons nobody could see). So the card fixes its
   own background and ink rather than inheriting them, the same way .cn-asb
   does, and for the same reason.

   The SEND button is the one thing that does NOT need this: .cn-btn already
   carries color: var(--cn-aink), which is computed from the accent's own
   brightness, so it cannot come out unreadable whatever the member picked. */

.cnsite .cn-cfgrid { align-items: start; }
.cnsite .cn-cfmain { flex: 1 1 58%; min-width: 0; }
.cnsite .cn-cfside { flex: 0 1 34%; min-width: 0; }

/* CN-W66CFCOL-BEGIN
   THE TWO COLOURS HE ASKED FOR, and every rule below is the same shape:
   the member's choice first, today's value as the fallback. A form nobody has
   touched emits no style attribute at all, so every one of these resolves to
   exactly the literal it replaced and 154 sites are byte-identical.

   --cn-cfbg  --cn-cfink  --cn-cfline  --cn-cfred     the card
   --cn-cffbg --cn-cffink --cn-cffline               the fields

   ONLY THE FIRST OF EACH IS CHOSEN. The ink, the hairline and the red are
   COMPUTED from the fill in widget 66 by cnInk and cnShift - the rule the
   buttons have followed since the design panel shipped. There is no text
   colour control and there must not be one: it is what makes "pick any two
   colours" safe to offer.

   THE LABELS AND THE CHOICES INHERIT rather than naming a colour of their
   own, which is why they had to be found and changed here. Each was
   #0f172a - correct for a card that is always white, and invisible on navy.
   Same lesson the side panel taught two pushes ago, arriving from the other
   direction: there the fix was to name NO colour, here it is to name a
   variable, and both are "do not hardcode the ink of a surface somebody can
   repaint". */
.cnsite .cn-cfcard {
  background: var(--cn-cfbg, #fff);
  color: var(--cn-cfink, #0f172a);
  /* THE SECTION'S SHADOW CONTROL SETS --cn-boxline, AND THIS CARD DID NOT
     READ IT - so "i can't seem to remove the outline and shadow" was exactly
     right and had nothing to do with him. Same fallback ladder .cn-img and
     .cn-bcard have always used: the control when there is one, today's look
     when there is not. */
  border: 1px solid var(--cn-boxline, var(--cn-cfline, rgba(15, 23, 42, .12)));
  /* CN-W66CFRAD-BEGIN
     THE MEMBER'S SLIDER FIRST, THE LOOK'S DEFAULT ONLY AS A FALLBACK.

     He pointed three arrows at one bug: his corners were set to 5, his Send
     button obeyed, and the card, the fields and the map all sat at 10.

     --cn-ri IS THE SLIDER. --cn-cr AND --cn-ir ARE THE LOOK. cnDsnVars emits
     --cn-rb and --cn-ri and nothing else; --cn-br, --cn-cr and --cn-ir are
     set by the style packs (signal, civic, verdant, editorial, meridian) as
     what that look does when the member has not said. Every other rule in
     this stylesheet reads them as a PAIR and has since the design panel
     shipped:

       .cnsite.cn-dsn .cn-card { border-radius: var(--cn-ri, var(--cn-cr)); }

     These four skipped the first half and read the look directly, so the
     control was live, correct, and unable to reach the one section it was
     most obviously about. Nothing offline could see it: both names resolve,
     both produce a number, and the number is a perfectly reasonable 10px.
     It took looking at the render, which is the third thing this session that
     only his browser could answer.

     ONE SLIDER FOR ALL FOUR, and that is the existing rule rather than a new
     one: --cn-ri already governs images AND cards AND boxed panels. The form
     card is a card and its fields are the same family. That the slider is
     LABELLED "Images" is the separate open item - the control is right, the
     word is wrong. */
  border-radius: var(--cn-ri, var(--cn-cr, 10px));
  padding: 28px;
  margin-top: 22px;
}
/* On a white or light section the card would otherwise be a white rectangle
   on a white page with only a hairline to find it by. A shadow rather than a
   heavier border, so it reads as raised instead of ruled. */
.cnsite .cn-t-white .cn-cfcard,
.cnsite .cn-t-light .cn-cfcard {
  box-shadow: var(--cn-shadow, 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06));
}

.cnsite .cn-cfrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cnsite .cn-cfrow.cn-cf1 { grid-template-columns: 1fr; }
.cnsite .cn-cff { margin: 0 0 17px; min-width: 0; }
.cnsite .cn-cff.cn-cfw2 { grid-column: 1 / -1; }

/* A DIRECT CHILD, and the > is load-bearing.
   Without it this rule also matched the option labels nested inside
   .cn-cfopts - and at one class more specific than the .cn-cfopt rule below,
   so it won, forced display:block on them, and silently killed the flex gap
   between every checkbox and its words. Found by LOOKING at the render on
   givenearn.com; no offline check can see a specificity fight, which is the
   same lesson the article sidebar's invisible buttons taught in layout
   clothes rather than colour. */
.cnsite .cn-cff > label {
  display: block; font-family: var(--cn-fb);
  font-size: 13px; font-weight: 650; letter-spacing: .005em;
  margin: 0 0 6px; color: var(--cn-cfink, #0f172a);
}
.cnsite .cn-cfreq { color: var(--cn-cfred, #dc2626); }

.cnsite .cn-cff input[type=text],
.cnsite .cn-cff input[type=email],
.cnsite .cn-cff input[type=tel],
.cnsite .cn-cff select,
.cnsite .cn-cff textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--cn-cffline, #cbd5e1);
  border-radius: var(--cn-fldr, var(--cn-cfr, var(--cn-ri, var(--cn-ir, 10px))));
  font-family: var(--cn-fb); font-size: 15px; line-height: 1.5;
  color: var(--cn-cffink, #0f172a); background: var(--cn-cffbg, #fff);
  -webkit-appearance: none; appearance: none;
}
.cnsite .cn-cff select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.6'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  background-size: 12px; padding-right: 36px;
}
.cnsite .cn-cff textarea { min-height: 132px; resize: vertical; }
.cnsite .cn-cff input:focus,
.cnsite .cn-cff select:focus,
.cnsite .cn-cff textarea:focus {
  outline: none; border-color: var(--cn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cn-accent) 28%, transparent);
}

/* The options group.
   CN-W66OPT-BEGIN

   NO BOX ROUND EACH CHOICE. They were drawn as bordered cards, and he said
   so with two screenshots: "not sure why these options are inside a field,
   looks weird" - the second picture being one of the four forms this whole
   feature was measured against, where a choice is a tickbox and its words
   and nothing else.

   He is right, and the reason it looked wrong is worth keeping: a box round
   a choice makes it read as a FIELD, the same shape as the name and email
   boxes above it. Eleven of them stacked up look like eleven things to fill
   in rather than one question with eleven answers.

   THE HIT AREA IS NOT GIVEN UP, and that is the only thing the border was
   ever really for. The vertical padding stays, so the target is still the
   full row and a finger still finds it - what goes is the horizontal padding
   and the outline that made it a card. The hover moves onto the accent
   colour for the same reason: it still says "this is pressable" without
   drawing a second box.

   Two columns is untouched. He did not ask about it, and eleven choices in
   one column is the long list his own reference form has to live with. */
.cnsite .cn-cfopts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.cnsite .cn-cfrow.cn-cf1 .cn-cfopts { grid-template-columns: 1fr; }
.cnsite .cn-cfopt {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 7px 0; cursor: pointer;
  font-weight: 400; font-size: 14.5px; color: var(--cn-cfink, #0f172a);
  border: 0; border-radius: 0;
}
.cnsite .cn-cfopt:hover { color: var(--cn-accent); }
/* CN-W66OPT-END */
.cnsite .cn-cfopt input {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; margin: 0; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--cn-cffline, #cbd5e1);
  border-radius: var(--cn-cfkr, 4px);
  background-color: var(--cn-cffbg, #fff);
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}
.cnsite .cn-cfopt input[type=radio] { border-radius: 50%; }
/* .cn-cfopts IS IN THIS SELECTOR TO WIN, not to be precise. A look sets the
   tickbox's own background, and at equal specificity the look is written
   later in the file - so a ticked box in Soft came out wearing Soft's faint
   fill instead of the accent, tick and all. The wrapper is always there, so
   naming it puts the checked state one class above every look for good.
   THE HARNESS CAUGHT THIS, not the page - which is the only reason it is
   not a third specificity bug shipped in one day. */
.cnsite .cn-cfopts .cn-cfopt input:checked {
  background-color: var(--cn-accent); border-color: var(--cn-accent);
  background-image: var(--cn-cftick, var(--cn-tkd));
}
/* A RADIO IS A DOT, NOT A TICK - the same ring every radio has ever been,
   drawn with an inset shadow so it needs no second image. */
.cnsite .cn-cfopts .cn-cfopt input[type=radio]:checked {
  background-image: none; box-shadow: inset 0 0 0 3px var(--cn-cffbg, #fff);
}
.cnsite .cn-cfopt input:focus-visible {
  outline: 2px solid var(--cn-accent); outline-offset: 2px;
}
.cnsite .cn-cfopt span { min-width: 0; }

/* The challenge. Set apart so it reads as a check rather than as one more
   thing the member is asking for. */
.cnsite .cn-cfcap {
  padding: 14px 16px; margin-bottom: 20px;
  /* currentColor RATHER THAN A SECOND VARIABLE. The wash and the dashed edge
     only ever wanted "a little of whatever the ink is", and saying that
     directly means this rule needs no help from the renderer and cannot fall
     out of step with the card it sits on. */
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--cn-ri, var(--cn-ir, 10px));
}
.cnsite .cn-cfcap input { max-width: 130px; }

/* ---- HOW A FORM FIELD IS DRAWN - 31 August -------------------------------
   Four looks from his four references, and BOX IS THE ABSENCE OF THE CLASS -
   every form already published draws exactly what it drew yesterday.

   NOTHING HERE IS A COLOUR. Each look is built out of currentColor, so it
   works on a white card and on a navy one without being told which, and a
   member who changes their form colours does not have to come back and fix
   the look. The two tick spellings are the only fixed values, and PHP names
   one of them from the accent's own ink.

   THE FIELDS, THE TICKBOXES AND THE SPAM QUESTION ALL FOLLOW ONE WORD. A
   form whose boxes and tickboxes disagree reads as two forms stacked up,
   which is what he was pointing at. */
.cnsite { --cn-tkd: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314181f' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); --cn-tkw: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.cnsite .cn-sec.cn-fld-soft { --cn-cfr: 3px; --cn-cfkr: 3px; }
.cnsite .cn-sec.cn-fld-line { --cn-cfr: 0px; --cn-cfkr: 0px; }
.cnsite .cn-sec.cn-fld-edge { --cn-cfr: 0px; --cn-cfkr: 0px; }

/* SOFT - a hairline and a faint fill. The field sits back and the words in
   front of it lead. */
.cnsite .cn-sec.cn-fld-soft .cn-cff input[type=text],
.cnsite .cn-sec.cn-fld-soft .cn-cff input[type=email],
.cnsite .cn-sec.cn-fld-soft .cn-cff input[type=tel],
.cnsite .cn-sec.cn-fld-soft .cn-cff select,
.cnsite .cn-sec.cn-fld-soft .cn-cff textarea,
.cnsite .cn-sec.cn-fld-soft .cn-cfopt input:not(:checked) {
  border-color: color-mix(in srgb, currentColor 15%, transparent);
  background-color: color-mix(in srgb, currentColor 5%, transparent);
}

/* LINE - a rule underneath and no box at all. THE LABEL GOES QUIET AND THAT
   IS NOT DECORATION: with no outline round it, the label is the only thing
   telling a visitor a field is there, so it stops competing with the words
   they type into it. */
.cnsite .cn-sec.cn-fld-line .cn-cff > label { font-weight: 500; opacity: .74; }
.cnsite .cn-sec.cn-fld-line .cn-cff input[type=text],
.cnsite .cn-sec.cn-fld-line .cn-cff input[type=email],
.cnsite .cn-sec.cn-fld-line .cn-cff input[type=tel],
.cnsite .cn-sec.cn-fld-line .cn-cff select,
.cnsite .cn-sec.cn-fld-line .cn-cff textarea {
  border-width: 0 0 1.5px; background: transparent;
  padding-left: 0; padding-right: 0;
}
.cnsite .cn-sec.cn-fld-line .cn-cff select { padding-right: 24px; background-position: right 2px center; }
.cnsite .cn-sec.cn-fld-line .cn-cff input:focus,
.cnsite .cn-sec.cn-fld-line .cn-cff select:focus,
.cnsite .cn-sec.cn-fld-line .cn-cff textarea:focus { border-bottom-width: 2px; box-shadow: none; }
.cnsite .cn-sec.cn-fld-line .cn-cfopt input { border-width: 1.5px; }
.cnsite .cn-sec.cn-fld-line .cn-cfopt input:not(:checked) { background-color: transparent; }

/* EDGE - a bar down the left of every field, and THE TICKBOX CARRIES ITS OWN.
   It was a bar on the row to begin with, which parked it at the far left of
   the column with the box ten pixels away: "it should be part of the check
   box like the other fields." */
.cnsite .cn-sec.cn-fld-edge .cn-cff input[type=text],
.cnsite .cn-sec.cn-fld-edge .cn-cff input[type=email],
.cnsite .cn-sec.cn-fld-edge .cn-cff input[type=tel],
.cnsite .cn-sec.cn-fld-edge .cn-cff select,
.cnsite .cn-sec.cn-fld-edge .cn-cff textarea,
.cnsite .cn-sec.cn-fld-edge .cn-cfopt input {
  border-color: color-mix(in srgb, currentColor 15%, transparent);
  border-left: var(--cn-fldbw, 3px) solid
               var(--cn-cfbar, color-mix(in srgb, currentColor 62%, transparent));
}
/* WIDE ENOUGH TO HOLD THE BAR. A 17px box with a 6px bar down one side has
   five pixels of inside left, so the box grows with the bar rather than
   being eaten by it. */
.cnsite .cn-sec.cn-fld-edge .cn-cfopt input {
  width: calc(15px + var(--cn-fldbw, 3px));
}
.cnsite .cn-sec.cn-fld-edge .cn-cff input:focus,
.cnsite .cn-sec.cn-fld-edge .cn-cff select:focus,
.cnsite .cn-sec.cn-fld-edge .cn-cff textarea:focus {
  border-color: color-mix(in srgb, currentColor 15%, transparent);
  border-left-color: var(--cn-accent); box-shadow: none;
}
.cnsite .cn-sec.cn-fld-edge .cn-cfopt input:checked {
  border-left-color: var(--cn-cfbar, color-mix(in srgb, currentColor 62%, transparent));
}

/* THE BAR'S COLOUR, FROM THE MEMBER'S OWN PALETTE - the same nine tokens
   and the same shape as the block border's colour, so a member who renames
   or replaces a colour takes the bar with them. No rule means no variable
   and the bar falls back to the ink of the box it is on, which is visible
   on any background without this file knowing what that background is. */
.cnsite .cn-fldbc-c1 { --cn-cfbar: var(--cn-c1); }
.cnsite .cn-fldbc-c2 { --cn-cfbar: var(--cn-c2); }
.cnsite .cn-fldbc-c3 { --cn-cfbar: var(--cn-c3); }
.cnsite .cn-fldbc-c4 { --cn-cfbar: var(--cn-c4); }
.cnsite .cn-fldbc-c5 { --cn-cfbar: var(--cn-c5); }
.cnsite .cn-fldbc-c6 { --cn-cfbar: var(--cn-c6); }
.cnsite .cn-fldbc-cw { --cn-cfbar: #ffffff; }
.cnsite .cn-fldbc-cg { --cn-cfbar: #f1f3f6; }
.cnsite .cn-fldbc-ck { --cn-cfbar: #14181f; }

/* THE NAME GOES INSIDE THE BOX - and it is HIDDEN, never deleted. A
   placeholder is not a label: it is not announced as one, it does not
   associate with the field, and it vanishes the moment anybody types. The
   real label stays here for a screen reader and for the browser's own
   autofill, which is what knows this box wants a phone number. */
.cnsite .cn-cff > label.cn-cflabin {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}

/* THE SPAM QUESTION'S BOX, AND WHY ONLY BOX KEEPS IT. The wrapper is there to
   set the check apart, and it only manages that when it draws a DIFFERENT
   kind of line from the field inside it - true of the dashed edge and of
   nothing else here. Everywhere else it was a box inside a box, and each of
   them drew an edge: "u have 2 line, shold be one." */
.cnsite .cn-sec.cn-fld-soft .cn-cfcap,
.cnsite .cn-sec.cn-fld-line .cn-cfcap,
.cnsite .cn-sec.cn-fld-edge .cn-cfcap { background: none; border: 0; padding: 0; }

/* THE HONEYPOT IS MOVED OFF-SCREEN, NEVER display:none. A bot that reads the
   stylesheet skips hidden fields; one that does not, fills this in. Taking it
   out of the layout with position keeps it fillable and keeps it invisible. */
.cnsite .cn-cfpot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cnsite .cn-cfsend { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.cnsite .cn-cfsend[disabled] { opacity: .62; cursor: default; }
.cnsite .cn-cfspin {
  display: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: currentColor;
  animation: cn-cfspin .7s linear infinite;
}
.cnsite .cn-cfsending .cn-cfspin { display: block; }
@keyframes cn-cfspin { to { transform: rotate(360deg); } }

.cnsite .cn-cfnote { margin: 14px 0 0; font-size: 13.5px;
                     color: var(--cn-cfred, #dc2626); min-height: 1px; }
.cnsite .cn-cferr { display: none; margin-top: 5px; font-size: 12.5px;
                    color: var(--cn-cfred, #dc2626); }
.cnsite .cn-cff.cn-cfbad .cn-cferr { display: block; }
.cnsite .cn-cff.cn-cfbad input,
.cnsite .cn-cff.cn-cfbad select,
.cnsite .cn-cff.cn-cfbad textarea { border-color: #dc2626; background: #fef2f2; }

.cnsite .cn-cfthx { text-align: center; padding: 40px 18px; }
.cnsite .cn-cftick {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; color: var(--cn-accent);
  background: color-mix(in srgb, var(--cn-accent) 20%, transparent);
}
.cnsite .cn-cftick svg { width: 25px; height: 25px; }
.cnsite .cn-cfthx h3 { margin: 0; color: var(--cn-cfink, #0f172a); }
/* CN-W66CFCOL-END */

/* THE FOLD IS THE ONE THE REST OF THE SECTION ALREADY USES, so the form does
   not fold at a width nothing else on the page folds at. The options drop to
   one column earlier than the fields do: two checkbox labels side by side in
   half a column is where a service name breaks mid-word, which is the tablet
   crush he caught in the article sidebar wearing different clothes. */
/* CN-W66CFINFO-BEGIN
   THE CONTACT INFO PANEL: ICON AND TITLE ON ONE LINE, VALUE UNDER IT.

   His words and two reference pictures: "how the title is up and then text
   under with nice icon also, that will also laign better for the hours."

   NOT ONE COLOUR IS NAMED IN HERE, AND THAT IS THE RULE .cn-dl ALREADY KEPT.
   This panel sits on the SECTION background, not inside the white card - so a
   member who sets the section to a dark tone gets light text through
   inheritance, and a title told to be #0f172a would simply vanish. The title
   is weight, the value is opacity, and both take the colour of whatever is
   above them. The card next to it hardcodes #0f172a because a card is always
   white; this is not a card.

   THE ICON IS THE ONE EXCEPTION and it is var(--cn-accent), which is the same
   thing .cn-cftick does eight rules down. It is the member's own colour, so a
   panel picks up their palette without this stylesheet knowing it.

   32px IS 22 + 10 AND IS NOT A GUESS: the icon box plus the gap, so the value
   underneath starts at the same x as the first letter of the title. Change one
   of the three and change all three, or the column loses its edge.

   text-align: left EXPLICITLY. A contact section set to Centre centres
   .cn-dl by name, and while that selector cannot reach these rows, the
   section's own alignment can - and a 32px left indent under centred words
   reads as a mistake. The form's fields do not centre either. */
.cnsite .cn-cfinfo { display: grid; gap: 20px; margin-top: 16px; text-align: left; }
.cnsite .cn-cfinf { min-width: 0; }
.cnsite .cn-cfih { display: flex; align-items: center; gap: 10px; margin: 0 0 3px; }
.cnsite .cn-cfih b { font-family: var(--cn-fb); font-size: 15.5px; font-weight: 700;
                     letter-spacing: .005em; }
.cnsite .cn-cfico { display: grid; place-items: center; width: 22px; height: 22px;
                    flex: 0 0 auto; color: var(--cn-accent); }
.cnsite .cn-cfico svg { display: block; width: 20px; height: 20px; }
.cnsite .cn-cfiv { padding-left: 32px; font-size: 14.5px; line-height: 1.65; opacity: .78; }
.cnsite .cn-cfiv a { color: inherit; text-decoration: none; }
.cnsite .cn-cfiv a:hover { text-decoration: underline; }
.cnsite .cn-cfmapw { margin-top: 4px; border-radius: var(--cn-ri, var(--cn-cr, 10px));
                     overflow: hidden; border: 1px solid rgba(15, 23, 42, .12); }
/* CN-W66CFRAD-END */
.cnsite .cn-cfmap { display: block; width: 100%; height: 230px; border: 0; }

/* EVERY ROW SWITCHED OFF: the renderer omits the column entirely and says so
   with this class, so the form takes the width back rather than sitting at
   58% beside nothing. Same outcome the tablet rule below produces, reached
   from the panel rather than from the viewport. */
.cnsite .cn-cfgrid.cn-cfnoside > .cn-cfmain { flex: 1 1 100%; }
/* CN-W66CFINFO-END */

/* CN-W66CFWIDE-BEGIN
   THE FORM GOES FULL WIDTH THE MOMENT THE PANEL DROPS BELOW IT.

   He sent a tablet screenshot: the Contact Info had stacked underneath, which
   is right, and the form was still sitting in half the width with nothing
   beside it. "the form should go 100%".

   THE CAUSE IS ONE INHERITED LINE AND IT IS NOT flex-basis. `.cn-cfgrid` is a
   `.cn-row.cn-top`, and `cn-top` sets `align-items: flex-start`. In a ROW that
   is what stops a short panel stretching to the height of a tall form, which
   is exactly what it is for. At 780px `.cn-row` becomes `flex-direction:
   column` - and align-items now governs the HORIZONTAL axis, so flex-start
   means "no wider than your contents". The rule did not change; the axis it
   points at did.

   So the cross-axis alignment is put back to stretch once it is stacked, and
   the widths are made explicit rather than left to a 58% basis that measures
   height in a column.

   SCOPED TO THE FORM ON PURPOSE. Every `.cn-row.cn-top` on the page has the
   same shape - details, map, and the fallback - and he asked about this one.
   Widening the rest is a visual change to every member's site that nobody has
   looked at yet; it is written down in the addendum instead. */
@media (max-width: 780px) {
  .cnsite .cn-cfgrid { align-items: stretch; }
  .cnsite .cn-cfgrid > .cn-cfmain,
  .cnsite .cn-cfgrid > .cn-cfside { flex: 1 1 auto; width: 100%; }
}
/* CN-W66CFWIDE-END */
@media (max-width: 860px) {
  .cnsite .cn-cfopts { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cnsite .cn-cfrow { grid-template-columns: 1fr; }
  .cnsite .cn-cfcard { padding: 22px 18px; }
}


/* ==================================================== THE FLOATING HEADER
   Preset h60. Worn only when the preset asks AND the page has a hero with
   a photograph behind it - see CN_FLOATOK in widget_data. Two states:

     at rest    out of the flow, no background, white ink, soft scrim
     scrolled   .cn-solid, fixed to the top, the dark bar comes back

   THE SCRIM IS THE LOAD-BEARING PART, not the scroll. White words over a
   photograph the member chose and we have never seen are readable only
   because of that gradient; over a bright sky, without it, the menu is
   gone. It is a gradient rather than a bar so it has no edge to notice.
   ---------------------------------------------------------------------- */
.cnsite:has(> .cn-head.cn-float) { position: relative; }

/* FIXED FROM THE FIRST PIXEL. Not absolute-then-fixed: that left the bar
   scrolling away for its own height before the class arrived to bring it
   back, which reads as a header that falls off and climbs back on. The
   only thing the scroll changes is the paint. */
.cnsite .cn-head.cn-float {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent; border-bottom: 0;
}
/* The BAR loses its paint; its ink, its dropdowns, its hairlines and its
   button faces are the dark-bar ones and stay exactly as they were. */
.cnsite .cn-head.cn-float .cn-pbar { position: relative; z-index: 1; background: transparent; }
.cnsite .cn-head.cn-float::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  transition: opacity .28s ease;
}

.cnsite .cn-head.cn-float.cn-solid {
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

/* ---- WHITE ONCE SCROLLED, when the member asked for it -----------------
   Only the SCROLLED state changes; at the top it is still transparent over
   the photograph, because that half never had a colour to argue about.

   THE BUTTON IS NOT OVERRIDDEN HERE. On a dark bar this renderer repaints a
   solid button white-on-dark, and that override currently loses to the
   link-colour reclaim block - which is the white-on-white button bug. A
   white bar does not need the override at all: the ordinary accent button
   is their colour with the ink already computed for it, readable by
   construction and not waiting on that fix. */
.cnsite .cn-head.cn-float.cn-slw.cn-solid .cn-pbar {
  background: #fff; color: var(--cn-pink);
}
/* THE BUTTON IS THE SAME BUTTON AS THE REST OF THE PAGE.

   Every other bar repaints a solid button white-on-dark. The floating
   header opts out: their accent, the ink computed for their accent, in
   BOTH states. It is what he asked for - "header button need to match
   with other button" - and it is also why this one cannot go white on
   white the way the shared override currently does.

   The corner comes from their design, because the preset no longer asks
   for a shape. See the note in cnHeaderPresets. */
.cnsite .cn-head.cn-float .cn-b-solid {
  background: var(--cn-accent); border-color: var(--cn-accent); color: var(--cn-aink);
  /* NO BORDER, because the page button has none. The header gives every
     button 1.6px of transparent border so an outline fill has something to
     colour in; on a solid one it is invisible and it made this button 52px
     against the page's 50 - measured, not guessed. h60 draws a solid
     button only, so there is nothing here that needs the ring. */
  border-width: 0;
}
/* AND THE CORNER, WHICH TAKES A RULE AS WELL AS A DROPPED SHAPE.

   Dropping 'pill' from the preset was necessary but not sufficient: the
   header pins EVERY button in it to border-radius 0, so square was simply
   the other hard-coded answer. This reads the same two custom properties
   .cnsite.cn-dsn .cn-btn reads - the member's chosen button radius, then
   their style's default - so the header button rounds exactly like the
   Get a free quote button in their hero. Measured: header r0 next to page
   r7 before this line, both the same after it. */
.cnsite .cn-head.cn-float .cn-btn {
  border-radius: var(--cn-rb, var(--cn-br, 7px));
  /* AND IT SAYS WHAT THEY TYPED. The header uppercases every button in it
     and adds 1.2px of letter-spacing to carry the caps - so a member who
     wrote "Request a quote" in the box was shown REQUEST A QUOTE on the
     page, with no control anywhere to disagree. His rule, and it is the
     right one: "if wants it cap, they can type in cap". The spacing goes
     with it; it exists to make capitals readable and only loosens
     ordinary words. */
  text-transform: none; letter-spacing: normal;
  /* AND THE SAME SIZE. The header gives its buttons a fixed 56px height and
     0 34px of padding; the page button is sized by its own padding and
     comes out at 50 - the number he measured in Photoshop and drew a box
     around. Matching the PADDING rather than typing 50 means the two stay
     equal if the type ever changes, instead of agreeing once today.
     13 + 24 + 13 = 50. */
  height: auto; padding: 13px 26px; font-size: 15px;
}
.cnsite .cn-head.cn-float.cn-slw.cn-solid {
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.07);
}

/* ---- TWO LOGOS, CROSS-FADED ------------------------------------------
   The dark-background logo and the light-background one, stacked in the
   same slot and swapped when the bar paints itself white.

   STACKED RATHER THAN SWAPPED, and that is a deliberate difference from
   Divi. Its own guide does this with content:url() on the sticky state,
   which is an INSTANT change and does not fetch the second picture until
   the moment it is needed - so the first scroll can show a gap where the
   logo should be. Both images are in the markup here, so both are loaded
   before anything moves and the change is an opacity fade on the same
   .28s the bar itself uses. He described Divi's as fading "very fast";
   this is that, minus the gap.

   THE SECOND ONE IS ABSOLUTE, CENTRED, so the slot keeps the height of
   the first and the bar cannot jump as they swap. Both get their height
   from --cn-lgh like every other wide logo, so the member's own size and
   spacing numbers drive both and there is nothing extra to set.

   ONLY WHEN THE BAR GOES WHITE. A member who keeps their own colour on
   scroll has a dark bar in both states and needs one logo; the swap is
   tied to .cn-slw for exactly that reason. */
.cnsite .cn-head .cn-logo-two { position: relative; }
.cnsite .cn-head .cn-logo-two img { transition: opacity .28s ease; }
.cnsite .cn-head .cn-logo-two .cn-lg-b {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0;
}
.cnsite .cn-head.cn-float.cn-slw.cn-solid .cn-logo-two .cn-lg-a { opacity: 0; }
.cnsite .cn-head.cn-float.cn-slw.cn-solid .cn-logo-two .cn-lg-b { opacity: 1; }

/* IN THE BUILDER, ABSOLUTE. Same picture, measurable coordinates - see the
   note in patch66floatedit.py. getBoundingClientRect on a fixed element
   answers in viewport coordinates, and the canvas asks in document ones,
   so the selection box for the header landed nowhere near the header. */
.cnsite .cn-head.cn-float.cn-flabs { position: absolute; }
.cnsite .cn-head.cn-float.cn-solid .cn-pbar { background: var(--cn-pd); }
.cnsite .cn-head.cn-float.cn-solid::before { opacity: 0; }
.cnsite .cn-head.cn-float .cn-pbar,
.cnsite .cn-head.cn-float.cn-solid .cn-pbar { transition: background-color .28s ease; }

/* THE ROOM GOES ON THE THING THAT HOLDS THE PICTURE.

   .cn-sec.cn-hero.cn-v-overlay is padding 0 and paints the member's TONE
   colour; the photograph is a background on .cn-overlay INSIDE it. Padding
   the SECTION therefore pushes the photo down and leaves a strip of flat
   tone colour standing where the photo should be - a solid band under a
   header that is genuinely transparent. That was the first version of this
   rule and it is what he photographed: "is not working... because
   background is not transparent". The header was transparent. It was
   transparent over a band I had just created.

   .cn-overlay already carries 110px of its own top padding, which clears a
   96px bar on its own; this only opens it up a little so the eyebrow is not
   under the logo. Because it is padding on the element carrying the
   background image, the picture grows to fill it. */
.cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-overlay .cn-overlay {
  /* THEIR NUMBER IS THE BAND OF PHOTOGRAPH, the same as it is at the
     bottom. The bar is only a floor.

     THIS LINE HAS BEEN WRONG TWICE AND THE THIRD SHAPE IS THE RIGHT ONE.

     It began as max(var(--cn-spt, 150px), 150px) - a floor set to the Auto
     value, which swallowed None, Small and Normal whole and left one
     working button out of five.

     Then it became calc(96px + var(--cn-spt, 54px)) - the bar ADDED, on
     the reasoning that 96px is the header rather than spacing, so the gaps
     BETWEEN THINGS come out equal. Every step distinct, nothing able to
     tuck under the logo. He read it off a screenshot the same evening:
     "doesn't the normal on top and normal on bottom looks like diff size?"
     Top 206, bottom 110, both saying Normal.

     THE BAR IS TRANSPARENT, and that is what the addition forgot. The
     photograph runs underneath it, so what a member sees is not two equal
     gaps - it is two very different bands of picture from two controls
     wearing the same word. Asked, he chose: make them match on screen.

     max() gives him that. The number is the band; 96px only stops the
     words climbing under the logo.

     THE PRICE, and it is a real one: None (0) and Small (60) are both
     under the floor on a floating header, so both come back as "as tight
     as the bar allows". Normal and Large land exactly on their number,
     top and bottom - and those two are what this control was asked for:
     "sometimes we want the image really big to show".

     Auto is max(150, 96) = 150, unchanged for every site that has never
     opened this. */
  padding-top: var(--cn-spt, 150px);
}

/* ---- SPACE ABOVE AND BELOW ---------------------------------------------
   Four named steps, set as custom properties so the floating header can ask
   for the larger of theirs and its own. Auto stores nothing and emits no
   class, so every site that has never touched this is untouched. */
.cnsite .cn-sec.cn-pt-none   { --cn-spt: 0px; }
.cnsite .cn-sec.cn-pt-small  { --cn-spt: 60px; }
.cnsite .cn-sec.cn-pt-normal { --cn-spt: 110px; }
.cnsite .cn-sec.cn-pt-large  { --cn-spt: 200px; }
.cnsite .cn-sec.cn-pb-none   { --cn-spb: 0px; }
.cnsite .cn-sec.cn-pb-small  { --cn-spb: 60px; }
.cnsite .cn-sec.cn-pb-normal { --cn-spb: 110px; }
.cnsite .cn-sec.cn-pb-large  { --cn-spb: 200px; }

/* An ordinary section pads itself. */
.cnsite .cn-sec.cn-pt-none, .cnsite .cn-sec.cn-pt-small,
.cnsite .cn-sec.cn-pt-normal, .cnsite .cn-sec.cn-pt-large { padding-top: var(--cn-spt); }
.cnsite .cn-sec.cn-pb-none, .cnsite .cn-sec.cn-pb-small,
.cnsite .cn-sec.cn-pb-normal, .cnsite .cn-sec.cn-pb-large { padding-bottom: var(--cn-spb); }

/* THE PHOTO HERO PADS ITS INNER BOX INSTEAD, because that is the element
   carrying the picture - padding the section would push the photo down and
   leave a band of tone colour above it. That mistake is already written up
   twice tonight; this is the same rule applied on purpose. */
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-none,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-small,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-normal,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-large { padding-top: 0; }
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-none,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-small,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-normal,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-large { padding-bottom: 0; }
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-none .cn-overlay,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-small .cn-overlay,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-normal .cn-overlay,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-large .cn-overlay { padding-top: var(--cn-spt); }
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-none .cn-overlay,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-small .cn-overlay,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-normal .cn-overlay,
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-large .cn-overlay { padding-bottom: var(--cn-spb); }

/* ---- AND THE SAME TWO AGAIN, FOR A PHONE -------------------------------
   "can u add 2nd one below and maybe title deskop and mobile or phone" -
   said after seeing the hero on a narrow screen, where the amount that is
   right on a laptop is most of the picture.

   THESE REASSIGN THE PROPERTY RATHER THAN INTRODUCING ANOTHER ONE. Every
   consumer downstream - the ordinary section, the photo hero's inner box,
   and the floating header's calc(96px + var(--cn-spt, ...)) - is already
   written against --cn-spt and --cn-spb, so none of them needs a phone
   version. Setting the same property at this width is the entire feature.

   NO PHONE CLASS MEANS THE DESKTOP VALUE SURVIVES, which is exactly what
   "Auto follows the one above it" has to mean, and it costs nothing to
   arrange because it is what the cascade does when nobody overrides.

   ORDER IS LOAD-BEARING HERE AND SPECIFICITY IS NOT. These selectors are
   three classes, the same as the desktop ones they override, and a media
   query adds no weight - so this block must stay BELOW them. Moving it
   above would silently switch the feature off.

   THE PADDING RULES ARE REPEATED because the ones above are keyed on the
   DESKTOP class being present. A member who leaves the computer on Auto
   and sets only the phone has no cn-pt-* class at all, so without these
   the property would be set with nothing reading it - a control that
   works only for members who also used the other control.

   760px IS WHAT PHONE MEANS IN THIS FILE - where the bars fold into the
   hamburger and where the logo's own phone size takes over. */
@media (max-width: 760px) {
  .cnsite .cn-sec.cn-ptm-none   { --cn-spt: 0px; }
  .cnsite .cn-sec.cn-ptm-small  { --cn-spt: 60px; }
  .cnsite .cn-sec.cn-ptm-normal { --cn-spt: 110px; }
  .cnsite .cn-sec.cn-ptm-large  { --cn-spt: 200px; }
  .cnsite .cn-sec.cn-pbm-none   { --cn-spb: 0px; }
  .cnsite .cn-sec.cn-pbm-small  { --cn-spb: 60px; }
  .cnsite .cn-sec.cn-pbm-normal { --cn-spb: 110px; }
  .cnsite .cn-sec.cn-pbm-large  { --cn-spb: 200px; }

  .cnsite .cn-sec.cn-ptm-none, .cnsite .cn-sec.cn-ptm-small,
  .cnsite .cn-sec.cn-ptm-normal, .cnsite .cn-sec.cn-ptm-large { padding-top: var(--cn-spt); }
  .cnsite .cn-sec.cn-pbm-none, .cnsite .cn-sec.cn-pbm-small,
  .cnsite .cn-sec.cn-pbm-normal, .cnsite .cn-sec.cn-pbm-large { padding-bottom: var(--cn-spb); }

  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-none,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-small,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-normal,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-large { padding-top: 0; }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-none,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-small,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-normal,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-large { padding-bottom: 0; }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-none .cn-overlay,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-small .cn-overlay,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-normal .cn-overlay,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-large .cn-overlay { padding-top: var(--cn-spt); }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-none .cn-overlay,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-small .cn-overlay,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-normal .cn-overlay,
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-large .cn-overlay { padding-bottom: var(--cn-spb); }
}

/* ---- ON PHONES TOO, and only the spacing changes.

   This block used to switch the float off below 992px. The reason given
   first was the directory theme's fixed mobile navbar and the 50px of
   body margin it reserves - but this same stylesheet has zeroed that
   margin at this same breakpoint since 29 July, precisely because a
   member's website never renders that navbar. There was no second bar to
   collide with.

   What IS true down here is that a phone hero is a quarter the height, so
   the bar covers a larger share of the picture. That is a spacing
   question and it is answered with spacing. The scrim does the rest -
   which is its job on the desktop as well. */
@media (max-width: 991px) {
  /* A FLAT 118 LIVED HERE AND IT IS WHY SPACE ABOVE DID NOTHING AT ALL IN
     THE BUILDER FOR AN EVENING.

     Seven classes is (0,7,0); the rule that reads --cn-spt is (0,6,0). So
     the pin beat the member's choice outright and no value could ever be
     read below 992px - and the builder canvas is an iframe inside a paper
     of max-width:calc(100% - 40px), so with both panels open it measures
     around 850 and the preview was inside this block while his screen was
     not. He was testing a control that this line had switched off.

     Same shape as the desktop rule, its own Auto: max(118, 96) = 118,
     exactly what this used to be. The floor is still 96 because between
     761 and 991px the bar keeps its full min-height - below 760 it does
     not, which is the block underneath. */
  .cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-overlay .cn-overlay {
    padding-top: var(--cn-spt, 118px);
  }
}
/* ---- AND ON A PHONE THE BAR IS 64, NOT 96 -----------------------------
   The additive version added a flat 96 at every width, but below 760px
   this stylesheet drops .cn-pbar's min-height and hands the bar to
   .cn-mkeep .cn-pin at 64. So a phone was being given 32px of clearance
   for a bar that had already shrunk: measured at 420px with Normal on
   both rows, the gap under the bar came out 142 against a bottom of 110.

   A floor that does not match the thing it is clearing is not a floor,
   it is a number somebody typed. 64 is what the bar measures here.

   AFTER the 991 block and not inside it: these two selectors are the
   same seven classes, so the later one wins and order is the only thing
   deciding which. Auto is max(118, 64) = 118 - unchanged again. */
@media (max-width: 760px) {
  .cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-overlay .cn-overlay {
    /* THE PHONE NUMBER FIRST, THEN THE COMPUTER ONE, THEN AUTO. That
       chain IS the rule that an empty phone box follows the computer box -
       written once, here, rather than decided again in the panel and in
       the endpoint. */
    padding-top: var(--cn-sptm, var(--cn-spt, 118px));
  }
}

/* ---- A NUMBER OF PIXELS, WHICH IS WHAT THESE ARE NOW ------------------
   The four named steps could not say "just clears my bar" and could not
   say "more than Large", and every complaint about this control tonight
   was one of those two sentences. A number says both.

   ONE CLASS SAYING "SET", AND THE VALUE IN A CUSTOM PROPERTY. A class
   cannot carry 137px, and a custom property cannot be asked whether it
   was set - var(--x, fallback) cannot tell unset from inherited. So the
   two jobs are split: cn-pt-set means the member chose something, and
   --cn-spt is what they chose.

   THE WORD RULES ABOVE ARE NOT DELETED. This stylesheet goes live before
   the renderer does, and a page cached before that still carries the old
   classes. They stop being reachable on their own. */
.cnsite .cn-sec.cn-pt-set { padding-top: var(--cn-spt); }
.cnsite .cn-sec.cn-pb-set { padding-bottom: var(--cn-spb); }
/* The photo hero pads its INNER box, because that is the element carrying
   the picture - padding the section pushes the photo down and leaves a
   band of tone colour above it. Written up twice tonight already. */
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-set { padding-top: 0; }
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-set { padding-bottom: 0; }
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pt-set .cn-overlay { padding-top: var(--cn-spt); }
.cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pb-set .cn-overlay { padding-bottom: var(--cn-spb); }
@media (max-width: 760px) {
  .cnsite .cn-sec.cn-ptm-set { padding-top: var(--cn-sptm); }
  .cnsite .cn-sec.cn-pbm-set { padding-bottom: var(--cn-spbm); }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-set { padding-top: 0; }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-set { padding-bottom: 0; }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-ptm-set .cn-overlay { padding-top: var(--cn-sptm); }
  .cnsite .cn-sec.cn-hero.cn-v-overlay.cn-pbm-set .cn-overlay { padding-bottom: var(--cn-spbm); }
}


/* ======================================================================
   THE SOCIAL ROW, AS THE MEMBER SETS IT

   Five controls. Four of them land here - shape, colour, size and the
   fade. The fifth, which side, moves markup rather than paint and lives
   in cnRenderHeader.

   THIS BLOCK IS AT THE END OF THE FILE AND THAT IS LOAD-BEARING. Nearly
   every rule below ties on specificity with a rule further up - the row's
   own square and circle sizes, and the mobile panel's thumb targets - and
   wins on ORDER. Moving this block up the file silently hands the old
   numbers back, with nothing failing to say so.

   THE HOVERS ARE NOT DECORATION. `.cn-psoc a:hover` above is (0,3,1), and
   a painted row written as `.cn-psoc.cn-sc-accent a` is ALSO (0,3,1) - so
   without the hover rules at the bottom, the paint would win on order and
   every one of these rows would stop reacting to the pointer. Each hover
   is written one class louder than the paint it has to beat. Same trap as
   the header button, caught this time by counting rather than by a
   screenshot.
   ====================================================================== */

/* ONE NUMBER DRIVES THE MARK AND THE SHAPE AROUND IT. 16 is what the row
   has always been; the square was 26 and the circle 34, so the two chips
   keep the margins they were drawn with rather than a ratio nobody chose.
   A member who never touches Size gets today's row exactly. */
/* THE FOUR NUMBERS, AND EVERY ONE OF THEM FALLS BACK TO WHAT THE ROW
   HAS ALWAYS BEEN. A member who touches none of them gets today's row to
   the pixel: a 16px mark, a 15px gap on the bare row and 12 on the two
   chip shapes, and no padding at all.

   THE GAP DEFAULT DIFFERS BY SHAPE ON PURPOSE and that is why it is
   written three times rather than once: the bare marks need more air
   between them than tiles do, because a tile already carries its own. The
   var() fallback is the ONLY place those two numbers now live. */
.cnsite .cn-psoc {
  --cn-socsz: 16px;
  gap: var(--cn-socgap, 15px);
  padding-top: var(--cn-socpt, 0);
  padding-bottom: var(--cn-socpb, 0);
}
.cnsite .cn-psoc svg { width: var(--cn-socsz); height: var(--cn-socsz); }
.cnsite .cn-psoc.cn-s-square { gap: var(--cn-socgap, 12px); }
.cnsite .cn-psoc.cn-s-round { gap: var(--cn-socgap, 12px); }
.cnsite .cn-psoc.cn-s-square a {
  width: calc(var(--cn-socsz) + 10px); height: calc(var(--cn-socsz) + 10px);
}
.cnsite .cn-psoc.cn-s-round a {
  width: calc(var(--cn-socsz) + 18px); height: calc(var(--cn-socsz) + 18px);
}

/* A PHONE STILL GETS A THUMB TARGET. The panel's 44px square is set at
   (0,3,1) further up and the two rules above tie with it, so a member who
   picked the square or the circle would have shrunk the one place on this
   site where the icon IS the tap area. Re-asserted a class louder. */
.cnsite .cn-mpanel .cn-psoc.cn-s-square a,
.cnsite .cn-mpanel .cn-psoc.cn-s-round a { width: 44px; height: 44px; }

/* THE COLOURS, AND THERE ARE FOUR ON PURPOSE. Every one of them is a
   property widget 66 already writes inline on .cnsite from the member's
   own brand, so a member who changes their accent next month re-colours
   this row in the same press and can never land on a pair that does not
   contrast. A free hex box would have needed its own contrast rule and
   its own way of being wrong.

   'bar' is the ABSENCE of paint - the row takes the bar's own ink, which
   is what every preset does today. It is a real choice and not a no-op
   class: choosing it is how a member turns the preset's own fade off. */
.cnsite .cn-psoc.cn-sc-faded { opacity: .45; }
.cnsite .cn-psoc.cn-sc-accent a { color: var(--cn-accent); }

/* THE ACCENT IS THE ACCENT. There were five rules here, one per band,
   that swapped in the band's own ink wherever the member's accent came
   out under 3:1 on it. The arithmetic was right and the control was
   wrong: he pressed the green swatch and got grey icons - "the green is
   not making it green". Nothing else in this builder overrules a colour
   he has chosen, and this row being the exception was its own bug.

   The chip shapes below are the version that always reads, and they are
   offered in the same picker. Choosing is his. */
.cnsite .cn-psoc.cn-sc-accent.cn-s-square a,
.cnsite .cn-psoc.cn-sc-accent.cn-s-round a { background: var(--cn-accent); color: var(--cn-aink); }

/* AND THE POINTER STILL HAS SOMEWHERE TO GO. A row already painted in the
   accent cannot hover TO the accent, so that one hands back to the bar's
   own ink instead - a change the eye can see, which is the entire job of
   a hover. */
/* ONE RULE, WRITTEN A CLASS LOUDER THAN THE FIVE BANDS ABOVE IT. Without
   the .cn-pbar in it this hover is (0,3,1), the band rules are (0,4,1),
   and every painted row in a bar would have stopped answering the
   pointer. .cn-pbar is on the bar itself, so it costs nothing to say. */
.cnsite .cn-pbar .cn-psoc.cn-sc-accent a:hover,
.cnsite .cn-psoc.cn-sc-accent a:hover { color: inherit; }
.cnsite .cn-pbar .cn-psoc.cn-sc-accent.cn-s-square a:hover,
.cnsite .cn-pbar .cn-psoc.cn-sc-accent.cn-s-round a:hover,
.cnsite .cn-psoc.cn-sc-accent.cn-s-square a:hover,
.cnsite .cn-psoc.cn-sc-accent.cn-s-round a:hover { background: var(--cn-pd); color: #fff; }

/* CN-BORDPAL - a border can wear any palette colour, not just brand and
   accent. cnDsnVars already emits --cn-cN for every filled slot, so these
   are one line each. A slot the member later deletes emits no variable,
   the declaration is dropped, and the border falls back instead of
   drawing something wrong - the same "absent means default" contract the
   rest of the engine follows. */
.cnsite .cn-bc-c1 { border-color: var(--cn-c1) !important; }
.cnsite .cn-bc-c2 { border-color: var(--cn-c2) !important; }
.cnsite .cn-bc-c3 { border-color: var(--cn-c3) !important; }
.cnsite .cn-bc-c4 { border-color: var(--cn-c4) !important; }
.cnsite .cn-bc-c5 { border-color: var(--cn-c5) !important; }
.cnsite .cn-bc-c6 { border-color: var(--cn-c6) !important; }
.cnsite .cn-bc-cw { border-color: #ffffff !important; }
.cnsite .cn-bc-cg { border-color: #f1f3f6 !important; }
.cnsite .cn-bc-ck { border-color: #14181f !important; }
/* CN-BORDPAL END */
/* CN-CREDSEP - the separator sat 16px from the copyright and 8px from the
   credit, and the asymmetry was not the margin: .cn-sl carries gap: 8px,
   so the flex gap and the margin stack on the LEFT only and nothing adds
   on the right. Dropping the left margin leaves 8 each side - balanced,
   and the bar moves left by the 8 it should never have had. */
.cnsite .cn-pcopy + .cn-pcred::before { margin: 0 8px 0 0; }
/* CN-CREDSEP END */
/* CN-CREDSEP2 - CORRECTING CN-CREDSEP, which was built on a misread.
   .cn-sl is gap: 22px, not 8 - the 8 belongs to row-gap. So the bar sat
   30px from the copyright and 8px from the credit, and removing only the
   margin left it at 22 and 8, which looks unchanged because it nearly is.
   Pulling the credit back by 14 lands 8 each side for real. */
.cnsite .cn-pcopy + .cn-pcred::before { margin: 0 8px 0 -14px; }

/* ON A PHONE the bar stacks and centres, in the order he asked for:
   social, then copyright, then the credit. The right slot carries the
   icons, so it takes order 1; the left slot holds copyright AND credit,
   so it becomes a column and they fall in their written order. The
   separator goes - it separates two things that are no longer on one
   line, and a leading bar under a copyright reads as a typo. */
@media only screen and (max-width: 640px) {
  .cnsite .cn-foot .cn-pin {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 12px;
  }
  .cnsite .cn-foot .cn-sl { justify-content: center; gap: 12px; }
  .cnsite .cn-foot .cn-sl-r { margin-left: 0; order: 1; }
  .cnsite .cn-foot .cn-sl-l { margin-right: 0; order: 2; flex-direction: column; gap: 6px; }
  .cnsite .cn-foot .cn-sl-c { order: 3; }
  .cnsite .cn-foot .cn-pcopy + .cn-pcred::before { display: none; }
}
/* CN-CREDSEP2 END */
/* CN-FSOCBRK - the icons in the brand block must always start their own
   row, and until 19 Aug they only did so by accident.

   .cn-foot .cn-logo is display:inline-block and .cn-psoc is inline-flex, so
   those two only ever sat on separate lines because the <p class='cn-fbl'>
   stood between them. The moment he unticked the words under the logo the
   icons slid up alongside it, which is what he photographed.

   display:flex blocks the row and touches no other .cn-psoc on the site -
   the header bars, the contact column and the mobile panel all keep the
   inline-flex they were written with, because this is scoped to the brand
   column.

   THE PHONE RULE IS NOT OPTIONAL AND IT IS NOT TIDINESS. .cnsite .cn-foot
   .cn-pin at the bottom of this file centres the whole footer below 640px
   with text-align - which an inline-flex row obeys and a flex container
   ignores. Without the second rule the icons would left-align on a phone
   while the logo above them stayed centred, which is a new fault traded
   for the old one. Measured in Chromium at 400, 760, 1200 and 1600: with
   the words showing, every icon lands on exactly the pixel it landed on
   before this block existed, and with them hidden it lands under the logo
   at every one of the four. */
.cnsite .cn-fbrand .cn-psoc { display: flex; flex-wrap: wrap; }
@media only screen and (max-width: 640px) {
  .cnsite .cn-foot .cn-fbrand .cn-psoc { justify-content: center; }
}
/* CN-FSOCBRK END */


/* ---------- CN SPLIT, SWAP AND EDGE 2026 ----------
   Split sets the FIRST column and lets the second take the rest. Specificity
   here is 0,6,0 and beats .cnsite .cn-narrowcol at 0,2,0, so none of this
   needs !important - measured against the live stylesheet before it shipped.
   The rules sit inside min-width 781 because the phone rules below already
   stack every row, and a longer selector would otherwise beat them. */
@media (min-width: 781px) {
  .cnsite .cn-sec.cn-sp-even .cn-row > .cn-col { flex: 1 1 0; }
  .cnsite .cn-sec.cn-sp-nw   .cn-row > .cn-col:first-child { flex: 0 0 33.333%; }
  .cnsite .cn-sec.cn-sp-off  .cn-row > .cn-col:first-child { flex: 0 0 40%; }
  .cnsite .cn-sec.cn-sp-side .cn-row > .cn-col:first-child { flex: 0 0 25%; }
  .cnsite .cn-sec.cn-sp-nw   .cn-row > .cn-col:first-child + .cn-col,
  .cnsite .cn-sec.cn-sp-off  .cn-row > .cn-col:first-child + .cn-col,
  .cnsite .cn-sec.cn-sp-side .cn-row > .cn-col:first-child + .cn-col { flex: 1 1 0; }

  /* .cn-split is the hero and cta device and its children carry no flex of
     their own - they size to content. Without this line the second column
     measured NINE PIXELS. Found in the browser before the push, not after. */
  .cnsite .cn-sec.cn-sp-nw   .cn-split > *:first-child { flex: 0 0 33.333%; }
  .cnsite .cn-sec.cn-sp-off  .cn-split > *:first-child { flex: 0 0 40%; }
  .cnsite .cn-sec.cn-sp-side .cn-split > *:first-child { flex: 0 0 25%; }
  .cnsite .cn-sec.cn-sp-nw   .cn-split > *:first-child + *,
  .cnsite .cn-sec.cn-sp-off  .cn-split > *:first-child + *,
  .cnsite .cn-sec.cn-sp-side .cn-split > *:first-child + *,
  .cnsite .cn-sec.cn-sp-even .cn-split > * { flex: 1 1 0; min-width: 0; }

  .cnsite .cn-sec.cn-fl-swap .cn-row { flex-direction: row-reverse; }
  .cnsite .cn-sec.cn-fl-swap .cn-row.cn-rev { flex-direction: row; }
  .cnsite .cn-sec.cn-fl-swap .cn-split { flex-direction: row-reverse; }
}

/* Edge is outside the breakpoint: a pull-up is wanted on a phone too, just
   smaller. --cn-edge arrives inline from cnPadBits when the member typed a
   number; the fallback is what the three sites measured actually use. */
.cnsite .cn-sec.cn-e-overlap { margin-top: calc(-1 * var(--cn-edge, 80px)); position: relative; z-index: 2; }
.cnsite .cn-sec.cn-e-gap { margin-top: var(--cn-edge, 50px); }

/* THE FIRST SECTION ON A PAGE CANNOT PULL UP. There is nothing above it but
   the header, and lifting it slides the page under the menu. */
.cnsite .cn-sec.cn-e-overlap:first-of-type { margin-top: 0; }

@media (max-width: 780px) {
  .cnsite .cn-sec.cn-e-overlap { margin-top: calc(-0.5 * var(--cn-edge, 80px)); }
}

/* ---------- CN TONE NONE 2026 ----------
   A section with NO background of its own. It is what makes Pull up read as
   a card floating over the photo above instead of a solid band sliding up
   and covering it - which is exactly how Norris does that block. Ink stays
   the page ink, so nothing here can produce unreadable words. */
.cnsite .cn-sec.cn-t-none { background: transparent; color: var(--cn-ink); }
.cnsite .cn-t-none .cn-dim { color: var(--cn-muted); }

/* ---------- CN PANEL 2026 ----------
   A block with its own colour beside cards, photos or a checklist. It is a
   cn-row, so split, swap and edge all act on it with no rule of their own. */
.cnsite .cn-row.cn-panel { align-items: stretch; }
.cnsite .cn-pblock { border-radius: 10px; padding: 30px 28px; display: flex;
  flex-direction: column; justify-content: center; }
.cnsite .cn-pblock .cn-h { color: inherit; }
.cnsite .cn-pblock .cn-rich p { color: inherit; opacity: .84; }
.cnsite .cn-pblock .cn-btn { align-self: flex-start; margin-top: 16px; }
.cnsite .cn-peb { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 10px; opacity: .82; }
.cnsite .cn-pside { display: flex; }
.cnsite .cn-pside > * { width: 100%; }
.cnsite .cn-pshots { display: flex; gap: 12px; width: 100%; }
.cnsite .cn-pshots img { flex: 1 1 0; min-width: 0; min-height: 190px;
  object-fit: cover; border-radius: 10px; }
.cnsite .cn-plist { background: #fff; color: #14181f; border-radius: 10px;
  padding: 4px 22px; width: 100%; align-self: center; }
.cnsite .cn-plist > div { display: flex; gap: 11px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid rgba(20,24,31,.09); font-size: 15px; }
/* ---- NO CLOSING LINE, BUT ONLY WHERE THERE IS A LAST ONE - 4 September --
   "i wonder why the underline is missing under the last bottom one".

   THIS RULE IS OLDER THAN THE COLUMNS. When a checklist was one column read
   straight down, the final item WAS the end of the list and a line under it
   closed nothing, so it came off. The moment Cards per row shipped, "last
   child" stopped meaning "the bottom of the list" and started meaning "the
   bottom-RIGHT cell" - its two neighbours on the same row keep their lines
   and it does not, which is the ragged edge he is pointing at.

   SO THE EXCEPTION IS SCOPED TO THE SHAPE IT WAS WRITTEN FOR. In columns it
   simply never fires and each item keeps whatever line it would have had -
   the hairline here, or the member's own card border where they set one,
   which a hard-coded restore would have quietly painted over. */
.cnsite .cn-plist:not(.cn-lc-2):not(.cn-lc-3):not(.cn-lc-4) > div:last-child { border-bottom: 0; }
.cnsite .cn-ptick { color: var(--cn-accent); font-weight: 700; }
@media (max-width: 780px) {
  .cnsite .cn-pshots { flex-direction: column; }
  .cnsite .cn-pblock { padding: 24px 20px; }
  .cnsite .cn-pshots img { min-height: 150px; }
}

/* ---------- CN COLUMN GAP 2026 ----------
   Both two-column devices, because a member setting a gap means the gap they
   can see and does not care which one the section happens to use. */
.cnsite .cn-sec.cn-cg-set .cn-row { gap: var(--cn-cgap); }
.cnsite .cn-sec.cn-cg-set .cn-split { gap: var(--cn-cgap); }

/* ---------- CN PANEL, NARROW ----------
   A panel is not a photo beside a paragraph: one side is a solid block of
   WORDS, and a third of a 1000px window is 250px, which wraps a sentence
   every four words. He watched it happen: "for this section it looks weird
   when is small".

   TWO GUARDS, not one. The floor stops the block being squeezed below a
   readable measure while there is still room to take from the other side;
   the breakpoint gives up and stacks when there is not. 980 rather than the
   engine's usual 780 because this type runs out of room sooner than a row
   with a picture in it does. */
@media (min-width: 781px) {
  .cnsite .cn-row.cn-panel > .cn-pblock { min-width: 300px; }
}
@media (max-width: 980px) {
  .cnsite .cn-row.cn-panel { flex-direction: column; gap: 26px; }
  .cnsite .cn-row.cn-panel > .cn-col { flex: 1 1 auto; min-width: 0; }
  .cnsite .cn-sec.cn-fl-swap .cn-row.cn-panel { flex-direction: column; }
}

/* A card or a checklist wearing a chosen colour keeps its own ink, and the
   headings inside it follow rather than staying the site's dark. */
.cnsite .cn-panel .cn-card[style] h4, .cnsite .cn-panel .cn-card[style] p { color: inherit; }
.cnsite .cn-panel .cn-plist[style] > div { border-bottom-color: currentColor; }

/* ---------- CN PHOTO HERO WASH 2026 ----------
   The gradient above is medium and stays the default, so nothing already
   published moves. These three are the choices around it. */
.cnsite .cn-sec.cn-sc-none .cn-overlay::before { background: none; }
.cnsite .cn-sec.cn-sc-light .cn-overlay::before { background: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.32)); }
.cnsite .cn-sec.cn-sc-strong .cn-overlay::before { background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.88)); }

/* DARK WORDS ON A LIGHT PHOTOGRAPH. Three classes deep so it beats
   .cnsite .cn-overlay's own white, without !important. */
.cnsite .cn-sec.cn-hi-dark .cn-overlay { color: var(--cn-ink); }
.cnsite .cn-sec.cn-hi-dark .cn-overlay .cn-h,
.cnsite .cn-sec.cn-hi-dark .cn-overlay .cn-lead,
.cnsite .cn-sec.cn-hi-dark .cn-overlay .cn-eyebrow { color: var(--cn-ink); }
.cnsite .cn-sec.cn-hi-dark .cn-overlay .cn-dim { color: var(--cn-muted); }


/* ---------------------------------------------------- CN TAGCOL 2026 */
/* THE STRIP LINE'S COLOUR, WHICH UNTIL TODAY WAS A CONSTANT.

   Further up this file:

     .cnsite .cn-bg-w .cn-ptag, .cnsite .cn-bg-l .cn-ptag { color: #8d8d8d; }

   That is right on the white strips h6 and h12 draw, and it is what every
   published header shows. It stops being right the moment the member
   paints the bar themselves: their colour REPLACES the preset's tone
   class, a warm orange measures light, and the line comes out olive on
   orange. His words - "not sure where this color is coming from."

   SO THE GREY STAYS AND A CHOICE BEATS IT. Written one class louder,
   (0,4,0) against (0,3,0), which is why none of this needs !important.
   .cn-pbar is on the bar the line already sits in, so saying it costs
   nothing and buys the whole cascade.

   FOLLOW THE BAR AND FADED ARE NOT COLOURS. They are the bar's own ink,
   which is dark on a light bar and light on a dark one - so they keep
   working when the member repaints the bar underneath them. Every other
   entry is one of the palette variables cnDsnVars already writes, so a
   slot the member deletes drops its declaration and the line falls back
   rather than drawing something wrong. */
.cnsite .cn-pbar .cn-ptag.cn-tc-bar { color: inherit; opacity: 1; }
.cnsite .cn-pbar .cn-ptag.cn-tc-faded { color: inherit; opacity: .6; }
.cnsite .cn-pbar .cn-ptag.cn-tc-c1 { color: var(--cn-c1); }
.cnsite .cn-pbar .cn-ptag.cn-tc-c2 { color: var(--cn-c2); }
.cnsite .cn-pbar .cn-ptag.cn-tc-c3 { color: var(--cn-c3); }
.cnsite .cn-pbar .cn-ptag.cn-tc-c4 { color: var(--cn-c4); }
.cnsite .cn-pbar .cn-ptag.cn-tc-c5 { color: var(--cn-c5); }
.cnsite .cn-pbar .cn-ptag.cn-tc-c6 { color: var(--cn-c6); }
.cnsite .cn-pbar .cn-ptag.cn-tc-cw { color: #ffffff; }
.cnsite .cn-pbar .cn-ptag.cn-tc-cg { color: #f1f3f6; }
.cnsite .cn-pbar .cn-ptag.cn-tc-ck { color: #14181f; }
/* CN TAGCOL END */


/* ------------------------------------------------ CN ICON PLACE 2026 */
/* THE MARK BESIDE THE HEADING INSTEAD OF ABOVE IT.

   Every site he has built puts the icon on the left with the words beside
   it; these cards have always put it on top. Both are one arrangement of
   the same three children, so this is a grid rather than a second set of
   markup - nothing in the renderer changed, and a card drawn yesterday is
   drawn the same way today unless the section says otherwise.

   THE ICON SPANS BOTH ROWS so a two-line heading does not push the text out
   from under it. A card with no text has only one row; span 2 on a one-row
   grid creates an implicit second row and changes nothing.

   ON A PHONE IT USED TO GO BACK ON TOP, AND THAT WAS THE WRONG ANSWER -
   30 August. The worry behind it was real: a 320px card split into an icon
   column and a text column leaves about forty characters a line, which
   wraps a heading like "Group Fitness Classes" three times.

   But his own reference site runs the mark beside the heading on a phone
   and it reads better than the stack - shorter cards, and the heading
   where the eye already is. Two screenshots side by side settled it. So
   the fix for a narrow card is to TIGHTEN THE GAP, not to throw the
   arrangement away and hand back forty pixels of height per card.

   300px rather than deleting the query altogether, because below that
   there genuinely is not room for two columns and stacking is the only
   thing left. */
@media (min-width: 300px) {
  .cnsite .cn-ip-left .cn-card,
  .cnsite .cn-ip-left .cn-svc {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px; align-items: start;
  }
  /* THE HEADING SITS MIDDLE OF THE MARK - 29 August, "also the title text
     should be middle of the icon", and his Norris Fit card is exactly that:
     a two-line heading centred against the dumbbell beside it.

     The mark used to SPAN BOTH ROWS, which top-aligned it against the first
     line of the heading and left it stranded high on a card with a long
     paragraph. Now the mark and the heading share ROW 1 and both centre
     inside it, so the row is as tall as whichever is taller and the two
     always line up through their middles - a one-line heading centres
     against a big mark, a three-line heading centres a small one. The text
     keeps row 2 and the second column, so the paragraph still runs under
     the heading rather than under the mark. */
  .cnsite .cn-ip-left .cn-card > .cn-ico,
  .cnsite .cn-ip-left .cn-svc > .cn-ico {
    grid-row: 1; align-self: center; margin-bottom: 0;
  }
  .cnsite .cn-ip-left .cn-card > h4,
  .cnsite .cn-ip-left .cn-svc > h4 {
    grid-column: 2; grid-row: 1; align-self: center; margin-top: 0;
  }
  .cnsite .cn-ip-left .cn-card > p,
  .cnsite .cn-ip-left .cn-svc > p { grid-column: 2; grid-row: 2; }
}
/* A NARROW CARD BUYS ITS WIDTH BACK FROM THE GAP. Fourteen pixels between
   a mark and a heading is comfortable at 1200px and expensive at 360px,
   where every pixel is a character the heading does not have to wrap. */
@media (max-width: 780px) {
  .cnsite .cn-ip-left .cn-card,
  .cnsite .cn-ip-left .cn-svc { column-gap: 11px; }
}
/* CN ICON PLACE END */



/* ================== CN ICON 2026 - rewritten 29 August ================
   THE MARK IS THE THING. THE TILE IS OPTIONAL. THE NUMBER IS THE MARK.

   Three passes at this in one morning, and his last note is the one that
   settles all of it: "should be same is all other colors color set."

   WHAT WAS WRONG. The mark used to live inside a 44px accent tile that
   nobody had asked for and nobody could switch off, so the colour row's
   empty answer had to mean PAINT IT ACCENT while the empty answer in
   every other colour row on the panel means NOTHING PAINTED. To give a
   member the plain mark his reference sites use, the row grew a second
   empty-looking chip - and two diagonals side by side is exactly what he
   circled. The chip was a symptom; the opinion baked into Auto was the
   cause.

   AND THE NUMBER MEANT TWO THINGS. With a tile it sized the tile and the
   mark took half; with no tile it sized the mark. So pressing a COLOUR
   doubled a SIZE - "when i click the red line it makes icon big, very
   confusing" - which is a control reaching across into another control's
   job. Now the number is the mark, always, and the tile is twice it. A
   colour press can never change a size again.

   NOTHING PUBLISHED KEEPS A TILE. That is the cost and it was his call,
   made knowing it: every card on every site loses the accent square and
   keeps the accent MARK, which is the colour identity that mattered and
   is what every site he has built actually draws.

   ORDER IS THE MECHANISM THROUGHOUT. Every rule below is (0,3,0), the
   same weight, so each one beats the one above it by sitting later. No
   !important anywhere, and no control has to know whether another was
   used. Read it top to bottom: default, then size, then a tile if one
   was chosen, then the mark's own colour if one was chosen. */

/* ---- 1. THE DEFAULT. No tile, the mark in the member's accent.
      SCOPED TO CARDS AND SERVICE ROWS on purpose. The stats section
      draws .cn-ico too, as a centred badge above a big number, and it
      has no colour control of its own - so it must keep the tile it has
      always had. .cn-stat .cn-ico is not matched by either selector
      here, which is the whole reason they name their containers. */
/* AND THE CHECKLIST ROW JOINS THEM - 4 September. Its mark was added the
   night before and drew a tick or a glyph at a fixed 1.25em, which was all
   there was while the Icon group was not offered on this variant. Naming it
   HERE rather than writing it its own rule is the point: same cascade
   position as the cards, so the tile rule below still wins on source order
   and Icon color, Icon background and Size all behave identically one
   variant over. A rule of its own is how the two drift. */
/* THREE CLASSES, NOT THREE CLASSES AND AN ELEMENT - corrected within the
   hour. The first go said .cn-plist > div > .cn-ico, which is one element
   MORE specific than the two selectors beside it, so it beat the tile and
   ink rules further down instead of tying with them and losing on order the
   way the cards do. The visible result was the one he reported: "icon color
   is not working in the checklist". Matching the cards' shape exactly is
   the whole point of naming it here. */
.cnsite .cn-card > .cn-ico,
.cnsite .cn-svc > .cn-ico,
.cnsite .cn-plist .cn-ico {
  background: none; border-radius: 0;
  /* max-content, NOT auto - AND THIS IS WHAT CENTRED THE MARK, 30 August.

     .cn-ico is display:grid with place-items:center, so at width:auto the
     grid box fills the whole card and centres the mark inside it. On a
     stacked card that put a centred icon over left-aligned words, which
     reads as a bug and was really just a box nobody could see being wider
     than the thing in it. Nothing was ever "centring the icon" - there was
     no such rule to find, which is exactly why it took a while.

     max-content shrinks the box onto the mark, so it starts where the
     words start. The tile rule further down sets its own fixed width and
     still wins on source order, so a chosen tile is untouched. */
  width: max-content; height: auto;
  color: var(--cn-accent);
}

/* ---- 2. THE NUMBER IS THE MARK, tile or no tile. 22px is what the mark
      has always measured, so a section that never opens the box is drawn
      at exactly the size it was. */
.cnsite .cn-card > .cn-ico svg,
.cnsite .cn-svc > .cn-ico svg,
.cnsite .cn-plist .cn-ico svg {
  width: var(--cn-isz, 22px); height: var(--cn-isz, 22px);
}

/* ---- 3. A TILE, WHERE ONE WAS CHOSEN. Twice the mark and a corner at
      .23 of that, which is the 44 / 22 / 10 this engine has always drawn
      - so choosing the accent reproduces the old default exactly.
      The ink is COMPUTED from the tile, never chosen, so a member who
      picks a background and nothing else can never make an unreadable
      mark. Each palette slot already travels with its ink as --cn-cNi. */
.cnsite .cn-ic-c1 .cn-ico, .cnsite .cn-ic-c2 .cn-ico,
.cnsite .cn-ic-c3 .cn-ico, .cnsite .cn-ic-c4 .cn-ico,
.cnsite .cn-ic-c5 .cn-ico, .cnsite .cn-ic-c6 .cn-ico,
.cnsite .cn-ic-cw .cn-ico, .cnsite .cn-ic-cg .cn-ico,
.cnsite .cn-ic-ck .cn-ico {
  width: calc(var(--cn-isz, 22px) * 2);
  height: calc(var(--cn-isz, 22px) * 2);
  border-radius: calc(var(--cn-isz, 22px) * .46);
}
.cnsite .cn-ic-c1 .cn-ico { background: var(--cn-c1); color: var(--cn-c1i); }
.cnsite .cn-ic-c2 .cn-ico { background: var(--cn-c2); color: var(--cn-c2i); }
.cnsite .cn-ic-c3 .cn-ico { background: var(--cn-c3); color: var(--cn-c3i); }
.cnsite .cn-ic-c4 .cn-ico { background: var(--cn-c4); color: var(--cn-c4i); }
.cnsite .cn-ic-c5 .cn-ico { background: var(--cn-c5); color: var(--cn-c5i); }
.cnsite .cn-ic-c6 .cn-ico { background: var(--cn-c6); color: var(--cn-c6i); }
/* The three neutrals are literals in every other table on this page, so
   they are literals here too rather than a fourth spelling of white. */
.cnsite .cn-ic-cw .cn-ico { background: #ffffff; color: #14181f; }
.cnsite .cn-ic-cg .cn-ico { background: #f1f3f6; color: #14181f; }
.cnsite .cn-ic-ck .cn-ico { background: #14181f; color: #ffffff; }

/* ---- 4. THE MARK'S OWN COLOUR, last, so it beats both the accent
      default and any tile's computed ink. Absent leaves whichever of
      those two applies standing. */
.cnsite .cn-ik-c1 .cn-ico { color: var(--cn-c1); }
.cnsite .cn-ik-c2 .cn-ico { color: var(--cn-c2); }
.cnsite .cn-ik-c3 .cn-ico { color: var(--cn-c3); }
.cnsite .cn-ik-c4 .cn-ico { color: var(--cn-c4); }
.cnsite .cn-ik-c5 .cn-ico { color: var(--cn-c5); }
.cnsite .cn-ik-c6 .cn-ico { color: var(--cn-c6); }
.cnsite .cn-ik-cw .cn-ico { color: #ffffff; }
.cnsite .cn-ik-cg .cn-ico { color: #f1f3f6; }
.cnsite .cn-ik-ck .cn-ico { color: #14181f; }
/* ====================== CN ICON 2026 END ============================= */


/* ------------------------------------------------ CN BOX SHADOW 2026 */
/* THE REST OF THE BOXED SURFACES. .cn-card and .cn-bcard are edited in
   place above, because they already carry an outline that has to become a
   variable; these two only gain a shadow, so they are additions.

   PHOTOS GET NO OUTLINE BY DEFAULT and must not grow one - var(--cn-shadow,
   none) means a photograph is untouched until somebody actually chooses a
   shadow, which is the right default: a hairline round a photo is a
   different decision from a hairline round a card. */
.cnsite .cn-img { box-shadow: var(--cn-shadow, none); }

/* THE BLOG CARD'S HOVER LIFT KEEPS WORKING, and now it agrees with the
   member's choice instead of overriding it. Its own rule replaces the
   whole box-shadow on hover, so a member who set a deep shadow used to
   watch it shrink when the mouse arrived, and a member who chose None
   still got one. Same weight as that rule, later in the file. */
.cnsite a.cn-bcard:hover { box-shadow: var(--cn-shadow, 0 8px 22px rgba(15, 23, 42, .10)); }
/* CN BOX SHADOW END */


/* ============ NO SIDEWAYS JUMP BETWEEN PAGES - 30 August ============= */
/* "when i click on services and products, the menu jumps like is little
    smaller, hmm"

   MEASURED, NOT GUESSED. On his two screenshots the orange top strip is
   1897px wide on the home page and 1912px wide on the services page. The
   difference is 15px, which is a scrollbar, and half of it - 7 or 8px - is
   how far every centred thing on the page appears to slide.

   NOTHING ABOUT THE HEADER CHANGES BETWEEN THOSE PAGES. The home page is
   long enough to need a vertical scrollbar and the services page is not, so
   the VIEWPORT is a scrollbar narrower on one than the other and the whole
   centred layout re-centres inside it. Every site with pages of different
   lengths has this; it is only visible when a fixed thing like a logo sits
   near the edge, which is exactly where his eye was.

   scrollbar-gutter RESERVES THE TRACK WHETHER OR NOT IT IS USED, so both
   pages lay out in the same width and nothing moves. A browser too old to
   know the property ignores it and behaves exactly as today - no worse -
   which is why there is no overflow-y:scroll fallback here: that one would
   paint an always-on grey track on short pages to fix a problem those old
   browsers are not visibly having.

   ONE OF THE VERY FEW RULES IN THIS FILE OUTSIDE .cnsite, and it has to be:
   the gutter belongs to the viewport and no element inside the page can
   reserve it. Precedent is widget 598 zeroing .footer-clear-element. */
html { scrollbar-gutter: stable; }
/* ========== NO SIDEWAYS JUMP END ==================================== */


/* ============= CN A MARK THAT IS A PICTURE - 30 August =============== */
/* A member uploaded a png rather than pasting a drawing. It gets the same
   box an svg gets so a card with one sits on the same line as a card
   without, and object-fit keeps a wide mark wide inside that square rather
   than stretching it to fill.
   IT CANNOT TAKE THE PALETTE COLOUR and no rule here can change that - a
   picture is the colours it was saved with. That is the honest cost of
   letting somebody use the file they already have, and the reason the
   panel takes an svg by preference without ever saying the word. */
.cnsite .cn-ico .cn-icoimg {
  width: var(--cn-isz, 22px); height: var(--cn-isz, 22px);
  object-fit: contain; display: block;
}
.cnsite .cn-ic-c1 .cn-ico .cn-icoimg, .cnsite .cn-ic-c2 .cn-ico .cn-icoimg,
.cnsite .cn-ic-c3 .cn-ico .cn-icoimg, .cnsite .cn-ic-c4 .cn-ico .cn-icoimg,
.cnsite .cn-ic-c5 .cn-ico .cn-icoimg, .cnsite .cn-ic-c6 .cn-ico .cn-icoimg,
.cnsite .cn-ic-cw .cn-ico .cn-icoimg, .cnsite .cn-ic-cg .cn-ico .cn-icoimg,
.cnsite .cn-ic-ck .cn-ico .cn-icoimg {
  width: calc(var(--cn-isz, 22px) * 1.15);
  height: calc(var(--cn-isz, 22px) * 1.15);
}
/* =========== CN A MARK THAT IS A PICTURE END ========================= */


/* ---- WHAT EACH STYLE ALREADY SETS - 30 August ------------------------
   The same table the eyebrow needed, for two more properties. Every one of
   these is a value a template style writes TODAY; naming them here means a
   member who never opens the two new fields keeps exactly what their style
   draws, and one who does opens overrules it everywhere.

   Read straight out of the stylesheet, not guessed:
     .cn-h          1.12 / -.022em   editorial 1.2 / 0
     .cn-lead       1.6              editorial 1.7
     .cn-eyebrow    .14em   civic .1em  verdant .005em
                            editorial .16em  meridian .18em */
.cnsite { --cn-hlh: 1.12; --cn-hlt: -.022em; --cn-eblt: .14em; --cn-p2lhd: 1.6; }
.cnsite.cn-sty-signal { --cn-hlt: -.03em; }
.cnsite.cn-sty-civic { --cn-hlt: -.025em; --cn-eblt: .1em; }
.cnsite.cn-sty-verdant { --cn-hlt: -.025em; --cn-eblt: .005em; }
.cnsite.cn-sty-editorial { --cn-hlh: 1.2; --cn-hlt: 0; --cn-eblt: .16em; --cn-p2lhd: 1.7; }
.cnsite.cn-sty-meridian { --cn-hlt: -.01em; --cn-eblt: .18em; }


/* ============ A SECTION BORROWS A LEVEL - 30 August ====================
   Four choices per section, not per field: "there are 8 boxes with title
   and 8 paragraph, i dont think each every fields needs it". An eight card
   section would have carried sixteen pickers. It carries two, and both
   govern every card in it - the way icon size and colour already do.

   WRITTEN OUT RATHER THAN INDIRECTED. The tidy version would have the
   renderer emit a local remap of one level's variables onto another's, and
   it would be four lines of PHP and impossible to read in a browser's
   inspector. This is verbose and every rule says exactly what it does, at
   the one place in the system most likely to be debugged by looking.

   EVERY VALUE HERE IS COPIED FROM THE RULE IT MIRRORS, including the two
   variable-table defaults - so a section wearing H2 gets precisely what an
   H2 gets, and a section wearing nothing is untouched.

   AT THE END OF THE FILE because these must beat the plain .cn-h and
   .cn-card rules, and at (0,4,0) against (0,3,0) they already do - the
   source position is belt and braces, not the mechanism. */
.cnsite.cn-dsn .cn-th-h1 .cn-h {
  font-size: var(--cn-h1s, 44px);
  font-family: var(--cn-h1f, var(--cn-fh));
  font-weight: var(--cn-h1w, var(--cn-wh));
  line-height: var(--cn-h1lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h1lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-th-h2 .cn-h {
  font-size: var(--cn-h2s, 30px);
  font-family: var(--cn-h2f, var(--cn-fh));
  font-weight: var(--cn-h2w, var(--cn-wh));
  line-height: var(--cn-h2lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h2lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-th-h3 .cn-h {
  font-size: var(--cn-h3s, 21px);
  font-family: var(--cn-h3f, var(--cn-fh));
  font-weight: var(--cn-h3w, var(--cn-wh));
  line-height: var(--cn-h3lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h3lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-th-h4 .cn-h {
  font-size: var(--cn-h4s, var(--cn-ebs, 12.5px));
  font-family: var(--cn-h4f, var(--cn-fh));
  font-weight: var(--cn-h4w, var(--cn-wh));
  line-height: var(--cn-h4lh, normal);
  letter-spacing: var(--cn-h4lt, var(--cn-eblt, .14em));
}
.cnsite.cn-dsn .cn-tp-p .cn-rich {
  font-size: var(--cn-ps, 16px);
  font-family: var(--cn-pf, var(--cn-fb));
  font-weight: var(--cn-pw, 400);
  line-height: var(--cn-plh, 1.7);
  letter-spacing: var(--cn-plt, normal);
}
.cnsite.cn-dsn .cn-tp-p2 .cn-rich {
  font-size: var(--cn-pls, 18px);
  font-family: var(--cn-p2f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p2w, var(--cn-pw, 400));
  line-height: var(--cn-p2lh, var(--cn-p2lhd, 1.6));
  letter-spacing: var(--cn-p2lt, normal);
}
.cnsite.cn-dsn .cn-tp-p3 .cn-rich {
  font-size: var(--cn-cps, 14px);
  font-family: var(--cn-p3f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p3w, var(--cn-pw, 400));
  line-height: var(--cn-p3lh, 1.55);
  letter-spacing: var(--cn-p3lt, normal);
}
.cnsite.cn-dsn .cn-tch-h1 .cn-card h4,
.cnsite.cn-dsn .cn-tch-h1 .cn-svc h4 {
  font-size: var(--cn-h1s, 44px);
  font-family: var(--cn-h1f, var(--cn-fh));
  font-weight: var(--cn-h1w, var(--cn-wh));
  line-height: var(--cn-h1lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h1lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tch-h2 .cn-card h4,
.cnsite.cn-dsn .cn-tch-h2 .cn-svc h4 {
  font-size: var(--cn-h2s, 30px);
  font-family: var(--cn-h2f, var(--cn-fh));
  font-weight: var(--cn-h2w, var(--cn-wh));
  line-height: var(--cn-h2lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h2lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tch-h3 .cn-card h4,
.cnsite.cn-dsn .cn-tch-h3 .cn-svc h4 {
  font-size: var(--cn-h3s, 21px);
  font-family: var(--cn-h3f, var(--cn-fh));
  font-weight: var(--cn-h3w, var(--cn-wh));
  line-height: var(--cn-h3lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h3lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tch-h4 .cn-card h4,
.cnsite.cn-dsn .cn-tch-h4 .cn-svc h4 {
  font-size: var(--cn-h4s, var(--cn-ebs, 12.5px));
  font-family: var(--cn-h4f, var(--cn-fh));
  font-weight: var(--cn-h4w, var(--cn-wh));
  line-height: var(--cn-h4lh, normal);
  letter-spacing: var(--cn-h4lt, var(--cn-eblt, .14em));
}
.cnsite.cn-dsn .cn-tcp-p .cn-card p,
.cnsite.cn-dsn .cn-tcp-p .cn-svc p {
  font-size: var(--cn-ps, 16px);
  font-family: var(--cn-pf, var(--cn-fb));
  font-weight: var(--cn-pw, 400);
  line-height: var(--cn-plh, 1.7);
  letter-spacing: var(--cn-plt, normal);
}
.cnsite.cn-dsn .cn-tcp-p2 .cn-card p,
.cnsite.cn-dsn .cn-tcp-p2 .cn-svc p {
  font-size: var(--cn-pls, 18px);
  font-family: var(--cn-p2f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p2w, var(--cn-pw, 400));
  line-height: var(--cn-p2lh, var(--cn-p2lhd, 1.6));
  letter-spacing: var(--cn-p2lt, normal);
}
.cnsite.cn-dsn .cn-tcp-p3 .cn-card p,
.cnsite.cn-dsn .cn-tcp-p3 .cn-svc p {
  font-size: var(--cn-cps, 14px);
  font-family: var(--cn-p3f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p3w, var(--cn-pw, 400));
  line-height: var(--cn-p3lh, 1.55);
  letter-spacing: var(--cn-p3lt, normal);
}


/* ---- THE SMALL LINE ABOVE BORROWS A LEVEL TOO - 30 August -------------
   The fifth role, and the one he counted that I had missed: "we have 5
   diff text on this section... so there 5 test but u have 4".

   h4 is its own default and reads through the per-style eyebrow table, so
   a section that names H4 explicitly gets exactly what it had. The other
   three are a deliberate escape: an eyebrow set to H3 is a second heading,
   which is a real thing to want above a block. */
.cnsite.cn-dsn .cn-tye-h1 .cn-eyebrow {
  font-size: var(--cn-h1s, 44px);
  font-family: var(--cn-h1f, var(--cn-fh));
  font-weight: var(--cn-h1w, var(--cn-wh));
  line-height: var(--cn-h1lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h1lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tye-h2 .cn-eyebrow {
  font-size: var(--cn-h2s, 30px);
  font-family: var(--cn-h2f, var(--cn-fh));
  font-weight: var(--cn-h2w, var(--cn-wh));
  line-height: var(--cn-h2lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h2lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tye-h3 .cn-eyebrow {
  font-size: var(--cn-h3s, 21px);
  font-family: var(--cn-h3f, var(--cn-fh));
  font-weight: var(--cn-h3w, var(--cn-wh));
  line-height: var(--cn-h3lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h3lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tye-h4 .cn-eyebrow {
  font-size: var(--cn-h4s, var(--cn-ebs, 12.5px));
  font-family: var(--cn-h4f, var(--cn-fh));
  font-weight: var(--cn-h4w, var(--cn-wh));
  line-height: var(--cn-h4lh, normal);
  letter-spacing: var(--cn-h4lt, var(--cn-eblt, .14em));
}


/* ---- WHERE A CHOSEN COLOUR IS ALLOWED TO LAND - 30 August -------------
   "not changing the colors" - H4 set to Accent, the eyebrow set to H4, and
   NORRIS FIT still standing in the block's own computed ink.

   The guard above is right and stays: on dark, brand and accent tones the
   text colour is COMPUTED from the background, which is what makes an
   unreadable heading impossible. Two things were wrong with WHERE it drew
   the line.

   ONE - 'none' is not a dark tone. A section with no tone is transparent
   and stands on the page's own background wearing var(--cn-ink), exactly
   like white and light - see .cn-sec.cn-t-none above. It was left out of
   every colour rule for no reason other than that the list was written
   with two names in it, and a member on a plain white section could set a
   heading colour and watch nothing happen.

   TWO - INSIDE THE PANEL'S BLOCK THE TONE IS ANSWERING THE WRONG QUESTION.
   .cn-pblock is a box with its OWN background, picked by the member two
   controls further up the same panel. The section's tone describes what is
   behind the block, not what is behind the words, so guarding the words
   with it is meaningless in both directions - it refused his gold on a
   navy block he chose, and on a white-tone section it has always allowed
   whatever colour he liked on that same navy block anyway.

   This is the card's argument, applied to the other box on the same row:
   ".cn-card ... is always a white box, so a palette colour on it is always
   readable and needs no tone guard." A block whose background the member
   set is the same case - they can see the result while they pick it. */
.cnsite.cn-dsn .cn-t-none .cn-h:not(.cn-sm):not(.cn-xs) { color: var(--cn-h1c, inherit); }
.cnsite.cn-dsn .cn-t-none .cn-h.cn-sm { color: var(--cn-h2c, inherit); }
.cnsite.cn-dsn .cn-t-none .cn-h.cn-xs { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-t-none .cn-rich,
.cnsite.cn-dsn .cn-t-none .cn-rich p { color: var(--cn-pc, inherit); }
.cnsite.cn-dsn .cn-t-none .cn-lead { color: var(--cn-p2c, var(--cn-pc, inherit)); }
.cnsite.cn-dsn .cn-t-none .cn-eyebrow { color: var(--cn-h4c, var(--cn-ebc, inherit)); }
.cnsite.cn-dsn .cn-t-none .cn-svc h4 { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-t-none .cn-svc p { color: var(--cn-p3c, var(--cn-pc, inherit)); }

/* The block, on any tone. Four classes deep so these beat both the tone
   rules above and .cnsite .cn-pblock .cn-h { color: inherit }, which is
   what has been painting these since the panel was written. Every fallback
   is `inherit`, so a member who has chosen no colour keeps the computed
   ink against their own block exactly as today. */
.cnsite.cn-dsn .cn-pblock .cn-h:not(.cn-sm):not(.cn-xs) { color: var(--cn-h1c, inherit); }
.cnsite.cn-dsn .cn-pblock .cn-h.cn-sm { color: var(--cn-h2c, inherit); }
.cnsite.cn-dsn .cn-pblock .cn-eyebrow { color: var(--cn-h4c, var(--cn-ebc, inherit)); }
.cnsite.cn-dsn .cn-pblock .cn-rich,
.cnsite.cn-dsn .cn-pblock .cn-rich p { color: var(--cn-pc, inherit); }


/* ---- COLOUR FOLLOWS THE ROLE - 30 August ------------------------------
   "color also not change on this one" - the colour set on P2, the block's
   text still in the block's own ink.

   Two controls were disagreeing about what a piece of text IS. The Style
   row says "this line is a P2" and the size, family, weight, line height
   and tracking all moved to P2 the moment he pressed it. COLOUR DID NOT:
   it was still being read off where the text sits in the MARKUP - the
   block's body is a .cn-rich, .cn-rich has always meant P1, so P1's colour
   is what it took no matter what the row said. Set a heading to H4 and it
   came out at H4's size in H2's colour.

   So a role now carries its colour the same way it carries its size, and
   these sit at the very end of the file at (0,5,0) so they beat the level
   rules that key off .cn-sm and .cn-xs. AUTO STILL MEANS AUTO - a section
   wearing no role class matches nothing here and reads its colour exactly
   where it always did.

   THE GUARD IS UNCHANGED and repeated on every one of these: white, light
   and none, plus the two boxes whose background the member set themselves,
   the card and the block. On dark, brand and accent the ink stays computed
   from the background, which is still the rule that makes an unreadable
   heading impossible. */
.cnsite.cn-dsn .cn-t-white.cn-tye-h1 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-light.cn-tye-h1 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-none.cn-tye-h1 .cn-eyebrow,
.cnsite.cn-dsn .cn-tye-h1 .cn-pblock .cn-eyebrow { color: var(--cn-h1c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-tye-h2 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-light.cn-tye-h2 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-none.cn-tye-h2 .cn-eyebrow,
.cnsite.cn-dsn .cn-tye-h2 .cn-pblock .cn-eyebrow { color: var(--cn-h2c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-tye-h3 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-light.cn-tye-h3 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-none.cn-tye-h3 .cn-eyebrow,
.cnsite.cn-dsn .cn-tye-h3 .cn-pblock .cn-eyebrow { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-tye-h4 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-light.cn-tye-h4 .cn-eyebrow,
.cnsite.cn-dsn .cn-t-none.cn-tye-h4 .cn-eyebrow,
.cnsite.cn-dsn .cn-tye-h4 .cn-pblock .cn-eyebrow { color: var(--cn-h4c, var(--cn-ebc, inherit)); }
.cnsite.cn-dsn .cn-t-white.cn-th-h1 .cn-h,
.cnsite.cn-dsn .cn-t-light.cn-th-h1 .cn-h,
.cnsite.cn-dsn .cn-t-none.cn-th-h1 .cn-h,
.cnsite.cn-dsn .cn-th-h1 .cn-pblock .cn-h { color: var(--cn-h1c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-th-h2 .cn-h,
.cnsite.cn-dsn .cn-t-light.cn-th-h2 .cn-h,
.cnsite.cn-dsn .cn-t-none.cn-th-h2 .cn-h,
.cnsite.cn-dsn .cn-th-h2 .cn-pblock .cn-h { color: var(--cn-h2c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-th-h3 .cn-h,
.cnsite.cn-dsn .cn-t-light.cn-th-h3 .cn-h,
.cnsite.cn-dsn .cn-t-none.cn-th-h3 .cn-h,
.cnsite.cn-dsn .cn-th-h3 .cn-pblock .cn-h { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-th-h4 .cn-h,
.cnsite.cn-dsn .cn-t-light.cn-th-h4 .cn-h,
.cnsite.cn-dsn .cn-t-none.cn-th-h4 .cn-h,
.cnsite.cn-dsn .cn-th-h4 .cn-pblock .cn-h { color: var(--cn-h4c, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-tp-p .cn-rich,
.cnsite.cn-dsn .cn-t-light.cn-tp-p .cn-rich,
.cnsite.cn-dsn .cn-t-none.cn-tp-p .cn-rich,
.cnsite.cn-dsn .cn-tp-p .cn-pblock .cn-rich,
.cnsite.cn-dsn .cn-t-white.cn-tp-p .cn-rich p,
.cnsite.cn-dsn .cn-t-light.cn-tp-p .cn-rich p,
.cnsite.cn-dsn .cn-t-none.cn-tp-p .cn-rich p,
.cnsite.cn-dsn .cn-tp-p .cn-pblock .cn-rich p,
.cnsite.cn-dsn .cn-t-white.cn-tp-p .cn-lead,
.cnsite.cn-dsn .cn-t-light.cn-tp-p .cn-lead,
.cnsite.cn-dsn .cn-t-none.cn-tp-p .cn-lead,
.cnsite.cn-dsn .cn-tp-p .cn-pblock .cn-lead { color: var(--cn-pc, inherit); }
.cnsite.cn-dsn .cn-t-white.cn-tp-p2 .cn-rich,
.cnsite.cn-dsn .cn-t-light.cn-tp-p2 .cn-rich,
.cnsite.cn-dsn .cn-t-none.cn-tp-p2 .cn-rich,
.cnsite.cn-dsn .cn-tp-p2 .cn-pblock .cn-rich,
.cnsite.cn-dsn .cn-t-white.cn-tp-p2 .cn-rich p,
.cnsite.cn-dsn .cn-t-light.cn-tp-p2 .cn-rich p,
.cnsite.cn-dsn .cn-t-none.cn-tp-p2 .cn-rich p,
.cnsite.cn-dsn .cn-tp-p2 .cn-pblock .cn-rich p,
.cnsite.cn-dsn .cn-t-white.cn-tp-p2 .cn-lead,
.cnsite.cn-dsn .cn-t-light.cn-tp-p2 .cn-lead,
.cnsite.cn-dsn .cn-t-none.cn-tp-p2 .cn-lead,
.cnsite.cn-dsn .cn-tp-p2 .cn-pblock .cn-lead { color: var(--cn-p2c, var(--cn-pc, inherit)); }
.cnsite.cn-dsn .cn-t-white.cn-tp-p3 .cn-rich,
.cnsite.cn-dsn .cn-t-light.cn-tp-p3 .cn-rich,
.cnsite.cn-dsn .cn-t-none.cn-tp-p3 .cn-rich,
.cnsite.cn-dsn .cn-tp-p3 .cn-pblock .cn-rich,
.cnsite.cn-dsn .cn-t-white.cn-tp-p3 .cn-rich p,
.cnsite.cn-dsn .cn-t-light.cn-tp-p3 .cn-rich p,
.cnsite.cn-dsn .cn-t-none.cn-tp-p3 .cn-rich p,
.cnsite.cn-dsn .cn-tp-p3 .cn-pblock .cn-rich p,
.cnsite.cn-dsn .cn-t-white.cn-tp-p3 .cn-lead,
.cnsite.cn-dsn .cn-t-light.cn-tp-p3 .cn-lead,
.cnsite.cn-dsn .cn-t-none.cn-tp-p3 .cn-lead,
.cnsite.cn-dsn .cn-tp-p3 .cn-pblock .cn-lead { color: var(--cn-p3c, var(--cn-pc, inherit)); }
.cnsite.cn-dsn .cn-tch-h1 .cn-card h4,
.cnsite.cn-dsn .cn-t-white.cn-tch-h1 .cn-svc h4,
.cnsite.cn-dsn .cn-t-light.cn-tch-h1 .cn-svc h4,
.cnsite.cn-dsn .cn-t-none.cn-tch-h1 .cn-svc h4 { color: var(--cn-h1c, inherit); }
.cnsite.cn-dsn .cn-tch-h2 .cn-card h4,
.cnsite.cn-dsn .cn-t-white.cn-tch-h2 .cn-svc h4,
.cnsite.cn-dsn .cn-t-light.cn-tch-h2 .cn-svc h4,
.cnsite.cn-dsn .cn-t-none.cn-tch-h2 .cn-svc h4 { color: var(--cn-h2c, inherit); }
.cnsite.cn-dsn .cn-tch-h3 .cn-card h4,
.cnsite.cn-dsn .cn-t-white.cn-tch-h3 .cn-svc h4,
.cnsite.cn-dsn .cn-t-light.cn-tch-h3 .cn-svc h4,
.cnsite.cn-dsn .cn-t-none.cn-tch-h3 .cn-svc h4 { color: var(--cn-h3c, inherit); }
.cnsite.cn-dsn .cn-tch-h4 .cn-card h4,
.cnsite.cn-dsn .cn-t-white.cn-tch-h4 .cn-svc h4,
.cnsite.cn-dsn .cn-t-light.cn-tch-h4 .cn-svc h4,
.cnsite.cn-dsn .cn-t-none.cn-tch-h4 .cn-svc h4 { color: var(--cn-h4c, inherit); }
.cnsite.cn-dsn .cn-tcp-p .cn-card p,
.cnsite.cn-dsn .cn-t-white.cn-tcp-p .cn-svc p,
.cnsite.cn-dsn .cn-t-light.cn-tcp-p .cn-svc p,
.cnsite.cn-dsn .cn-t-none.cn-tcp-p .cn-svc p { color: var(--cn-pc, inherit); }
.cnsite.cn-dsn .cn-tcp-p2 .cn-card p,
.cnsite.cn-dsn .cn-t-white.cn-tcp-p2 .cn-svc p,
.cnsite.cn-dsn .cn-t-light.cn-tcp-p2 .cn-svc p,
.cnsite.cn-dsn .cn-t-none.cn-tcp-p2 .cn-svc p { color: var(--cn-p2c, var(--cn-pc, inherit)); }
.cnsite.cn-dsn .cn-tcp-p3 .cn-card p,
.cnsite.cn-dsn .cn-t-white.cn-tcp-p3 .cn-svc p,
.cnsite.cn-dsn .cn-t-light.cn-tcp-p3 .cn-svc p,
.cnsite.cn-dsn .cn-t-none.cn-tcp-p3 .cn-svc p { color: var(--cn-p3c, var(--cn-pc, inherit)); }


/* ---- THE VEIL COMES OFF WHEN SOMEBODY PICKS A COLOUR - 30 August ------
   "white text is not white 100% and yellow is also not same, is like it
    has some transparent or something" - and he took it into Photoshop to
   be sure. White on the block sampled #cfd1d4. Accent on the eyebrow
   sampled #c69936 against the #f5ba39 he actually picked.

   It IS transparency. Secondary text on this site has always been softened
   with an OPACITY rather than a lighter ink - .84 on the block's body, .82
   on the panel eyebrow, .7 on every other eyebrow, .72 on a service line.
   That is a good default and it stays: it is what keeps body copy from
   shouting as loudly as the headline above it, and it works against ANY
   background without having to know what the background is.

   What it must not do is override a member. Opacity fades ink into
   whatever sits behind it, so a chosen colour was arriving a few percent
   off on every channel and the picker was quietly lying.

   CSS cannot ask whether a variable was set, so cnDsnVars answers it:
   --cn-<level>cx is emitted as 1, and ONLY as 1, beside a colour the
   member actually chose. Nobody who has chosen nothing matches anything
   here, so every published site renders exactly as it does today. */
.cnsite.cn-dsn .cn-eyebrow { opacity: var(--cn-h4cx, .7); }
.cnsite.cn-dsn .cn-peb { opacity: var(--cn-h4cx, .82); }
.cnsite.cn-dsn .cn-pblock .cn-rich p { opacity: var(--cn-pcx, .84); }
.cnsite.cn-dsn .cn-svc p { opacity: var(--cn-p3cx, var(--cn-pcx, .72)); }
.cnsite.cn-dsn .cn-divlist p { opacity: var(--cn-pcx, .74); }

/* THE ROLE ANSWERS FIRST, exactly as it now does for the colour itself: a
   block told it is a P2 reads P2's flag and falls back through P1's before
   it falls back to the veil. Written out per role rather than indirected,
   because a var() chain cannot be assembled out of a class name. */
.cnsite.cn-dsn .cn-tp-p .cn-pblock .cn-rich p { opacity: var(--cn-pcx, .84); }
.cnsite.cn-dsn .cn-tp-p2 .cn-pblock .cn-rich p { opacity: var(--cn-p2cx, var(--cn-pcx, .84)); }
.cnsite.cn-dsn .cn-tp-p3 .cn-pblock .cn-rich p { opacity: var(--cn-p3cx, var(--cn-pcx, .84)); }
.cnsite.cn-dsn .cn-tye-h1 .cn-eyebrow, .cnsite.cn-dsn .cn-tye-h1 .cn-peb { opacity: var(--cn-h1cx, .82); }
.cnsite.cn-dsn .cn-tye-h2 .cn-eyebrow, .cnsite.cn-dsn .cn-tye-h2 .cn-peb { opacity: var(--cn-h2cx, .82); }
.cnsite.cn-dsn .cn-tye-h3 .cn-eyebrow, .cnsite.cn-dsn .cn-tye-h3 .cn-peb { opacity: var(--cn-h3cx, .82); }
.cnsite.cn-dsn .cn-tye-h4 .cn-eyebrow, .cnsite.cn-dsn .cn-tye-h4 .cn-peb { opacity: var(--cn-h4cx, .82); }
.cnsite.cn-dsn .cn-tcp-p .cn-svc p { opacity: var(--cn-pcx, .72); }
.cnsite.cn-dsn .cn-tcp-p2 .cn-svc p { opacity: var(--cn-p2cx, var(--cn-pcx, .72)); }
.cnsite.cn-dsn .cn-tcp-p3 .cn-svc p { opacity: var(--cn-p3cx, var(--cn-pcx, .72)); }


/* ---- THE INSIDE OF THE TWO BOXES - 30 August --------------------------
   "we really need the spacing for up, down, left and right. we need that
    in many diff places by numbers."

   Every number he spent the last hour circling lived here as a literal:
   30/28 inside the block, 22 inside a card, 16 over the block's button.
   The section's own four spacings could not reach any of it, so a member
   matching a reference site ran out of controls before they ran out of
   differences.

   EVERY DEFAULT IS THE NUMBER THAT WAS ALREADY THERE, so a layout with
   none of these keys renders byte-identical - the same promise the type
   levels shipped on. cnPadBits writes them onto the <section>, they
   inherit down, and an empty box writes no key at all.

   The phone rule is repeated rather than left to the desktop one: the
   block has always tightened to 24/20 under 780px, and a member who types
   nothing should keep that. A member who types something means it on both,
   which is what the same variable in both rules gives them. */
.cnsite .cn-pblock {
  padding: var(--cn-bpt, 30px) var(--cn-bpr, 28px)
           var(--cn-bpb, 30px) var(--cn-bpl, 28px);
}
.cnsite .cn-pblock .cn-btn { margin-top: var(--cn-bbg, 16px); }
.cnsite .cn-card {
  padding: var(--cn-cpt, 22px) var(--cn-cpr, 22px)
           var(--cn-cpb, 22px) var(--cn-cpl, 22px);
}
@media (max-width: 780px) {
  .cnsite .cn-pblock {
    padding: var(--cn-bpt, 24px) var(--cn-bpr, 20px)
             var(--cn-bpb, 24px) var(--cn-bpl, 20px);
  }
}

/* WHERE THE WORDS SIT IN IT. The block is a flex column with
   justify-content: center, and its height comes from the cards beside it -
   so the more cards there are, the more empty colour sits above and below
   the words. Middle carries a rule of its own rather than relying on the
   base one, so that going top and back again lands exactly where it
   started instead of on whatever the cascade happens to leave. */
.cnsite .cn-bva-top .cn-pblock { justify-content: flex-start; }
.cnsite .cn-bva-middle .cn-pblock { justify-content: center; }


/* ---- THE PHONE'S OWN BLOCK PADDING - 30 August ------------------------
   "on phone the block need it diff work like diff space or padding left,
    right, top, bottom" - he put the two sites side by side on a phone
   overnight and the block was the one thing that did not carry.

   Written AFTER the rule that shipped last night rather than replacing it,
   so the two are one edit apart in the file and the fallback chain reads
   in the order a member thinks in: what I typed for the phone, else what I
   typed for the computer, else what this block has always tightened to. */
@media (max-width: 780px) {
  .cnsite .cn-pblock {
    padding: var(--cn-bptm, var(--cn-bpt, 24px)) var(--cn-bprm, var(--cn-bpr, 20px))
             var(--cn-bpbm, var(--cn-bpb, 24px)) var(--cn-bplm, var(--cn-bpl, 20px));
  }
}

/* ---- BORDERS - 30 August ----------------------------------------------
   A gold rule down the left edge of his block, and a gold underline under
   NORRIS FIT. Neither was drawable.

   THE TOKEN BECOMES A VARIABLE FIRST, then one rule per side reads it.
   That is nine small rules instead of nine per side, and it is the same
   move the icon colours already make - a member renaming a palette colour
   repaints every border wearing it, with nothing to keep in step.

   currentColor IS THE HONEST FLOOR: a border with no colour chosen takes
   the ink of the box it is on, which is visible on any background without
   the stylesheet having to know what that background is. */
.cnsite .cn-bbc-c1 { --cn-bbcv: var(--cn-c1); }
.cnsite .cn-bbc-c2 { --cn-bbcv: var(--cn-c2); }
.cnsite .cn-bbc-c3 { --cn-bbcv: var(--cn-c3); }
.cnsite .cn-bbc-c4 { --cn-bbcv: var(--cn-c4); }
.cnsite .cn-bbc-c5 { --cn-bbcv: var(--cn-c5); }
.cnsite .cn-bbc-c6 { --cn-bbcv: var(--cn-c6); }
.cnsite .cn-bbc-cw { --cn-bbcv: #fff; }
.cnsite .cn-bbc-cg { --cn-bbcv: #f1f3f6; }
.cnsite .cn-bbc-ck { --cn-bbcv: #14181f; }
.cnsite .cn-cbc-c1 { --cn-cbcv: var(--cn-c1); }
.cnsite .cn-cbc-c2 { --cn-cbcv: var(--cn-c2); }
.cnsite .cn-cbc-c3 { --cn-cbcv: var(--cn-c3); }
.cnsite .cn-cbc-c4 { --cn-cbcv: var(--cn-c4); }
.cnsite .cn-cbc-c5 { --cn-cbcv: var(--cn-c5); }
.cnsite .cn-cbc-c6 { --cn-cbcv: var(--cn-c6); }
.cnsite .cn-cbc-cw { --cn-cbcv: #fff; }
.cnsite .cn-cbc-cg { --cn-cbcv: #f1f3f6; }
.cnsite .cn-cbc-ck { --cn-cbcv: #14181f; }
.cnsite .cn-ebrc-c1 { --cn-ebrcv: var(--cn-c1); }
.cnsite .cn-ebrc-c2 { --cn-ebrcv: var(--cn-c2); }
.cnsite .cn-ebrc-c3 { --cn-ebrcv: var(--cn-c3); }
.cnsite .cn-ebrc-c4 { --cn-ebrcv: var(--cn-c4); }
.cnsite .cn-ebrc-c5 { --cn-ebrcv: var(--cn-c5); }
.cnsite .cn-ebrc-c6 { --cn-ebrcv: var(--cn-c6); }
.cnsite .cn-ebrc-cw { --cn-ebrcv: #fff; }
.cnsite .cn-ebrc-cg { --cn-ebrcv: #f1f3f6; }
.cnsite .cn-ebrc-ck { --cn-ebrcv: #14181f; }

/* The block. 3px is the default width because a 1px accent rule reads as a
   hairline mistake and his own is 8. */
.cnsite .cn-bbs-all .cn-pblock { border: var(--cn-bbw, 3px) solid var(--cn-bbcv, currentColor); }
.cnsite .cn-bbs-top .cn-pblock { border-top: var(--cn-bbw, 3px) solid var(--cn-bbcv, currentColor); }
.cnsite .cn-bbs-right .cn-pblock { border-right: var(--cn-bbw, 3px) solid var(--cn-bbcv, currentColor); }
.cnsite .cn-bbs-bottom .cn-pblock { border-bottom: var(--cn-bbw, 3px) solid var(--cn-bbcv, currentColor); }
.cnsite .cn-bbs-left .cn-pblock { border-left: var(--cn-bbw, 3px) solid var(--cn-bbcv, currentColor); }

/* The card, which already carries a 1px hairline all round. A member who
   picks ONE side gets their accent there and keeps the hairline on the
   other three, which is what an accent stripe on a card actually is; a
   member who picks All replaces the hairline outright. */
.cnsite .cn-cbs-all .cn-card { border: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-top .cn-card { border-top: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-right .cn-card { border-right: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-bottom .cn-card { border-bottom: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-left .cn-card { border-left: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }

/* THE STYLE COMES AFTER THE SHORTHAND, which is the whole trick: it sets
   all four sides, but three of them have no width, so only the side the
   member chose can show it. */
.cnsite .cn-bby-dashed .cn-pblock { border-style: dashed; }
.cnsite .cn-bby-dotted .cn-pblock { border-style: dotted; }
.cnsite .cn-cby-dashed .cn-card { border-style: dashed; }
.cnsite .cn-cby-dotted .cn-card { border-style: dotted; }

/* ---- THE RULE UNDER THE SMALL LINE ------------------------------------
   Norris draws a short gold underline beneath NORRIS FIT, as wide as the
   words and not as wide as the column. So the line is an ::after on the
   eyebrow itself and the eyebrow shrinks to fit its own text - width:
   fit-content works inside the block's flex column and inside an ordinary
   one, which a display change would not.

   BOTH ONLY WHEN cn-ebr-set IS THERE. With no thickness typed there is no
   rule and no shrinking, so every published eyebrow is untouched.

   The rule shares the small line's opacity, because it is part of the
   small line rather than a thing standing near it - set a colour on H4 and
   both go to full strength together. */
.cnsite .cn-ebr-set .cn-eyebrow { width: fit-content; }
.cnsite .cn-ebr-set.cn-a-centre .cn-eyebrow { margin-left: auto; margin-right: auto; }
.cnsite .cn-ebr-set.cn-a-right .cn-eyebrow { margin-left: auto; }
.cnsite .cn-ebr-set .cn-eyebrow::after {
  content: ''; display: block;
  height: var(--cn-ebrw, 2px);
  width: var(--cn-ebrl, 100%);
  background: var(--cn-ebrcv, currentColor);
  margin-top: 7px;
}


/* ---- THE ROOM AROUND A BUTTON - 30 August -----------------------------
   "that should be more like part of a button like a Token, and not there,
    so this way every button can have the option for Button Spacing, Top,
    Bottom, Left, Right."

   bbg is gone. It was one field on one section type describing the gap
   over one button, which made the space a property of the BOX rather than
   of the button - so the same button in a different section had no way to
   sit the same. Four numbers per button, site-wide, beside the fill and
   the family, is the shape he asked for and the right one.

   b1 IS THE SOLID BUTTON AND b2 THE OUTLINED ONE, matched by the same
   :not() pair every other button property in this file uses, so a row
   holding one of each can space them differently.

   EVERY FALLBACK IS 0, which is what a button has always had. */
.cnsite.cn-dsn .cn-btn:not(.cn-ghost):not(.cn-inv),
.cnsite.cn-dsn a.cn-btn:not(.cn-ghost):not(.cn-inv) {
  margin: var(--cn-b1mt, 0) var(--cn-b1mr, 0) var(--cn-b1mb, 0) var(--cn-b1ml, 0);
}
.cnsite.cn-dsn .cn-btn.cn-ghost,
.cnsite.cn-dsn a.cn-btn.cn-ghost {
  margin: var(--cn-b2mt, 0) var(--cn-b2mr, 0) var(--cn-b2mb, 0) var(--cn-b2ml, 0);
}
/* THE PANEL'S BLOCK KEEPS ITS 16 UNTIL SOMEBODY SETS A TOP. That gap has
   been part of how the block looks since the panel was written, and
   dropping it to 0 the day this ships would move the button on every
   panel section on the site. One class deeper so it wins on the top edge
   only, and the moment a member types a top margin theirs takes over. */
.cnsite.cn-dsn .cn-pblock .cn-btn:not(.cn-ghost):not(.cn-inv) {
  margin-top: var(--cn-b1mt, 16px);
}
.cnsite.cn-dsn .cn-pblock .cn-btn.cn-ghost {
  margin-top: var(--cn-b2mt, 16px);
}


/* ---- ACCENT MARKS - 30 August -----------------------------------------
   The bar, rule or fill that goes with a heading. Four shapes, and the
   fourth one is his: a fill BEHIND the words rather than beside them.

   DRAWN WITH ::before, SO NO MARKUP CHANGED. An eyebrow is emitted in
   seven different places in this renderer and a heading in more; wrapping
   every one of them in a div to hang a bar off would have been seven
   chances to get it wrong and seven places to keep in step for ever. A
   pseudo-element needs none of them.

   THE ELEMENT BECOMES THE FRAME: position: relative, and padding on the
   side the mark sits on so the words move over by exactly the mark plus
   the gap. Nothing overlaps and nothing has to be measured.

   AUTO IS ABSENCE, as everywhere else here. A bar with no length stretches
   to the words (top: 0; bottom: 0; height: auto), so a two-line heading
   and a three-line heading are the same setting. A rule below with no
   length runs the width of the words - which is why these elements are
   width: fit-content, the trick the small-line rule already proved.

   EVERY FALLBACK IS THE VALUE OF NOT HAVING A MARK, so a member who has
   built none matches none of this and every published site is untouched. */

/* the small line above a heading */
.cnsite .cn-mke-leftbar .cn-eyebrow {
  position: relative;
  padding-left: calc(var(--cn-mke-t, 3px) + var(--cn-mke-g, 10px));
}
.cnsite .cn-mke-leftbar .cn-eyebrow::before {
  content: ''; position: absolute;
  background: var(--cn-mke-c, currentColor);
  border-radius: var(--cn-mke-r, 0);
  left: 0; top: 0; bottom: 0;
  width: var(--cn-mke-t, 3px);
  height: var(--cn-mke-l, auto);
}

.cnsite .cn-mke-leftrule .cn-eyebrow {
  position: relative;
  padding-left: calc(var(--cn-mke-l, 40px) + var(--cn-mke-g, 10px));
}
.cnsite .cn-mke-leftrule .cn-eyebrow::before {
  content: ''; position: absolute;
  background: var(--cn-mke-c, currentColor);
  border-radius: var(--cn-mke-r, 0);
  left: 0; top: 50%; transform: translateY(-50%);
  width: var(--cn-mke-l, 40px);
  height: var(--cn-mke-t, 3px);
}

.cnsite .cn-mke-rightbar .cn-eyebrow {
  position: relative;
  padding-right: calc(var(--cn-mke-t, 3px) + var(--cn-mke-g, 10px));
}
.cnsite .cn-mke-rightbar .cn-eyebrow::before {
  content: ''; position: absolute;
  background: var(--cn-mke-c, currentColor);
  border-radius: var(--cn-mke-r, 0);
  right: 0; top: 0; bottom: 0;
  width: var(--cn-mke-t, 3px);
  height: var(--cn-mke-l, auto);
}

.cnsite .cn-mke-rightrule .cn-eyebrow {
  position: relative;
  padding-right: calc(var(--cn-mke-l, 40px) + var(--cn-mke-g, 10px));
}
.cnsite .cn-mke-rightrule .cn-eyebrow::before {
  content: ''; position: absolute;
  background: var(--cn-mke-c, currentColor);
  border-radius: var(--cn-mke-r, 0);
  right: 0; top: 50%; transform: translateY(-50%);
  width: var(--cn-mke-l, 40px);
  height: var(--cn-mke-t, 3px);
}

.cnsite .cn-mke-above .cn-eyebrow {
  position: relative;
  width: fit-content;
  padding-top: calc(var(--cn-mke-t, 3px) + var(--cn-mke-g, 10px));
}
.cnsite .cn-mke-above .cn-eyebrow::before {
  content: ''; position: absolute;
  background: var(--cn-mke-c, currentColor);
  border-radius: var(--cn-mke-r, 0);
  left: 0; top: 0;
  width: var(--cn-mke-l, 100%);
  height: var(--cn-mke-t, 3px);
}

.cnsite .cn-mke-below .cn-eyebrow {
  position: relative;
  width: fit-content;
  padding-bottom: calc(var(--cn-mke-t, 3px) + var(--cn-mke-g, 10px));
}
.cnsite .cn-mke-below .cn-eyebrow::before {
  content: ''; position: absolute;
  background: var(--cn-mke-c, currentColor);
  border-radius: var(--cn-mke-r, 0);
  left: 0; bottom: 0;
  width: var(--cn-mke-l, 100%);
  height: var(--cn-mke-t, 3px);
}

.cnsite .cn-mke-behind .cn-eyebrow {
  width: fit-content;
  background: var(--cn-mke-c, transparent);
  padding: calc(var(--cn-mke-g, 10px) * .45) var(--cn-mke-g, 10px);
  border-radius: var(--cn-mke-r, 0);
}


/* the section heading itself */
.cnsite .cn-mkh-leftbar .cn-h {
  position: relative;
  padding-left: calc(var(--cn-mkh-t, 3px) + var(--cn-mkh-g, 10px));
}
.cnsite .cn-mkh-leftbar .cn-h::before {
  content: ''; position: absolute;
  background: var(--cn-mkh-c, currentColor);
  border-radius: var(--cn-mkh-r, 0);
  left: 0; top: 0; bottom: 0;
  width: var(--cn-mkh-t, 3px);
  height: var(--cn-mkh-l, auto);
}

.cnsite .cn-mkh-leftrule .cn-h {
  position: relative;
  padding-left: calc(var(--cn-mkh-l, 40px) + var(--cn-mkh-g, 10px));
}
.cnsite .cn-mkh-leftrule .cn-h::before {
  content: ''; position: absolute;
  background: var(--cn-mkh-c, currentColor);
  border-radius: var(--cn-mkh-r, 0);
  left: 0; top: 50%; transform: translateY(-50%);
  width: var(--cn-mkh-l, 40px);
  height: var(--cn-mkh-t, 3px);
}

.cnsite .cn-mkh-rightbar .cn-h {
  position: relative;
  padding-right: calc(var(--cn-mkh-t, 3px) + var(--cn-mkh-g, 10px));
}
.cnsite .cn-mkh-rightbar .cn-h::before {
  content: ''; position: absolute;
  background: var(--cn-mkh-c, currentColor);
  border-radius: var(--cn-mkh-r, 0);
  right: 0; top: 0; bottom: 0;
  width: var(--cn-mkh-t, 3px);
  height: var(--cn-mkh-l, auto);
}

.cnsite .cn-mkh-rightrule .cn-h {
  position: relative;
  padding-right: calc(var(--cn-mkh-l, 40px) + var(--cn-mkh-g, 10px));
}
.cnsite .cn-mkh-rightrule .cn-h::before {
  content: ''; position: absolute;
  background: var(--cn-mkh-c, currentColor);
  border-radius: var(--cn-mkh-r, 0);
  right: 0; top: 50%; transform: translateY(-50%);
  width: var(--cn-mkh-l, 40px);
  height: var(--cn-mkh-t, 3px);
}

.cnsite .cn-mkh-above .cn-h {
  position: relative;
  width: fit-content;
  padding-top: calc(var(--cn-mkh-t, 3px) + var(--cn-mkh-g, 10px));
}
.cnsite .cn-mkh-above .cn-h::before {
  content: ''; position: absolute;
  background: var(--cn-mkh-c, currentColor);
  border-radius: var(--cn-mkh-r, 0);
  left: 0; top: 0;
  width: var(--cn-mkh-l, 100%);
  height: var(--cn-mkh-t, 3px);
}

.cnsite .cn-mkh-below .cn-h {
  position: relative;
  width: fit-content;
  padding-bottom: calc(var(--cn-mkh-t, 3px) + var(--cn-mkh-g, 10px));
}
.cnsite .cn-mkh-below .cn-h::before {
  content: ''; position: absolute;
  background: var(--cn-mkh-c, currentColor);
  border-radius: var(--cn-mkh-r, 0);
  left: 0; bottom: 0;
  width: var(--cn-mkh-l, 100%);
  height: var(--cn-mkh-t, 3px);
}

.cnsite .cn-mkh-behind .cn-h {
  width: fit-content;
  background: var(--cn-mkh-c, transparent);
  padding: calc(var(--cn-mkh-g, 10px) * .45) var(--cn-mkh-g, 10px);
  border-radius: var(--cn-mkh-r, 0);
}


/* the heading on every card */
.cnsite .cn-mkc-leftbar .cn-card h4,
.cnsite .cn-mkc-leftbar .cn-svc h4 {
  position: relative;
  padding-left: calc(var(--cn-mkc-t, 3px) + var(--cn-mkc-g, 10px));
}
.cnsite .cn-mkc-leftbar .cn-card h4::before,
.cnsite .cn-mkc-leftbar .cn-svc h4::before {
  content: ''; position: absolute;
  background: var(--cn-mkc-c, currentColor);
  border-radius: var(--cn-mkc-r, 0);
  left: 0; top: 0; bottom: 0;
  width: var(--cn-mkc-t, 3px);
  height: var(--cn-mkc-l, auto);
}

.cnsite .cn-mkc-leftrule .cn-card h4,
.cnsite .cn-mkc-leftrule .cn-svc h4 {
  position: relative;
  padding-left: calc(var(--cn-mkc-l, 40px) + var(--cn-mkc-g, 10px));
}
.cnsite .cn-mkc-leftrule .cn-card h4::before,
.cnsite .cn-mkc-leftrule .cn-svc h4::before {
  content: ''; position: absolute;
  background: var(--cn-mkc-c, currentColor);
  border-radius: var(--cn-mkc-r, 0);
  left: 0; top: 50%; transform: translateY(-50%);
  width: var(--cn-mkc-l, 40px);
  height: var(--cn-mkc-t, 3px);
}

.cnsite .cn-mkc-rightbar .cn-card h4,
.cnsite .cn-mkc-rightbar .cn-svc h4 {
  position: relative;
  padding-right: calc(var(--cn-mkc-t, 3px) + var(--cn-mkc-g, 10px));
}
.cnsite .cn-mkc-rightbar .cn-card h4::before,
.cnsite .cn-mkc-rightbar .cn-svc h4::before {
  content: ''; position: absolute;
  background: var(--cn-mkc-c, currentColor);
  border-radius: var(--cn-mkc-r, 0);
  right: 0; top: 0; bottom: 0;
  width: var(--cn-mkc-t, 3px);
  height: var(--cn-mkc-l, auto);
}

.cnsite .cn-mkc-rightrule .cn-card h4,
.cnsite .cn-mkc-rightrule .cn-svc h4 {
  position: relative;
  padding-right: calc(var(--cn-mkc-l, 40px) + var(--cn-mkc-g, 10px));
}
.cnsite .cn-mkc-rightrule .cn-card h4::before,
.cnsite .cn-mkc-rightrule .cn-svc h4::before {
  content: ''; position: absolute;
  background: var(--cn-mkc-c, currentColor);
  border-radius: var(--cn-mkc-r, 0);
  right: 0; top: 50%; transform: translateY(-50%);
  width: var(--cn-mkc-l, 40px);
  height: var(--cn-mkc-t, 3px);
}

.cnsite .cn-mkc-above .cn-card h4,
.cnsite .cn-mkc-above .cn-svc h4 {
  position: relative;
  width: fit-content;
  padding-top: calc(var(--cn-mkc-t, 3px) + var(--cn-mkc-g, 10px));
}
.cnsite .cn-mkc-above .cn-card h4::before,
.cnsite .cn-mkc-above .cn-svc h4::before {
  content: ''; position: absolute;
  background: var(--cn-mkc-c, currentColor);
  border-radius: var(--cn-mkc-r, 0);
  left: 0; top: 0;
  width: var(--cn-mkc-l, 100%);
  height: var(--cn-mkc-t, 3px);
}

.cnsite .cn-mkc-below .cn-card h4,
.cnsite .cn-mkc-below .cn-svc h4 {
  position: relative;
  width: fit-content;
  padding-bottom: calc(var(--cn-mkc-t, 3px) + var(--cn-mkc-g, 10px));
}
.cnsite .cn-mkc-below .cn-card h4::before,
.cnsite .cn-mkc-below .cn-svc h4::before {
  content: ''; position: absolute;
  background: var(--cn-mkc-c, currentColor);
  border-radius: var(--cn-mkc-r, 0);
  left: 0; bottom: 0;
  width: var(--cn-mkc-l, 100%);
  height: var(--cn-mkc-t, 3px);
}

.cnsite .cn-mkc-behind .cn-card h4,
.cnsite .cn-mkc-behind .cn-svc h4 {
  width: fit-content;
  background: var(--cn-mkc-c, transparent);
  padding: calc(var(--cn-mkc-g, 10px) * .45) var(--cn-mkc-g, 10px);
  border-radius: var(--cn-mkc-r, 0);
}


/* CENTRED AND RIGHT SECTIONS. fit-content shrinks an element to its words,
   which left-aligns it inside a centred column unless it is told otherwise
   - the same correction the small-line rule needed. */
.cnsite .cn-a-centre.cn-mke-above .cn-eyebrow { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mke-above .cn-eyebrow { margin-left: auto; }
.cnsite .cn-a-centre.cn-mke-below .cn-eyebrow { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mke-below .cn-eyebrow { margin-left: auto; }
.cnsite .cn-a-centre.cn-mke-behind .cn-eyebrow { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mke-behind .cn-eyebrow { margin-left: auto; }
.cnsite .cn-a-centre.cn-mkh-above .cn-h { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mkh-above .cn-h { margin-left: auto; }
.cnsite .cn-a-centre.cn-mkh-below .cn-h { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mkh-below .cn-h { margin-left: auto; }
.cnsite .cn-a-centre.cn-mkh-behind .cn-h { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mkh-behind .cn-h { margin-left: auto; }
.cnsite .cn-a-centre.cn-mkc-above .cn-card h4,
.cnsite .cn-a-centre.cn-mkc-above .cn-svc h4 { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mkc-above .cn-card h4,
.cnsite .cn-a-right.cn-mkc-above .cn-svc h4 { margin-left: auto; }
.cnsite .cn-a-centre.cn-mkc-below .cn-card h4,
.cnsite .cn-a-centre.cn-mkc-below .cn-svc h4 { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mkc-below .cn-card h4,
.cnsite .cn-a-right.cn-mkc-below .cn-svc h4 { margin-left: auto; }
.cnsite .cn-a-centre.cn-mkc-behind .cn-card h4,
.cnsite .cn-a-centre.cn-mkc-behind .cn-svc h4 { margin-left: auto; margin-right: auto; }
.cnsite .cn-a-right.cn-mkc-behind .cn-card h4,
.cnsite .cn-a-right.cn-mkc-behind .cn-svc h4 { margin-left: auto; }


/* ---- WHAT AUTO MEANS: THE WORDS, OR THE BOX - 30 August ----------------
   "might need option to auto fit to text width, because every title will be
    diff width... or auto fit to table width, or they make their own rules."

   Three answers, and the default is the one that looks drawn for the
   heading it is under: as wide as the WORDS. That is what fit-content on
   the element buys, and why a rule under a two-word eyebrow and a rule
   under a six-word one are the same setting.

   FULL puts the element back to its natural width, so the mark runs the
   whole box - a band across the block rather than an underline. He had
   that on Norris by accident before this existed; now it is a press.

   The margins go back to zero with it: a fit-content element in a centred
   section is nudged with auto margins, and a full-width one must not be. */
.cnsite .cn-mke-full .cn-eyebrow { width: auto; margin-left: 0; margin-right: 0; }
.cnsite .cn-mkh-full .cn-h { width: auto; margin-left: 0; margin-right: 0; }
.cnsite .cn-mkc-full .cn-card h4,
.cnsite .cn-mkc-full .cn-svc h4 { width: auto; margin-left: 0; margin-right: 0; }


/* ==================== STYLE: SHAPE x DIRECTION - 31 August ==============
   "rather then doing each one like 4 times... i wonder there should just
    another option for direction with 4 option. this way we dont have to do
    too much design, and we can add more new design with just left and bottom
    as default."

   His call, and the right one. Shape and direction were always two stored
   keys (sh and w) - the gallery merged them for display. Un-merged, a new
   shape costs ONE tile instead of four, and the ones he wanted (two lines
   short-long, two lines long-short, a line each side) arrive as three rows
   in a table rather than twelve hand-written blocks.

   EVERYTHING BELOW IS GENERATED from that table, which is the point. Shape
   number seven is a row in gen_shapes.py, not typing. The old cn-mke-leftbar
   family above is now inert - nothing emits those names any more - and is
   left in place rather than cut out, because deleting 21 blocks by anchor is
   21 chances to mangle a byte for no behaviour change.

   NAMING: cn-mk<role>-<shape>-<direction>, plus cn-mk<role>-fill which has no
   direction because a fill has no side. Roles: e eyebrow, h heading, c card.
   flank offers only two directions - sides, or top and bottom - because
   "a line each side" on the left and on the right are the same picture. */
.cnsite .cn-mke-bar-left .cn-eyebrow{position:relative;padding-left:calc(var(--cn-mke-t,3px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-bar-left .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;top:0;bottom:0;width:var(--cn-mke-t,3px);height:var(--cn-mke-l,auto)}
.cnsite .cn-mke-bar-right .cn-eyebrow{position:relative;padding-right:calc(var(--cn-mke-t,3px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-bar-right .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);right:0;top:0;bottom:0;width:var(--cn-mke-t,3px);height:var(--cn-mke-l,auto)}
.cnsite .cn-mke-bar-above .cn-eyebrow{position:relative;width:fit-content;padding-top:calc(var(--cn-mke-t,3px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-bar-above .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;top:0;width:var(--cn-mke-l,100%);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-bar-below .cn-eyebrow{position:relative;width:fit-content;padding-bottom:calc(var(--cn-mke-t,3px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-bar-below .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;bottom:0;width:var(--cn-mke-l,100%);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-rule-left .cn-eyebrow{position:relative;padding-left:calc(var(--cn-mke-l,40px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-rule-left .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;top:50%;transform:translateY(-50%);width:var(--cn-mke-l,40px);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-rule-right .cn-eyebrow{position:relative;padding-right:calc(var(--cn-mke-l,40px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-rule-right .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);right:0;top:50%;transform:translateY(-50%);width:var(--cn-mke-l,40px);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-rule-above .cn-eyebrow{position:relative;width:fit-content;padding-top:calc(var(--cn-mke-t,3px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-rule-above .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;top:0;width:var(--cn-mke-l,100%);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-rule-below .cn-eyebrow{position:relative;width:fit-content;padding-bottom:calc(var(--cn-mke-t,3px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-rule-below .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;bottom:0;width:var(--cn-mke-l,100%);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-two-left .cn-eyebrow{position:relative;padding-left:calc(var(--cn-mke-l2,18px) + var(--cn-mke-g2,6px) + var(--cn-mke-l,40px) + var(--cn-mke-g,10px))}
.cnsite .cn-mke-two-left .cn-eyebrow::before{content:'';position:absolute;background:var(--cn-mke-c,currentColor);border-radius:var(--cn-mke-r,0);left:0;top:50%;transform:translateY(-50%);width:var(--cn-mke-l2,18px);height:var(--cn-mke-t,3px)}
.cnsite .cn-mke-two-left .cn-eyebrow::after{content:'';position:absolute;border-radius:var(--cn-mke-r,0);left:calc(var(--cn-mke-l2,18px) + var(--cn-mke-g2,6px));top:50%;transform:translateY(-50%);width:var(--cn-mke-l,40px);height:var(--cn-mke-t,3px);background:var(--cn-mke-c2,var(--cn-mke-c,currentColor))}


/* ============ STYLE: ONE GENERIC RULE, GEOMETRY FROM PHP - 31 August =====
   The first cut of this generated 144 CSS rules - every shape crossed with
   every direction crossed with every role - and came to 33 KB. It worked and
   it was wrong: 33 KB of near-identical blocks that differ only in which side
   a number lands on, carried by every member page for ever, and too bulky to
   push in one piece.

   SO THE GEOMETRY MOVED INTO PHP. There is one table in cnMkBits saying where
   each shape's parts sit, and the rules below just read custom properties and
   do as they are told. Fifteen blocks instead of a hundred and forty-four.

   WHAT THIS BUYS, beyond the bytes: shape number seven is a row in that table
   and NO CSS AT ALL. The old cn-mke-leftbar family, and the first cut of this
   one, are both inert now - nothing emits those names - and both are left
   where they are, because cutting dead rules out by anchor is a lot of
   chances to mangle a live byte for no change in behaviour.

   auto IS A REAL VALUE for left/right/top/bottom, so a part that should not
   be pinned on a side simply never has that property set and the fallback
   does the rest. That is why every position can be one line. */
.cnsite .cn-mke .cn-eyebrow{position:relative;padding:var(--cn-mke-p,0)}
.cnsite .cn-mke-fit .cn-eyebrow{width:fit-content}
.cnsite .cn-mke .cn-eyebrow::before{content:'';position:absolute;border-radius:var(--cn-mke-r,0);background:var(--cn-mke-c,currentColor);left:var(--cn-mke-bl,auto);right:var(--cn-mke-br,auto);top:var(--cn-mke-bt,auto);bottom:var(--cn-mke-bb,auto);width:var(--cn-mke-bw,auto);height:var(--cn-mke-bh,auto);transform:var(--cn-mke-btf,none)}
.cnsite .cn-mke .cn-eyebrow::after{content:'';position:absolute;display:var(--cn-mke-ad,none);border-radius:var(--cn-mke-r,0);background:var(--cn-mke-c2,var(--cn-mke-c,currentColor));left:var(--cn-mke-al,auto);right:var(--cn-mke-ar,auto);top:var(--cn-mke-at,auto);bottom:var(--cn-mke-ab,auto);width:var(--cn-mke-aw,auto);height:var(--cn-mke-ah,auto);transform:var(--cn-mke-atf,none)}
.cnsite .cn-mke-fill .cn-eyebrow{width:fit-content;background:var(--cn-mke-c,transparent);padding:var(--cn-mke-p,0);border-radius:var(--cn-mke-r,0);color:var(--cn-mke-ink,inherit) !important}
.cnsite .cn-mke-full .cn-eyebrow{width:auto}
.cnsite .cn-mkh .cn-h{position:relative;padding:var(--cn-mkh-p,0)}
.cnsite .cn-mkh-fit .cn-h{width:fit-content}
.cnsite .cn-mkh .cn-h::before{content:'';position:absolute;border-radius:var(--cn-mkh-r,0);background:var(--cn-mkh-c,currentColor);left:var(--cn-mkh-bl,auto);right:var(--cn-mkh-br,auto);top:var(--cn-mkh-bt,auto);bottom:var(--cn-mkh-bb,auto);width:var(--cn-mkh-bw,auto);height:var(--cn-mkh-bh,auto);transform:var(--cn-mkh-btf,none)}
.cnsite .cn-mkh .cn-h::after{content:'';position:absolute;display:var(--cn-mkh-ad,none);border-radius:var(--cn-mkh-r,0);background:var(--cn-mkh-c2,var(--cn-mkh-c,currentColor));left:var(--cn-mkh-al,auto);right:var(--cn-mkh-ar,auto);top:var(--cn-mkh-at,auto);bottom:var(--cn-mkh-ab,auto);width:var(--cn-mkh-aw,auto);height:var(--cn-mkh-ah,auto);transform:var(--cn-mkh-atf,none)}
.cnsite .cn-mkh-fill .cn-h{width:fit-content;background:var(--cn-mkh-c,transparent);padding:var(--cn-mkh-p,0);border-radius:var(--cn-mkh-r,0);color:var(--cn-mkh-ink,inherit) !important}
.cnsite .cn-mkh-full .cn-h{width:auto}
.cnsite .cn-mkc .cn-card h4, .cnsite .cn-mkc .cn-svc h4{position:relative;padding:var(--cn-mkc-p,0)}
.cnsite .cn-mkc-fit .cn-card h4, .cnsite .cn-mkc-fit .cn-svc h4{width:fit-content}
.cnsite .cn-mkc .cn-card h4::before, .cnsite .cn-mkc .cn-svc h4::before{content:'';position:absolute;border-radius:var(--cn-mkc-r,0);background:var(--cn-mkc-c,currentColor);left:var(--cn-mkc-bl,auto);right:var(--cn-mkc-br,auto);top:var(--cn-mkc-bt,auto);bottom:var(--cn-mkc-bb,auto);width:var(--cn-mkc-bw,auto);height:var(--cn-mkc-bh,auto);transform:var(--cn-mkc-btf,none)}
.cnsite .cn-mkc .cn-card h4::after, .cnsite .cn-mkc .cn-svc h4::after{content:'';position:absolute;display:var(--cn-mkc-ad,none);border-radius:var(--cn-mkc-r,0);background:var(--cn-mkc-c2,var(--cn-mkc-c,currentColor));left:var(--cn-mkc-al,auto);right:var(--cn-mkc-ar,auto);top:var(--cn-mkc-at,auto);bottom:var(--cn-mkc-ab,auto);width:var(--cn-mkc-aw,auto);height:var(--cn-mkc-ah,auto);transform:var(--cn-mkc-atf,none)}
.cnsite .cn-mkc-fill .cn-card h4, .cnsite .cn-mkc-fill .cn-svc h4{width:fit-content;background:var(--cn-mkc-c,transparent);padding:var(--cn-mkc-p,0);border-radius:var(--cn-mkc-r,0);color:var(--cn-mkc-ink,inherit) !important}
.cnsite .cn-mkc-full .cn-card h4, .cnsite .cn-mkc-full .cn-svc h4{width:auto}


/* ---- BORDERS, ONE SIDE AT A TIME - 3 September -------------------------
   The five rules above put the base trio on whichever side bbs names. These
   put a DIFFERENT trio on a single side, and they exist because his BBQ
   block wants a gold left edge beside a dark red dashed right one.

   NOTHING HERE MATCHES A SECTION THAT HAS NO OVERRIDE. cn-bbo-t and its
   seven siblings are emitted by cnOptCls only for a side a member has
   actually set, so a block already published matches none of this and is
   drawn by the rules above exactly as it was.

   EVERY VALUE IS A CHAIN OF THREE: this side, else the base, else what the
   block has always drawn. That is what makes a thicker left keep the colour
   chosen on All - the member set one thing and one thing changed.

   NINE COLOUR RULES PER SIDE, and the note on the base rules is right that
   this is the multiplication it avoided. It cannot be avoided here: four
   sides that may each wear a different token need four variables, and a
   class can only set one of them. Thirty-six short declarations per box is
   the honest price of the control he drew. */

/* The base line style under a name the per-side rules can read, so a side
   overriding only its thickness still inherits dashed from All. The two
   rules above keep setting border-style directly and are untouched - this
   adds a variable beside them and changes nothing on its own. */
.cnsite .cn-bby-dashed { --cn-bbyv: dashed; }
.cnsite .cn-bby-dotted { --cn-bbyv: dotted; }
.cnsite .cn-cby-dashed { --cn-cbyv: dashed; }
.cnsite .cn-cby-dotted { --cn-cbyv: dotted; }

.cnsite .cn-bbo-t .cn-pblock { border-top: var(--cn-bbwt, var(--cn-bbw, 3px))
    var(--cn-bbyvt, var(--cn-bbyv, solid))
    var(--cn-bbcvt, var(--cn-bbcv, currentColor)); }
.cnsite .cn-bbo-r .cn-pblock { border-right: var(--cn-bbwr, var(--cn-bbw, 3px))
    var(--cn-bbyvr, var(--cn-bbyv, solid))
    var(--cn-bbcvr, var(--cn-bbcv, currentColor)); }
.cnsite .cn-bbo-b .cn-pblock { border-bottom: var(--cn-bbwb, var(--cn-bbw, 3px))
    var(--cn-bbyvb, var(--cn-bbyv, solid))
    var(--cn-bbcvb, var(--cn-bbcv, currentColor)); }
.cnsite .cn-bbo-l .cn-pblock { border-left: var(--cn-bbwl, var(--cn-bbw, 3px))
    var(--cn-bbyvl, var(--cn-bbyv, solid))
    var(--cn-bbcvl, var(--cn-bbcv, currentColor)); }

.cnsite .cn-cbo-t .cn-card { border-top: var(--cn-cbwt, var(--cn-cbw, 3px))
    var(--cn-cbyvt, var(--cn-cbyv, solid))
    var(--cn-cbcvt, var(--cn-cbcv, currentColor)); }
.cnsite .cn-cbo-r .cn-card { border-right: var(--cn-cbwr, var(--cn-cbw, 3px))
    var(--cn-cbyvr, var(--cn-cbyv, solid))
    var(--cn-cbcvr, var(--cn-cbcv, currentColor)); }
.cnsite .cn-cbo-b .cn-card { border-bottom: var(--cn-cbwb, var(--cn-cbw, 3px))
    var(--cn-cbyvb, var(--cn-cbyv, solid))
    var(--cn-cbcvb, var(--cn-cbcv, currentColor)); }
.cnsite .cn-cbo-l .cn-card { border-left: var(--cn-cbwl, var(--cn-cbw, 3px))
    var(--cn-cbyvl, var(--cn-cbyv, solid))
    var(--cn-cbcvl, var(--cn-cbcv, currentColor)); }

.cnsite .cn-bbct-c1 { --cn-bbcvt: var(--cn-c1); }
.cnsite .cn-bbct-c2 { --cn-bbcvt: var(--cn-c2); }
.cnsite .cn-bbct-c3 { --cn-bbcvt: var(--cn-c3); }
.cnsite .cn-bbct-c4 { --cn-bbcvt: var(--cn-c4); }
.cnsite .cn-bbct-c5 { --cn-bbcvt: var(--cn-c5); }
.cnsite .cn-bbct-c6 { --cn-bbcvt: var(--cn-c6); }
.cnsite .cn-bbct-cw { --cn-bbcvt: #fff; }
.cnsite .cn-bbct-cg { --cn-bbcvt: #f1f3f6; }
.cnsite .cn-bbct-ck { --cn-bbcvt: #14181f; }
.cnsite .cn-bbcr-c1 { --cn-bbcvr: var(--cn-c1); }
.cnsite .cn-bbcr-c2 { --cn-bbcvr: var(--cn-c2); }
.cnsite .cn-bbcr-c3 { --cn-bbcvr: var(--cn-c3); }
.cnsite .cn-bbcr-c4 { --cn-bbcvr: var(--cn-c4); }
.cnsite .cn-bbcr-c5 { --cn-bbcvr: var(--cn-c5); }
.cnsite .cn-bbcr-c6 { --cn-bbcvr: var(--cn-c6); }
.cnsite .cn-bbcr-cw { --cn-bbcvr: #fff; }
.cnsite .cn-bbcr-cg { --cn-bbcvr: #f1f3f6; }
.cnsite .cn-bbcr-ck { --cn-bbcvr: #14181f; }
.cnsite .cn-bbcb-c1 { --cn-bbcvb: var(--cn-c1); }
.cnsite .cn-bbcb-c2 { --cn-bbcvb: var(--cn-c2); }
.cnsite .cn-bbcb-c3 { --cn-bbcvb: var(--cn-c3); }
.cnsite .cn-bbcb-c4 { --cn-bbcvb: var(--cn-c4); }
.cnsite .cn-bbcb-c5 { --cn-bbcvb: var(--cn-c5); }
.cnsite .cn-bbcb-c6 { --cn-bbcvb: var(--cn-c6); }
.cnsite .cn-bbcb-cw { --cn-bbcvb: #fff; }
.cnsite .cn-bbcb-cg { --cn-bbcvb: #f1f3f6; }
.cnsite .cn-bbcb-ck { --cn-bbcvb: #14181f; }
.cnsite .cn-bbcl-c1 { --cn-bbcvl: var(--cn-c1); }
.cnsite .cn-bbcl-c2 { --cn-bbcvl: var(--cn-c2); }
.cnsite .cn-bbcl-c3 { --cn-bbcvl: var(--cn-c3); }
.cnsite .cn-bbcl-c4 { --cn-bbcvl: var(--cn-c4); }
.cnsite .cn-bbcl-c5 { --cn-bbcvl: var(--cn-c5); }
.cnsite .cn-bbcl-c6 { --cn-bbcvl: var(--cn-c6); }
.cnsite .cn-bbcl-cw { --cn-bbcvl: #fff; }
.cnsite .cn-bbcl-cg { --cn-bbcvl: #f1f3f6; }
.cnsite .cn-bbcl-ck { --cn-bbcvl: #14181f; }

.cnsite .cn-cbct-c1 { --cn-cbcvt: var(--cn-c1); }
.cnsite .cn-cbct-c2 { --cn-cbcvt: var(--cn-c2); }
.cnsite .cn-cbct-c3 { --cn-cbcvt: var(--cn-c3); }
.cnsite .cn-cbct-c4 { --cn-cbcvt: var(--cn-c4); }
.cnsite .cn-cbct-c5 { --cn-cbcvt: var(--cn-c5); }
.cnsite .cn-cbct-c6 { --cn-cbcvt: var(--cn-c6); }
.cnsite .cn-cbct-cw { --cn-cbcvt: #fff; }
.cnsite .cn-cbct-cg { --cn-cbcvt: #f1f3f6; }
.cnsite .cn-cbct-ck { --cn-cbcvt: #14181f; }
.cnsite .cn-cbcr-c1 { --cn-cbcvr: var(--cn-c1); }
.cnsite .cn-cbcr-c2 { --cn-cbcvr: var(--cn-c2); }
.cnsite .cn-cbcr-c3 { --cn-cbcvr: var(--cn-c3); }
.cnsite .cn-cbcr-c4 { --cn-cbcvr: var(--cn-c4); }
.cnsite .cn-cbcr-c5 { --cn-cbcvr: var(--cn-c5); }
.cnsite .cn-cbcr-c6 { --cn-cbcvr: var(--cn-c6); }
.cnsite .cn-cbcr-cw { --cn-cbcvr: #fff; }
.cnsite .cn-cbcr-cg { --cn-cbcvr: #f1f3f6; }
.cnsite .cn-cbcr-ck { --cn-cbcvr: #14181f; }
.cnsite .cn-cbcb-c1 { --cn-cbcvb: var(--cn-c1); }
.cnsite .cn-cbcb-c2 { --cn-cbcvb: var(--cn-c2); }
.cnsite .cn-cbcb-c3 { --cn-cbcvb: var(--cn-c3); }
.cnsite .cn-cbcb-c4 { --cn-cbcvb: var(--cn-c4); }
.cnsite .cn-cbcb-c5 { --cn-cbcvb: var(--cn-c5); }
.cnsite .cn-cbcb-c6 { --cn-cbcvb: var(--cn-c6); }
.cnsite .cn-cbcb-cw { --cn-cbcvb: #fff; }
.cnsite .cn-cbcb-cg { --cn-cbcvb: #f1f3f6; }
.cnsite .cn-cbcb-ck { --cn-cbcvb: #14181f; }
.cnsite .cn-cbcl-c1 { --cn-cbcvl: var(--cn-c1); }
.cnsite .cn-cbcl-c2 { --cn-cbcvl: var(--cn-c2); }
.cnsite .cn-cbcl-c3 { --cn-cbcvl: var(--cn-c3); }
.cnsite .cn-cbcl-c4 { --cn-cbcvl: var(--cn-c4); }
.cnsite .cn-cbcl-c5 { --cn-cbcvl: var(--cn-c5); }
.cnsite .cn-cbcl-c6 { --cn-cbcvl: var(--cn-c6); }
.cnsite .cn-cbcl-cw { --cn-cbcvl: #fff; }
.cnsite .cn-cbcl-cg { --cn-cbcvl: #f1f3f6; }
.cnsite .cn-cbcl-ck { --cn-cbcvl: #14181f; }

.cnsite .cn-bbyt-solid { --cn-bbyvt: solid; }
.cnsite .cn-bbyt-dashed { --cn-bbyvt: dashed; }
.cnsite .cn-bbyt-dotted { --cn-bbyvt: dotted; }
.cnsite .cn-bbyr-solid { --cn-bbyvr: solid; }
.cnsite .cn-bbyr-dashed { --cn-bbyvr: dashed; }
.cnsite .cn-bbyr-dotted { --cn-bbyvr: dotted; }
.cnsite .cn-bbyb-solid { --cn-bbyvb: solid; }
.cnsite .cn-bbyb-dashed { --cn-bbyvb: dashed; }
.cnsite .cn-bbyb-dotted { --cn-bbyvb: dotted; }
.cnsite .cn-bbyl-solid { --cn-bbyvl: solid; }
.cnsite .cn-bbyl-dashed { --cn-bbyvl: dashed; }
.cnsite .cn-bbyl-dotted { --cn-bbyvl: dotted; }

.cnsite .cn-cbyt-solid { --cn-cbyvt: solid; }
.cnsite .cn-cbyt-dashed { --cn-cbyvt: dashed; }
.cnsite .cn-cbyt-dotted { --cn-cbyvt: dotted; }
.cnsite .cn-cbyr-solid { --cn-cbyvr: solid; }
.cnsite .cn-cbyr-dashed { --cn-cbyvr: dashed; }
.cnsite .cn-cbyr-dotted { --cn-cbyvr: dotted; }
.cnsite .cn-cbyb-solid { --cn-cbyvb: solid; }
.cnsite .cn-cbyb-dashed { --cn-cbyvb: dashed; }
.cnsite .cn-cbyb-dotted { --cn-cbyvb: dotted; }
.cnsite .cn-cbyl-solid { --cn-cbyvl: solid; }
.cnsite .cn-cbyl-dashed { --cn-cbyvl: dashed; }
.cnsite .cn-cbyl-dotted { --cn-cbyvl: dotted; }


/* ---- A PICTURE'S EDGE CAN BE DASHED TOO - 3 September ------------------
   cn-bd sets border-style: solid !important, so these have to carry the
   same weight to beat it. Solid needs no rule of its own - it is what
   cn-bd already draws, and it is what an absent key means. */
.cnsite .cn-by-dashed { border-style: dashed !important; }
.cnsite .cn-by-dotted { border-style: dotted !important; }

/* ---- THE FILLED EYEBROW SITS 2px HIGH - 3 September ---------------------
   "somting happen where norris fit text is not in the middle" - and it is
   not, but nothing today caused it and no padding number can fix it.

   MEASURED on the live element, p.cn-eyebrow.cn-peb:
     font 15px Roboto Condensed 500, line-height 15px, padding 4.5px 10px
     box top -> top of the letters   5.5px
     baseline -> box bottom          7.5px
   Padding is symmetric. What is not symmetric is the LINE BOX: it reserves
   room for descenders and for accents above the caps, and an uppercase
   eyebrow uses neither. So the ink sits high inside a box that is centred
   correctly, and raising the padding grows both sides equally - which is
   exactly why 8, 15 and 20 all felt the same to him.

   text-box trims the line box down to cap-height over baseline, so the
   padding is then measured from the LETTERS. Verified in the builder
   before this was written: 2.00px out becomes 0.33px out, and it holds at
   any padding. Behind @supports because it is recent; a browser without it
   gets exactly what it gets today, which is what shipped this morning.

   SCOPED TO cn-mke-fill, the shape he is using ("Fill behind the words").
   The bar and rule shapes draw a line beside the words rather than a box
   around them and have not been measured, so they are left alone. */
@supports (text-box: trim-both cap alphabetic) {
  .cnsite .cn-mke-fill .cn-eyebrow { text-box: trim-both cap alphabetic; }
}


/* ---- A PICTURE'S EDGES, ONE AT A TIME - 3 September ---------------------
   The whole of the per-side picture border, in four rules, because the
   values arrive as custom properties from cnBordVars rather than as a class
   per value. See the note beside that function for why.

   THE FALLBACK CHAIN IS THE SAME ONE THE BLOCK AND CARD USE and it is what
   makes All a default rather than a setting: this side's own value, then
   the base border's, then the theme's. An edge that has only a colour set
   still draws at the base thickness.

   These sit at the tail on purpose. cn-bs-all writes the border shorthand
   on all four sides at (0,2,0); these read (0,2,0) too, so being later is
   what lets one edge win over All without escalating anything. */
.cnsite .cn-ibo-t { border-top: var(--cn-ibwt, var(--cn-ibw, 3px))
    var(--cn-ibyt, var(--cn-iby, solid))
    var(--cn-ibct, var(--cn-ibc, currentColor)) !important; }
.cnsite .cn-ibo-r { border-right: var(--cn-ibwr, var(--cn-ibw, 3px))
    var(--cn-ibyr, var(--cn-iby, solid))
    var(--cn-ibcr, var(--cn-ibc, currentColor)) !important; }
.cnsite .cn-ibo-b { border-bottom: var(--cn-ibwb, var(--cn-ibw, 3px))
    var(--cn-ibyb, var(--cn-iby, solid))
    var(--cn-ibcb, var(--cn-ibc, currentColor)) !important; }
.cnsite .cn-ibo-l { border-left: var(--cn-ibwl, var(--cn-ibw, 3px))
    var(--cn-ibyl, var(--cn-iby, solid))
    var(--cn-ibcl, var(--cn-ibc, currentColor)) !important; }


/* ---- THE WHITE WEDGE ON A HEAVY EDGE - 3 September ----------------------
   "not sure why top top box puts white hairline or the border is not going
   all the right and left" - and he found the shape of it himself, picking
   the version with no hairline out of two.

   WHAT IT ACTUALLY IS, measured on his cards: .cn-card carries
   border: 1px solid var(--cn-boxline, var(--cn-line)) all the way round.
   Put 20px of dark red on one side and the browser joins the thick edge to
   the thin one on a DIAGONAL - so the last 20px at each end of the band is
   sliced off by that 1px, and whatever is behind the card shows through the
   wedge. In his theme the hairline computes to transparent, which is why it
   read as white rather than as a grey line.

   SO THE HAIRLINE COMES OFF, but only where it is genuinely in the way:
     - only on a card that HAS a per-side override (cn-cbo-*), so an
       ordinary card keeps its hairline on all four sides;
     - only on the sides that have NO override of their own, so an edge the
       member set is never touched;
     - and never on a card wearing a base border (cn-cbs-*), where all four
       sides are the member's own colour and the join is colour-to-colour
       rather than colour-to-hairline.

   :not() on the ancestor rather than a later rule, so these can sit at the
   tail beside everything else without having to outrank the marker rules -
   the two can never match the same side. */
/* NO ATTRIBUTE SELECTOR AND NO QUOTES - 3 September, second attempt.
   The first version guarded with :not([class*="cn-cbs-"]). Those rules are
   in the stored stylesheet byte-perfect and the browser's parsed sheet does
   not contain them at all - dropped somewhere between the two, and a
   double quote inside a selector is the only thing in them that BD's render
   path has any reason to touch. Written as five plain class negations
   instead: same meaning, nothing to escape. THE SYMPTOM WAS SILENT, which
   is the whole reason this is checked against the parsed sheet and not
   against the bytes. */
.cnsite .cn-cbo-r:not(.cn-cbo-t):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-b:not(.cn-cbo-t):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-l:not(.cn-cbo-t):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card { border-top-width: 0; }
.cnsite .cn-cbo-t:not(.cn-cbo-r):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-b:not(.cn-cbo-r):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-l:not(.cn-cbo-r):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card { border-right-width: 0; }
.cnsite .cn-cbo-t:not(.cn-cbo-b):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-r:not(.cn-cbo-b):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-l:not(.cn-cbo-b):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card { border-bottom-width: 0; }
.cnsite .cn-cbo-t:not(.cn-cbo-l):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-r:not(.cn-cbo-l):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card,
.cnsite .cn-cbo-b:not(.cn-cbo-l):not(.cn-cbs-all):not(.cn-cbs-top):not(.cn-cbs-right):not(.cn-cbs-bottom):not(.cn-cbs-left) .cn-card { border-left-width: 0; }


/* ---- AND THE OTHER FILLED EYEBROW SHAPES - 3 September ------------------
   cn-mke-fill got the cap-height trim earlier today and the text finally
   sits in the middle of its pill. The other shapes that paint a box behind
   the words have exactly the same 2px problem for exactly the same reason,
   and he asked for the old controls brought up to date everywhere.

   Only the shapes that draw a BOX. The bar and rule shapes put a line
   beside or under the words and have no box for the text to be centred in,
   so trimming their line box would move the words relative to that line for
   no gain. */
@supports (text-box: trim-both cap alphabetic) {
  .cnsite .cn-mke-behind .cn-eyebrow,
  .cnsite .cn-mke-full .cn-eyebrow { text-box: trim-both cap alphabetic; }
}

/* ---- CARDS BORDER ON LAYOUTS THAT HAVE NO CARDS - 4 September ----------
   Block & Checklist and Block & Photos have no .cn-card, so the Cards half
   of the Border group wrote its keys and nothing ever drew. His answer when
   asked: make Cards mean "whatever repeats in this layout" - the checklist
   ROW, the photo TILE - rather than hiding the control.

   The row is .cn-plist > div (.cn-ptick is the tick glyph inside it, not
   the row) and the tile is .cn-pshots > .cn-img. Both read the same custom
   properties the card rules already read, so colour, thickness and line
   style come from the section exactly as they do for a real card. */
.cnsite .cn-cbs-all .cn-plist > div, .cnsite .cn-cbs-all .cn-pshots > .cn-img { border: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-top .cn-plist > div, .cnsite .cn-cbs-top .cn-pshots > .cn-img { border-top: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-right .cn-plist > div, .cnsite .cn-cbs-right .cn-pshots > .cn-img { border-right: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-bottom .cn-plist > div, .cnsite .cn-cbs-bottom .cn-pshots > .cn-img { border-bottom: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cbs-left .cn-plist > div, .cnsite .cn-cbs-left .cn-pshots > .cn-img { border-left: var(--cn-cbw, 3px) solid var(--cn-cbcv, currentColor); }
.cnsite .cn-cby-dashed .cn-plist > div, .cnsite .cn-cby-dashed .cn-pshots > .cn-img { border-style: dashed; }
.cnsite .cn-cby-dotted .cn-plist > div, .cnsite .cn-cby-dotted .cn-pshots > .cn-img { border-style: dotted; }
.cnsite .cn-cbo-t .cn-plist > div, .cnsite .cn-cbo-t .cn-pshots > .cn-img { border-top: var(--cn-cbwt, var(--cn-cbw, 3px)) var(--cn-cbyvt, var(--cn-cbyv, solid)) var(--cn-cbcvt, var(--cn-cbcv, currentColor)); }
.cnsite .cn-cbo-r .cn-plist > div, .cnsite .cn-cbo-r .cn-pshots > .cn-img { border-right: var(--cn-cbwr, var(--cn-cbw, 3px)) var(--cn-cbyvr, var(--cn-cbyv, solid)) var(--cn-cbcvr, var(--cn-cbcv, currentColor)); }
.cnsite .cn-cbo-b .cn-plist > div, .cnsite .cn-cbo-b .cn-pshots > .cn-img { border-bottom: var(--cn-cbwb, var(--cn-cbw, 3px)) var(--cn-cbyvb, var(--cn-cbyv, solid)) var(--cn-cbcvb, var(--cn-cbcv, currentColor)); }
.cnsite .cn-cbo-l .cn-plist > div, .cnsite .cn-cbo-l .cn-pshots > .cn-img { border-left: var(--cn-cbwl, var(--cn-cbw, 3px)) var(--cn-cbyvl, var(--cn-cbyv, solid)) var(--cn-cbcvl, var(--cn-cbcv, currentColor)); }

/* ---- CARDS PER ROW ON THE CHECKLIST - 4 September ----------------------
   "it also have this, that doesn't do anything for this one, hmmm - or
   should it" - and it should. The checklist's items ARE cards: the Content
   tab manages them in the Cards group with Add a card, and cols is already
   stored for every section by $CNS_PROPS. The only reason the number did
   nothing here is that .cn-grid reads --cn-cols and .cn-plist never did.

   AUTO STAYS ONE PER ROW. The fallback is 1, not the 3 that .cn-grid uses,
   because a checklist read down a single column is what every stored layout
   already draws - so nothing published moves until a number is picked.
   Below 780px it collapses to one column, the same breakpoint the card
   grid uses, since two columns of ticks on a phone is unreadable. */
.cnsite .cn-plist { display: grid; grid-template-columns: repeat(var(--cn-cols, 1), minmax(0, 1fr)); column-gap: 26px; }
@media (max-width: 780px) {
  .cnsite .cn-plist { grid-template-columns: 1fr; }
  /* THE COUNT CLASS STAYS ON while the columns collapse, so the exception
     above has to be restated here - otherwise a phone draws a closing line
     under a list that never shows one on a computer. */
  .cnsite .cn-plist > div:last-child { border-bottom: 0; }
}

/* ---- THE CHECKLIST'S OWN COUNT AND ICONS - 4 September ----------------
   cn-lc-N carries the number rather than an inline style, because .cn-plist
   already takes a style attribute for the card border vars and a second one
   is not possible - and because .cn-panel .cn-plist[style] > div is a live
   rule, so always emitting a style attribute would silently repaint every
   hairline. The icon is sized down to the text: .cn-ico is a 50px tile in a
   card and that is the whole row's height here. */
.cnsite .cn-plist.cn-lc-2 { --cn-cols: 2; }
.cnsite .cn-plist.cn-lc-3 { --cn-cols: 3; }
.cnsite .cn-plist.cn-lc-4 { --cn-cols: 4; }
/* WHAT IS LEFT OF THE OLD RULE, and why the rest of it had to go. It sat
   at the very end of this file, so it beat the tile rules on source order
   and ignored --cn-isz - the marks came out as tiny accent squares whatever
   the member chose, which is what made the Icon group look missing rather
   than merely absent. Sizing and colour moved up to the cards' own rule.
   Only the vertical centring stays: a checklist row is a line of text, and
   the mark has to sit on it rather than at the top of it. */
/* ---- WHERE THE MARK SITS ON A CHECKLIST ROW ----------------------------
   TWO DIFFERENT JOBS UNDER ONE PROPERTY, which is why this is four rules
   and not one. In LEFT mode the row is a flex row and align-self centres
   the mark VERTICALLY on the line, which is what it was written for. The
   moment Top turns that row into a column the same declaration centres it
   HORIZONTALLY - so the first version of Top drew every mark in the middle
   of the row over left-aligned words, the exact thing the note on
   .cn-card > .cn-ico warns about.

   So: vertical centring only while the mark is beside the words, and in
   column mode the mark starts where the words start until Icon alignment
   says otherwise. */
.cnsite .cn-v-list.cn-ip-left .cn-plist .cn-ico { align-self: center; }
.cnsite .cn-v-list:not(.cn-ip-left) .cn-plist .cn-ico { align-self: flex-start; }
.cnsite .cn-v-list:not(.cn-ip-left).cn-ia-centre .cn-plist .cn-ico { align-self: center; }
.cnsite .cn-v-list:not(.cn-ip-left).cn-ia-right .cn-plist .cn-ico { align-self: flex-end; }

/* ---- AND ON A CARD OR A SERVICE TILE -----------------------------------
   Those marks are width:max-content inside a block, so an auto margin is
   what moves them - there is no flex line to align against. Same control,
   same two stored words, and the words in the card are untouched: they
   still answer to Text alignment, which is the section's own row. */
.cnsite .cn-ia-centre .cn-card > .cn-ico,
.cnsite .cn-ia-centre .cn-svc > .cn-ico { margin-left: auto; margin-right: auto; }
.cnsite .cn-ia-right .cn-card > .cn-ico,
.cnsite .cn-ia-right .cn-svc > .cn-ico { margin-left: auto; margin-right: 0; }

/* ---- AND TOP MEANS ABOVE THE WORDS HERE TOO - 4 September --------------
   Icon place has one stored value, 'left'; TOP IS THE ABSENCE OF IT, which
   is how the cards have always worked - a card stacks on its own and only
   needs telling when it should not. A checklist row is a flex ROW, so it
   drew the mark beside the words whichever way the control was set, and
   pressing Top did nothing:

     "i see the icon is there, top is not working"

   So the row becomes a column when nobody has asked for left. align-items
   moves from baseline - which is meaningless once the two are stacked - to
   the start of the line, and the alignment control sitting beside Top is
   what moves it from there. */
/* .cn-v-list, NOT .cn-panel - corrected on sight. cn-panel is on the SECTION
   and again on the row inside it, and the inner one carries no icon classes
   at all, so :not(.cn-ip-left) was always true somewhere up the chain and
   Left stopped working the moment Top started: "i see u made the top work
   and the color works. but now the left is not working. haha."
   The variant class exists once, on the section, which is where a question
   about the whole section belongs. */
.cnsite .cn-v-list:not(.cn-ip-left) .cn-plist > div {
  flex-direction: column; align-items: flex-start;
}

/* ---- A THIRD BUTTON STYLE - 4 September --------------------------------
   IT RIDES ON .cn-ghost RATHER THAN BESIDE IT. Button 1 is written as
   .cn-btn:not(.cn-ghost):not(.cn-inv), so a third class of its own would
   have matched Button 1 too and forced a :not(.cn-b3) into the one selector
   every published button on every member site already depends on. Carrying
   .cn-ghost as well means that selector is untouched and this rule, being
   more specific and later, simply wins over Button 2's.

   EVERY VARIABLE FALLS BACK TO BUTTON 2's, and Button 2's fall back to what
   they already did. An unset third style is a copy of the second, which is
   the only honest starting point - the member has not said anything about it
   yet - and it means adding the style to the panel changes nothing on any
   page until somebody chooses a colour.

   FILLED VERSUS OUTLINE NEEDED NO NEW MACHINERY. b2bg and b2bd have always
   been separate: a fill is a background with a matching border, an outline is
   a transparent background with a border of its own. The panel simply never
   offered them. */
/* THE FALLBACK TO BUTTON 2 IS GONE - 4 September. It was right when the
   third style was a copy waiting for a panel: an unset b3 wearing b2's
   colours changed nothing on any page. It is wrong now that b3 is a style a
   member picks in a list, because a Button 3 nobody has touched would wear
   whatever Button 2 happens to be - and changing Button 2 would silently
   repaint it. An untouched Button 3 is a plain outline button, which is what
   .cn-ghost has always been on its own. */
.cnsite.cn-dsn .cn-btn.cn-ghost.cn-b3 {
  background: var(--cn-b3bg, transparent);
  border-color: var(--cn-b3bd, currentColor);
  padding: var(--cn-b3p, var(--cn-bp));
  font-size: var(--cn-b3f, var(--cn-bf));
}
.cnsite.cn-dsn a.cn-btn.cn-ghost.cn-b3,
.cnsite.cn-dsn a.cn-btn.cn-ghost.cn-b3:link,
.cnsite.cn-dsn a.cn-btn.cn-ghost.cn-b3:visited,
.cnsite.cn-dsn a.cn-btn.cn-ghost.cn-b3:focus,
.cnsite.cn-dsn a.cn-btn.cn-ghost.cn-b3:active,
.cnsite.cn-dsn .cn-btn.cn-ghost.cn-b3 { color: var(--cn-b3ink, inherit); }
.cnsite.cn-dsn .cn-btn.cn-ghost.cn-b3:hover,
.cnsite.cn-dsn a.cn-btn.cn-ghost.cn-b3:hover {
  background: var(--cn-b3hv, var(--cn-b3bg, transparent));
  color: var(--cn-b3hi, var(--cn-b3ink, inherit));
  border-color: var(--cn-b3hbd, var(--cn-b3bd, currentColor));
  filter: none; opacity: var(--cn-b3op, .78);
}
/* THE ROW THE TOKEN DRAWS. .cn-btns is an inline-flex today, which cannot be
   pushed to the middle or the right of the column it stands in - so the row
   the Buttons block emits is a block-level flex that can. Its own class, not
   a change to .cn-btns, because every hero and panel on the site is already
   drawing that one and none of them asked to move. */
.cnsite .cn-btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cnsite .cn-btnrow.cn-bal-left { justify-content: flex-start; }
.cnsite .cn-btnrow.cn-bal-centre { justify-content: center; }
.cnsite .cn-btnrow.cn-bal-right { justify-content: flex-end; }


/* ---- AND IN LEFT MODE IT MOVES THE PAIR ---------------------------------
   With the mark beside the words there is nothing to align it against on its
   own - the two are one line - so Icon alignment moves the LINE inside its
   column. Same control, same two words, and the sentence a member would say
   out loud is the same either way: where does the icon sit. */
.cnsite .cn-v-list.cn-ip-left.cn-ia-centre .cn-plist > div { justify-content: center; }
.cnsite .cn-v-list.cn-ip-left.cn-ia-right .cn-plist > div { justify-content: flex-end; }


/* ---- THE CHECKLIST'S OWN TEXT ALIGNMENT - 4 September --------------------
   "saw one problem when icon is center text needs to be center. i saw we
    have Text alignment but that was moving the 1st block only, hmm? maybe
    we add 2 in there with title block and checklist?"

   IT WAS MOVING THE BLOCK ONLY BECAUSE THAT IS ALL text-align CAN MOVE
   HERE. Text alignment is text-align on the section; the block is normal
   flow and obeys it, but .cn-plist > div is a FLEX container, where the two
   children are placed by justify-content and align-items and text-align is
   never asked. The control was not skipping the checklist - it was landing
   on it with nothing to say.

   TWO PROPERTIES, BECAUSE THE ROW TURNS. On Top the row is a column, so the
   words move ACROSS it with align-items. On Left it is a row, so the mark
   and the words move ALONG it together with justify-content. text-align
   rides with both, for a label long enough to wrap onto a second line.

   THE MARK IS NOT MOVED BY THIS, and that is not luck: Icon alignment sets
   align-self on .cn-ico, and align-self beats the row's align-items every
   time. Two controls, two answers, neither one overruling the other - which
   is the whole reason there are two.

   .cn-v-list ANCHORS ALL OF IT, the same correction Icon place needed:
   .cn-panel is on the section AND on the row inside it, and the variant
   class exists exactly once. It also means a stray lstal left behind by a
   member who switched to Block & Cards draws nothing at all. */
.cnsite .cn-v-list:not(.cn-ip-left).cn-la-left .cn-plist > div { align-items: flex-start; text-align: left; }
.cnsite .cn-v-list:not(.cn-ip-left).cn-la-centre .cn-plist > div { align-items: center; text-align: center; }
.cnsite .cn-v-list:not(.cn-ip-left).cn-la-right .cn-plist > div { align-items: flex-end; text-align: right; }
.cnsite .cn-v-list.cn-ip-left.cn-la-left .cn-plist > div { justify-content: flex-start; text-align: left; }
.cnsite .cn-v-list.cn-ip-left.cn-la-centre .cn-plist > div { justify-content: center; text-align: center; }
.cnsite .cn-v-list.cn-ip-left.cn-la-right .cn-plist > div { justify-content: flex-end; text-align: right; }


/* ---- HEADING REACHES THE CHECKLIST'S LABEL TOO - 4 September ------------
   "i the checklist noticed these are not working."

   The Cards group prints Heading and Text for every layout that has cards,
   and a checklist HAS cards - the Content tab manages them in that same
   group, with Add a card and all. But the level rules were written against
   the card's markup, .cn-card h4 and .cn-card p, and a checklist row is
   neither: it is a div with the mark in one span and the words in the next.
   So the class landed on the section and found nothing to style.

   THE LABEL IS THE CARD'S HEADING, drawn plainly rather than as an h4. Six
   list rows would otherwise put six headings into the outline of the page
   for no reason - but it is the same ROLE, so it wears the same levels, and
   :last-child names it without the renderer having to grow a class.

   TEXT HAS NO SECOND HALF HERE, so the panel stops offering it rather than
   this file pretending: a checklist row draws the card's title and stops.
   A control with nothing under it is worse than a missing one. */
.cnsite.cn-dsn .cn-tch-h1 .cn-plist .cn-ptx > span {
  font-size: var(--cn-h1s, 44px);
  font-family: var(--cn-h1f, var(--cn-fh));
  font-weight: var(--cn-h1w, var(--cn-wh));
  line-height: var(--cn-h1lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h1lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tch-h2 .cn-plist .cn-ptx > span {
  font-size: var(--cn-h2s, 30px);
  font-family: var(--cn-h2f, var(--cn-fh));
  font-weight: var(--cn-h2w, var(--cn-wh));
  line-height: var(--cn-h2lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h2lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tch-h3 .cn-plist .cn-ptx > span {
  font-size: var(--cn-h3s, 21px);
  font-family: var(--cn-h3f, var(--cn-fh));
  font-weight: var(--cn-h3w, var(--cn-wh));
  line-height: var(--cn-h3lh, var(--cn-hlh, 1.12));
  letter-spacing: var(--cn-h3lt, var(--cn-hlt, -.022em));
}
.cnsite.cn-dsn .cn-tch-h4 .cn-plist .cn-ptx > span {
  font-size: var(--cn-h4s, var(--cn-ebs, 12.5px));
  font-family: var(--cn-h4f, var(--cn-fh));
  font-weight: var(--cn-h4w, var(--cn-wh));
  line-height: var(--cn-h4lh, normal);
  letter-spacing: var(--cn-h4lt, var(--cn-eblt, .14em));
}


/* ---- THE CHECKLIST'S WORDS, NOW THAT THERE CAN BE TWO LINES OF THEM ----
   4 September. "this a check link, but it has text also but it doesn't
   show." The renderer prints the description now, inside .cn-ptx with the
   title, so the row is a mark beside a BOX of words rather than a mark
   beside a word. min-width:0 is what lets that box be narrower than its
   longest word instead of pushing the column open.

   THE DESCRIPTION HAS ITS OWN QUIET DEFAULT and answers to the Cards
   group's Text row on top of it - the level rules below are the same five
   properties the card's own paragraph reads, pointed at this element. */
.cnsite .cn-plist .cn-ptx { min-width: 0; }
.cnsite .cn-plist .cn-ptx > p {
  margin: 3px 0 0; font-size: 14px; line-height: 1.5; opacity: .78;
}
.cnsite.cn-dsn .cn-tcp-p .cn-plist .cn-ptx > p {
  font-size: var(--cn-ps, 16px);
  font-family: var(--cn-pf, var(--cn-fb));
  font-weight: var(--cn-pw, 400);
  line-height: var(--cn-plh, 1.7);
  letter-spacing: var(--cn-plt, normal);
}
.cnsite.cn-dsn .cn-tcp-p2 .cn-plist .cn-ptx > p {
  font-size: var(--cn-pls, 18px);
  font-family: var(--cn-p2f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p2w, var(--cn-pw, 400));
  line-height: var(--cn-p2lh, var(--cn-p2lhd, 1.6));
  letter-spacing: var(--cn-p2lt, normal);
}
.cnsite.cn-dsn .cn-tcp-p3 .cn-plist .cn-ptx > p {
  font-size: var(--cn-cps, 14px);
  font-family: var(--cn-p3f, var(--cn-pf, var(--cn-fb)));
  font-weight: var(--cn-p3w, var(--cn-pw, 400));
  line-height: var(--cn-p3lh, 1.55);
  letter-spacing: var(--cn-p3lt, normal);
}

/* ---- AND A WAY TO HAVE NO MARK AT ALL - 4 September --------------------
   "i wonder if we need toggle with on/off. someone might not want icons."

   BOTH KINDS OF MARK GO, because on a checklist there are two: the icon a
   member chose, and the tick the renderer falls back to when they chose
   none. Only hiding .cn-ico would have left the ticks behind on exactly the
   list the switch was asked for.

   display:none rather than opacity or a colour, so the gap goes with it and
   the words close up against the edge - which is what "no icons" looks
   like. Absence of the class means on, so nothing published moves. */
.cnsite .cn-io-off .cn-ico,
.cnsite .cn-io-off .cn-ptick { display: none; }


/* ---- THE CONTACT DETAILS LIST, ALIGNED AND HANGING STRAIGHT - 4 Sept ----
   "the Details only in the contact needs some work and fixing now."

   TWO FAULTS, AND NEITHER IS THE ALIGNMENT CONTROL.

   THE BOX NEVER MOVED. .cn-dl is an inline-block sitting inside .cn-narrow,
   and .cn-narrow is a 760px column with auto margins - so Text alignment
   moved the WORDS inside the box while the box itself stayed pinned in the
   middle of the section. That is the empty space he circled to the left of
   the list while the heading above it sat hard left. The column unpins on
   left and on right; on centre it is already where it belongs.

   AND THE SECOND LINE OF HOURS STARTED AT THE EDGE. Hours is one field with
   line breaks in it, and the label was a 92px inline-block - so the first
   line cleared it and every line after it began at the box edge, under the
   label instead of under the value. "Saturday" and "Sunday" hanging out to
   the left is that, and a real two-column row fixes it by construction: the
   value is ONE cell, and everything in it wraps inside that cell.

   THE LABEL READS RIGHT AND THE VALUE READS LEFT whichever way the section
   is set. That is what the centred version has always drawn, it is what a
   list of label-and-value wants, and it means the three alignments move the
   BOX rather than reshuffling what is inside it. */
.cnsite .cn-a-left.cn-v-details .cn-narrow,
.cnsite .cn-a-justify.cn-v-details .cn-narrow { margin-left: 0; margin-right: auto; }
.cnsite .cn-a-right.cn-v-details .cn-narrow { margin-left: auto; margin-right: 0; }

/* ---- AND RIGHT IS A MIRROR, NOT A NUDGE - 4 September -------------------
   "right and full dont really work for tis one."

   They did not, and for two different reasons.

   FULL WAS THE EASY HALF. Justify means nothing to a list of labels and
   values, so the stylesheet has always drawn it as left - but the BOX that
   carries the list stayed pinned in the middle, so the words went left and
   the box did not. It joins the left rule above, where it always belonged.

   RIGHT NEEDED THE WHOLE ROW TURNED ROUND. Moving the box to the right edge
   while the label column stays on the left of the value gives a list that
   SITS right and READS from the wrong side - every label trailing off into
   the middle of the page with its value hard against the edge. Mirrored,
   the value comes first and the label follows it, and the column of labels
   lands on the edge where the eye already is. That is what a right-hung
   label list looks like when somebody means it. */
.cnsite .cn-a-right.cn-v-details .cn-dl > div {
  grid-template-columns: minmax(0, 1fr) 92px; text-align: right;
}
.cnsite .cn-a-right.cn-v-details .cn-dl > div > b { order: 2; text-align: left; }
.cnsite .cn-dl > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 10px; align-items: baseline; text-align: left;
}
.cnsite .cn-dl > div > b {
  display: block; min-width: 0; text-align: right;
}

/* CN-ABOUTBTN - the About section can carry the Buttons token now. It has
   no row of its own to inherit spacing from, so give one a little air off
   the paragraph above it; the moment Button space is typed, the inline
   margin the renderer writes takes over. */
.cnsite .cn-about .cn-btnrow { margin-top: 18px; }
/* CN-ABOUTBTN END */

/* ---------------------------------------------------------------------------
   EMBED section  -  site-side styles (widget 66 widget_style)

   Paired with cnEmbedSection() in the renderer. Every class below is emitted
   by that function and nothing else emits them, so this block can be read on
   its own.

   700px is the stack breakpoint because it is already the most used one in
   this file (four rules), not because it is a nicer number. One breakpoint
   language per stylesheet or the page stacks in two places at once.
   --------------------------------------------------------------------------- */

/* The block. Padding comes from the section chrome above it, so there is none
   here - a second source of vertical space is how sections end up with double
   gaps that nobody can find. */
.cn-emb { display: block; }

/* Words above the media, centred, measure held so a long paragraph does not
   run the full width of a desktop screen. */
.cn-emb-auto > .cn-emb-words,
.cn-emb-narrow > .cn-emb-words { text-align: center; margin: 0 auto 16px; max-width: 46em; }

/* Contained: narrower than the band, still centred. 760px rather than a
   percentage so it stops growing on very wide screens, which is the whole
   point of choosing it over Auto. */
.cn-emb-narrow > .cn-emb-box { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Split columns. align-items: center so a short paragraph sits against the
   middle of the video rather than floating at its top edge. */
.cn-emb-half,
.cn-emb-twofifth { display: grid; gap: 24px; align-items: center; }
.cn-emb-half { grid-template-columns: 1fr 1fr; }
.cn-emb-twofifth { grid-template-columns: 2fr 3fr; }

/* Swap is column order, not source order. The renderer always writes words
   first so that when these stack on a phone the reading order is
   title-then-media either way round. */
.cn-emb-swap > .cn-emb-words { order: 2; }
.cn-emb-swap > .cn-emb-box { order: 1; }

/* The media box.
   Ratio is padding-top rather than aspect-ratio: this runs on whatever phone
   the member's customers actually own, and a padding box has never not
   worked. overflow hidden is what stops an oversized payload widening the
   page - the one failure that is visible on every section, not just this one. */
.cn-emb-box { position: relative; width: 100%; overflow: hidden; border-radius: 5px; background: rgba(0,0,0,.04); }
.cn-emb-fixed { height: 0; }
.cn-emb-free { min-height: 160px; }
/* A SCHEDULER NEEDS A MONTH GRID AND A TIME COLUMN. 160px is the floor for an
   unknown payload; 720 is what Acuity and Calendly both ask for. */
.cn-emb-tall { min-height: 720px; }
/* inherit, not 720: the section may carry its own min-height inline, taken
   from the height the vendor stated in the pasted snippet. A hard 720 here
   would leave the frame short inside a taller box and it would scroll
   inside itself - which is exactly what it did. */
.cn-emb-free.cn-emb-tall > iframe,
.cn-emb-free.cn-emb-tall > object,
.cn-emb-free.cn-emb-tall > embed { min-height: inherit; }
.cn-emb-bord { border: 1px solid rgba(0,0,0,.12); }

/* Everything the member can put in here fills the box. Selecting on the box
   rather than on .cn-emb-if as well, because a provider that swaps its iframe
   for an object or a div on some browser should not fall out of the frame. */
.cn-emb-fixed > iframe,
.cn-emb-fixed > object,
.cn-emb-fixed > embed,
.cn-emb-fixed > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
.cn-emb-free > iframe,
.cn-emb-free > object,
.cn-emb-free > embed,
.cn-emb-free > video { width: 100%; min-height: 160px; border: 0; display: block; }

/* BD SWAPS OUR PROVIDER IFRAME FOR ITS OWN LAZY PLAYER, and that player is a
   DIV, not an iframe - so the absolute-fill rules above never reached it. On
   a ratio box (height:0 + padding-top) its play button then computed against
   a zero-height content box and landed ~150px BELOW the video, where nobody
   can click it. Measured in the live page: box 256-609, button at 762.
   Fill the wrapper the same way the iframe is filled and it lands correctly. */
.cn-emb-fixed > .youtube-lazy-outer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  margin: 0;
}
.cn-emb-fixed > .youtube-lazy-outer > .youtube-lazy-container {
  width: 100%; height: 100%;
}

/* Words. Colours come from the member's own tokens so an embed block matches
   whatever palette they picked, exactly like every other section. */
.cn-emb-h { margin: 0 0 8px; font-size: 1.4em; line-height: 1.2; color: var(--cn-h, inherit); }
.cn-emb-p { margin: 0; line-height: 1.55; color: var(--cn-t, inherit); }
/* the rich-text box emits its own paragraphs */
.cn-emb-p > p { margin: 0 0 .6em; }
.cn-emb-p > p:last-child { margin-bottom: 0; }
.cn-emb-words > .cn-emb-h + .cn-emb-p { margin-top: 6px; }

/* Hide-on. Written as display:none on a media query rather than a visibility
   class, so the space collapses too - a member hiding an embed on phones
   means "do not leave a hole there". */
@media (max-width: 700px) {
  .cn-emb-half,
  .cn-emb-twofifth { grid-template-columns: 1fr; gap: 16px; }
  /* Stacked, the swap has nothing to swap - reset it so the order is always
     words then media on a phone regardless of the desktop arrangement. */
  .cn-emb-swap > .cn-emb-words,
  .cn-emb-swap > .cn-emb-box { order: 0; }
  .cn-emb-half > .cn-emb-words,
  .cn-emb-twofifth > .cn-emb-words { text-align: left; }
  .cn-emb-nophone { display: none; }
}
@media (min-width: 701px) {
  .cn-emb-nodesk { display: none; }
}


/* ================= THE SLIDE TABS - 24 September =================

   His reference was adobe.com: under the photograph, a row of named cards,
   one per slide, each with its icon; the live one turns solid and a line
   fills along its bottom edge until the next slide; a round pause button
   at the end of the row. Drawn by cn_page.php only when the member picks
   Tabs, so no stored hero changes.

   THEY SIT ON THE BAND, like the dots do, and the band grows at the bottom
   to make room - a row of 64px cards laid over the last line of somebody's
   paragraph is the one way this could look broken.

   TWO LOOKS, and the photograph decides which. Over a photo the dark
   scrim is known, so the cards are dark glass and the live one is white.
   On a flat band the background could be any colour the member picked, so
   the cards are drawn in currentColor at low strength and the live one is
   the same, stronger - which is readable on every colour cnInk already
   made readable. Corners are 5px: two sizes only, 3 and 5.               */
.cnsite .cn-hadv-hastabs .cn-hadv-slide { padding-bottom: 150px; }
.cnsite .cn-hadv-tabs {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 2;
  display: flex; gap: 12px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 0 28px; box-sizing: border-box;
}
.cnsite .cn-hadv-tabs[hidden] { display: none; }
.cnsite .cn-hadv-trow { flex: 1 1 auto; min-width: 0; display: flex; gap: 12px; }
.cnsite .cn-hadv-tab {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0; width: auto; height: 64px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; box-sizing: border-box;
  border-radius: 5px; border: 1px solid rgba(128, 128, 128, .35);
  background: rgba(128, 128, 128, .10); color: inherit; opacity: 1;
  font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.cnsite .cn-hadv-tab:hover { background: rgba(128, 128, 128, .2); opacity: 1; }
.cnsite .cn-hadv-tab.is-on { background: rgba(128, 128, 128, .28); border-color: rgba(128, 128, 128, .5); font-weight: 700; opacity: 1; }
.cnsite .cn-hadv-tab:focus-visible,
.cnsite .cn-hadv-pz:focus-visible { outline: 3px solid var(--cn-accent, #2563eb); outline-offset: 2px; }
.cnsite .cn-hadv-tico { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.cnsite .cn-hadv-tico svg, .cnsite .cn-hadv-tico img { width: 22px; height: 22px; }
.cnsite .cn-hadv-tlab { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnsite .cn-hadv-tgo { flex: none; display: flex; opacity: .7; }
.cnsite .cn-hadv-tgo svg { width: 14px; height: 14px; }
.cnsite .cn-hadv-tbar {
  position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
  background: var(--cn-accent, #2563eb);
}
.cnsite .cn-hadv-tbar.go { animation: cnHadvBar var(--cn-hadv-every, 6s) linear forwards; }
.cnsite .cn-hadv-held .cn-hadv-tbar.go { animation-play-state: paused; }
@keyframes cnHadvBar { from { width: 0; } to { width: 100%; } }

/* over the photograph: dark glass, and the live card white */
.cnsite .cn-hadv-behind .cn-hadv-tab { background: rgba(8, 12, 20, .55); border-color: rgba(255, 255, 255, .22); color: #fff; }
.cnsite .cn-hadv-behind .cn-hadv-tab:hover { background: rgba(8, 12, 20, .72); }
.cnsite .cn-hadv-behind .cn-hadv-tab.is-on { background: #fff; border-color: #fff; color: #10161f; }

.cnsite .cn-hadv-pz {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(128, 128, 128, .28); color: inherit;
}
.cnsite .cn-hadv-behind .cn-hadv-pz { background: rgba(8, 12, 20, .6); color: #fff; }
.cnsite .cn-hadv-pz svg { width: 20px; height: 20px; fill: currentColor; }
.cnsite .cn-hadv-pz[data-on='1'] .cn-hadv-pz2,
.cnsite .cn-hadv-pz[data-on='0'] .cn-hadv-pz1 { display: none; }

/* A PHONE: the row scrolls sideways instead of squeezing seven names into
   390px, the icon goes if it has to, and the band makes less room. */
@media (max-width: 760px) {
  .cnsite .cn-hadv-hastabs .cn-hadv-slide { padding-bottom: 104px; }
  .cnsite .cn-hadv-tabs { bottom: 18px; padding: 0 16px; gap: 8px; }
  .cnsite .cn-hadv-trow { overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .cnsite .cn-hadv-trow::-webkit-scrollbar { display: none; }
  .cnsite .cn-hadv-tab { flex: 0 0 auto; height: 48px; max-width: 70vw; font-size: 14px; padding: 0 12px; }
  .cnsite .cn-hadv-tgo { display: none; }
  .cnsite .cn-hadv-pz { width: 44px; height: 44px; }
}
/* ICON ABOVE THE NAME - the adobe.com card: the icon on its own line at
   the top left, the name and arrow on the line under it. The card grows to
   hold two lines and the band makes that much more room. A slide with no
   icon still lines its name up with the others on the bottom line. */
.cnsite .cn-hadv-tabtop.cn-hadv-hastabs .cn-hadv-slide { padding-bottom: 172px; }
.cnsite .cn-hadv-tabtop .cn-hadv-tab {
  height: 86px; flex-wrap: wrap; align-content: flex-end; row-gap: 10px; padding-bottom: 16px;
}
.cnsite .cn-hadv-tabtop .cn-hadv-tico { flex: 0 0 100%; justify-content: flex-start; }
@media (max-width: 760px) {
  .cnsite .cn-hadv-tabtop.cn-hadv-hastabs .cn-hadv-slide { padding-bottom: 122px; }
  .cnsite .cn-hadv-tabtop .cn-hadv-tab { height: 70px; row-gap: 6px; padding-bottom: 12px; }
  .cnsite .cn-hadv-tabtop .cn-hadv-tico { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cnsite .cn-hadv-tbar.go { animation: none; width: 0; }
}

/* ================= THE BIG PANEL (mega menu) - 24 September =================

   His reference was adobe.com's Apps menu, drawn on the texnav.com canvas:
   a wide panel under the header, columns with a small title each, every
   entry an icon, a name and one short line. It is the SAME ROWS as a list
   drop-down - a parent is switched to a panel in the Pages drawer - so a
   member who never switches one gets none of these selectors matching.

   WHAT IT HANGS FROM. A list drop-down hangs from its own parent link. A
   panel hangs from the BAR: the group and its slot go static so the
   nearest positioned box is the bar (.cn-pbar) or, on the classic header,
   the header itself - both already position:relative through the
   :has(.cn-navgrp) rules above. Centred in that box and capped at the
   page width, so a parent at the far left of the bar still opens a panel
   that is on screen. A centred slot (.cn-sl-c) carries a transform and
   keeps the panel regardless - its centre is the page centre, which is
   the same answer.

   THE BRIDGE is taller than a list's 8px because the gap is now from the
   parent word down to the bottom of the bar, not a fixed 8px. */
@media (min-width: 761px) {
  .cnsite .cn-head .cn-navgrp.cn-mega { position: static; }
  .cnsite .cn-head .cn-sl:has(.cn-mega) { position: static; }
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap {
    top: 100%; left: 50%; right: auto; transform: translateX(-50%);
    /* AS WIDE AS WHAT IS IN IT, like his CNTX panels - two columns make a
       compact card, five make a wide one - never wider than the page. */
    width: max-content; max-width: min(1120px, calc(100vw - 32px)); min-width: 0;
    padding: 0; border-top-width: 3px;
    border-radius: 0 0 var(--cn-ri, var(--cn-cr, 10px)) var(--cn-ri, var(--cn-cr, 10px));
  }
  .cnsite .cn-head .cn-navgrp:last-child > .cn-navsub.cn-megap { left: 50%; right: auto; }
  /* OPEN AND CLOSE BY visibility, NOT display, so closing can WAIT. The gap
     from the parent word down to the bar's edge is different on every
     header, and a bridge tall enough for the deepest one lies over the
     menu words of the shallow ones - it swallowed the click on "Apps"
     itself in testing. So the bridge stays the list's 8px and the panel
     simply lingers a fifth of a second after the pointer leaves: long
     enough to cross any gap, short enough that moving to the next menu
     word closes it. Opening has no delay. */
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap {
    display: block; visibility: hidden; opacity: 0;
    transition: opacity .15s ease, visibility 0s linear .22s;
    /* ALWAYS A LIGHT CARD, whatever the bar. A list drop-down takes the
       bar's colour because it is a strip of the bar folded down; a panel
       this size in the same dark navy melted into a dark hero behind it in
       testing and had no edge at all. adobe.com's is white for the same
       reason. The member's own light and ink, so it is still their site. */
    background: var(--cn-pw, #fff); color: var(--cn-pink, var(--cn-ink, #14181f));
    --cn-subwash: rgba(0, 0, 0, .05);
  }
  .cnsite .cn-head .cn-navgrp.cn-mega:hover > .cn-navsub.cn-megap,
  .cnsite .cn-head .cn-navgrp.cn-mega:focus-within > .cn-navsub.cn-megap {
    visibility: visible; opacity: 1; transition-delay: 0s;
  }
  .cnsite .cn-megain { display: flex; align-items: stretch; width: 100%; box-sizing: border-box; }
  .cnsite .cn-megacols {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 260px);
    gap: 8px 22px; padding: 26px 28px 28px;
  }
  /* each column after the first gets a hairline in front, as on CNTX */
  .cnsite .cn-megacol + .cn-megacol { border-left: 1px solid rgba(128, 128, 128, .18); padding-left: 22px; margin-left: -1px; }
  /* THE SIDE BLOCK - tinted, on the left, the member's own words */
  .cnsite .cn-megaf {
    flex: 0 0 290px; box-sizing: border-box; padding: 28px 28px 30px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: rgba(128, 128, 128, .07);
    border-right: 1px solid rgba(128, 128, 128, .16);
    border-radius: 0 0 0 var(--cn-ri, var(--cn-cr, 10px));
    white-space: normal;
  }
  .cnsite .cn-megafe { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
  .cnsite .cn-megafh { font-size: 21px; font-weight: 700; line-height: 1.2; margin-top: 8px; }
  .cnsite .cn-megaft { font-size: 14px; line-height: 1.55; opacity: .8; }
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megafb {
    display: inline-block; width: auto; margin-top: 8px; padding: 12px 22px;
    background: var(--cn-accent) !important; color: var(--cn-aink, #fff) !important;
    border-radius: var(--cn-ri, 6px); font-size: 14.5px; font-weight: 700;
    white-space: nowrap; opacity: 1; text-transform: none; letter-spacing: normal;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
  }
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megafb:hover { filter: brightness(.94); }
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megafb::before { display: none; }
  .cnsite .cn-megafn { font-size: 13px; opacity: .7; margin-top: 4px; }
  .cnsite .cn-megacol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cnsite .cn-megat {
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    opacity: .62; padding: 0 10px 8px;
  }
  .cnsite .cn-megat small {
    display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400;
    letter-spacing: normal; text-transform: none;
  }
  .cnsite .cn-megatag {
    font-style: normal; font-size: 11px; font-weight: 600; margin-left: 6px; opacity: .6;
  }
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai,
  .cnsite .cn-head .cn-navgrp .cn-megap span.cn-megai {
    display: flex; align-items: flex-start; gap: 12px; width: auto;
    padding: 10px; border-radius: var(--cn-ri, 6px);
    white-space: normal; text-transform: none; letter-spacing: normal;
    font-size: 15px; line-height: 1.3; opacity: 1;
  }
  .cnsite .cn-megaico {
    flex: none; width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cn-subwash, rgba(0, 0, 0, .05)); color: var(--cn-accent);
    background: color-mix(in srgb, var(--cn-accent) 13%, transparent);
  }
  .cnsite .cn-megaico svg { width: 20px; height: 20px; }
  .cnsite .cn-megatx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .cnsite .cn-megatx b { font-weight: 650; }
  .cnsite .cn-megatx i { font-style: normal; font-size: 13px; font-weight: 400; opacity: .72; }
  /* the hover wash from the list rules already lands on the whole entry;
     only the name takes the accent, so the short line stays readable */
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai:hover,
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai:focus-visible,
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai[aria-current] { color: inherit !important; }
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai:hover b,
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai:focus-visible b,
  .cnsite .cn-head .cn-navgrp .cn-megap a.cn-megai[aria-current] b { color: var(--cn-accent); }
  /* inside the phone panel at desktop width the list rules already make it
     static; the grid just becomes one column */
  .cnsite .cn-head .cn-mpanel .cn-navgrp > .cn-navsub.cn-megap { transform: none; width: auto; left: auto; visibility: visible; opacity: 1; }
  .cnsite .cn-head .cn-mpanel .cn-megain, .cnsite .cn-head .cn-mpanel .cn-megacols { display: flex; flex-direction: column; padding: 0; }
}
/* A PHONE: the same markup is an indented list in the menu panel - the
   column titles as small labels, the icons small, the short lines kept. */
@media (max-width: 760px) {
  .cnsite .cn-megain, .cnsite .cn-megacols, .cnsite .cn-megacol { display: flex; flex-direction: column; gap: inherit; }
  /* the side block on a phone: its words and its button, small, above the list */
  .cnsite .cn-megaf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 0 10px; }
  .cnsite .cn-megafe { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
  .cnsite .cn-megafh { font-weight: 700; }
  .cnsite .cn-megaft, .cnsite .cn-megafn { font-size: 13px; opacity: .75; }
  .cnsite .cn-megat small { display: block; font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; }
  .cnsite .cn-megatag { font-style: normal; font-size: 11px; opacity: .6; margin-left: 4px; }
  .cnsite .cn-megat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: 6px; }
  .cnsite .cn-megai { display: flex; align-items: flex-start; gap: 10px; }
  .cnsite .cn-megaico { flex: none; width: 20px; height: 20px; color: var(--cn-accent); }
  .cnsite .cn-megaico svg { width: 18px; height: 18px; }
  .cnsite .cn-megatx { display: flex; flex-direction: column; gap: 2px; }
  .cnsite .cn-megatx i { font-style: normal; font-size: 13px; font-weight: 400; opacity: .7; }
}
/* the list's little dash in front of a child: a panel entry has its icon
   (or its column) to say the same thing, so the dash would be a third mark */
.cnsite .cn-head .cn-navgrp .cn-navsub a.cn-megai::before { display: none; }
@media (max-width: 760px) {
  .cnsite .cn-head .cn-mpanel a.cn-megafb,
  .cnsite .cn-head .cn-navgrp .cn-navsub a.cn-megafb {
    display: inline-block; width: auto; padding: 10px 16px; margin-top: 4px;
    background: var(--cn-accent) !important; color: var(--cn-aink, #fff) !important;
    border-radius: var(--cn-ri, 6px); font-weight: 700; opacity: 1;
  }
  .cnsite .cn-head .cn-navgrp .cn-navsub a.cn-megafb::before { display: none; }
}

/* ---- THE TOP OF A BIG PANEL - 24 September ---------------------------
   His CNTX menus have a small pointer aimed at the menu word instead of a
   line; he liked the line too, so it is a choice in Header > Menu: Line
   (nothing stored), Pointer, or Both. --cn-caret-x is set by cn.js from
   where the word actually sits; without it the pointer is in the middle. */
@media (min-width: 761px) {
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap.cn-megapt-pointer {
    border-top: 1px solid var(--cn-phair, rgba(0, 0, 0, .10));
    border-radius: var(--cn-ri, var(--cn-cr, 10px));
  }
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megapt-pointer .cn-megaf { border-radius: var(--cn-ri, var(--cn-cr, 10px)) 0 0 var(--cn-ri, var(--cn-cr, 10px)); }
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap.cn-megapt-pointer::after,
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap.cn-megapt-both::after {
    content: ''; position: absolute; left: var(--cn-caret-x, 50%); margin-left: -11px;
    width: 0; height: 0; border: 11px solid transparent; border-top: 0;
    pointer-events: none;
  }
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap.cn-megapt-pointer::after {
    top: -11px; border-bottom-color: var(--cn-pw, #fff);
  }
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megap.cn-megapt-both::after {
    top: -14px; border-bottom-color: var(--cn-accent);
  }
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megapt-pointer .cn-megaf,
  .cnsite .cn-head .cn-navgrp > .cn-navsub.cn-megapt-pointer .cn-megain { position: relative; }
}

/* ================= LINKED CARDS (the apps grid) - 24 September =============

   The "Seven apps. One account." band on the texnav.com canvas. A Services
   layout, so it reads the same cards a member already has; what is new is
   that a card can be a link, carry a small line under its words, and be
   the one card picked out.

   THE HEADING ROW is offered on every Services layout: heading and a few
   words on the left, a quiet text link on the right, wrapping under on a
   narrow screen. Only drawn when one of the two is filled in. */
.cnsite .cn-shead {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 32px; margin-bottom: 28px;
}
.cnsite .cn-shead .cn-h { margin-bottom: 0; }
.cnsite .cn-sheadt { flex: 1 1 420px; min-width: 0; max-width: 680px; }
.cnsite .cn-sintro { margin-top: 10px; font-size: 16px; line-height: 1.6; opacity: .8; }
.cnsite .cn-sintro p { margin: 0; }
.cnsite a.cn-slink {
  flex: none; font-weight: 650; font-size: 15px; text-decoration: none;
  color: var(--cn-accent); white-space: nowrap;
}
.cnsite a.cn-slink:hover { text-decoration: underline; }

/* THE CARDS. The same box as .cn-card so a member's edges, corners and
   shadow from Design carry across; a link card lifts a little on hover and
   its name takes the accent. Everything in a card is a column so the small
   line sits at the bottom whatever the text above it does. */
.cnsite .cn-lcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  /* a white card carries its own ink, so it reads on a dark band too */
  background: #fff; color: var(--cn-ink, #14181f); text-decoration: none;
  border: 1px solid var(--cn-boxline, var(--cn-line));
  border-radius: var(--cn-cr, 10px); box-shadow: var(--cn-shadow, none);
  padding: var(--cn-cpt, 22px) var(--cn-cpr, 22px) var(--cn-cpb, 22px) var(--cn-cpl, 22px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cnsite .cn-lcard h4 { margin: 4px 0 0; font-size: 17px; font-weight: 650; }
.cnsite .cn-lcard p { margin: 0; font-size: 14px; line-height: 1.55; opacity: .78; }
.cnsite .cn-lcard small {
  margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--cn-accent); letter-spacing: .01em;
}
.cnsite .cn-lico {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--cn-accent); background: rgba(0, 0, 0, .05);
  background: color-mix(in srgb, var(--cn-accent) 12%, transparent);
}
.cnsite .cn-lico svg { width: 22px; height: 22px; }
.cnsite a.cn-lcard-a:hover, .cnsite a.cn-lcard-a:focus-visible {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--cn-accent) 45%, transparent);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
}
.cnsite a.cn-lcard-a:hover h4, .cnsite a.cn-lcard-a:focus-visible h4 { color: var(--cn-accent); }
.cnsite a.cn-lcard-a:focus-visible { outline: 3px solid var(--cn-accent); outline-offset: 2px; }
/* THE ONE PICKED OUT - an accent wash and a dashed edge, the way an
   invitation reads next to a row of products */
.cnsite .cn-lcard.cn-lcard-hl {
  background: color-mix(in srgb, var(--cn-accent) 8%, #fff);
  border-style: dashed; border-color: color-mix(in srgb, var(--cn-accent) 55%, transparent);
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .cnsite .cn-lcard { transition: none; }
  .cnsite a.cn-lcard-a:hover { transform: none; }
}
/* A PHONE: eight tall cards is a long scroll, so each card lies down - the
   icon on the left, its words beside it - and the row gets a gap of 10px
   instead of 20. */
@media (max-width: 780px) {
  .cnsite .cn-grid.cn-lcards { gap: 10px; }
  .cnsite .cn-lcard {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 3px;
    align-items: start; padding: 16px;
  }
  .cnsite .cn-lcard > * { grid-column: 2; }
  .cnsite .cn-lcard > .cn-lico { grid-column: 1; grid-row: 1 / span 3; width: 38px; height: 38px; }
  .cnsite .cn-lcard h4 { margin: 0; font-size: 16px; }
  .cnsite .cn-lcard p { font-size: 13.5px; }
  .cnsite .cn-lcard small { padding-top: 2px; }
  .cnsite .cn-lcard.cn-lcard-hl > * { grid-column: 1 / -1; }
}

/* ================= HELP ME CHOOSE - 24 September ===========================
   The quiz from the texnav.com canvas. Heading and a few words centred
   above one white card holding the question - a thin progress line and
   "2 of 6" across its top, the question large, its hint quiet under it,
   and Yes / Not sure / No as three wide buttons (Yes in the accent). The
   finish replaces the card with the chosen cards in the Linked cards
   look, so results and the apps grid read as the same objects.

   EVERY CLASS IS cn-qz*: the section element itself already carries
   cn-finder (every section is cn-<type>), and cn-fbody / cn-fbar / cn-fcard
   were already the FOOTER's - the first cut borrowed all three and got the
   footer's padding.

   BEFORE THE SCRIPT RUNS (or without it) the question card is hidden and
   the pool of every card shows as a plain grid - see cn_page.php. */
.cnsite .cn-qzyes, .cnsite .cn-qzmay { grid-template-columns: repeat(var(--cn-cols, 3), minmax(0, 380px)); justify-content: center; }
.cnsite .cn-qz { display: flex; flex-direction: column; gap: 26px; }
.cnsite .cn-qzintro { text-align: center; max-width: 660px; margin: 0 auto; }
.cnsite .cn-qzintro .cn-h { margin-bottom: 0; }
.cnsite .cn-qzbody { margin-top: 10px; font-size: 16px; line-height: 1.6; opacity: .8; }
.cnsite .cn-qzbody p { margin: 0; }
.cnsite .cn-qz:not(.is-live) .cn-qzask,
.cnsite .cn-qz:not(.is-live) .cn-qzdone { display: none; }
.cnsite .cn-qz.is-live .cn-qzpool { display: none; }
.cnsite .cn-qzask[hidden], .cnsite .cn-qzdone[hidden], .cnsite .cn-qzpk[hidden],
.cnsite .cn-qzmaywrap[hidden], .cnsite .cn-qzq[hidden], .cnsite .cn-qzback[hidden] { display: none; }
.cnsite .cn-qzcard {
  max-width: 720px; margin: 0 auto; box-sizing: border-box; width: 100%;
  background: #fff; color: var(--cn-ink, #14181f);
  border: 1px solid var(--cn-boxline, var(--cn-line)); border-radius: var(--cn-cr, 12px);
  box-shadow: var(--cn-shadow, 0 12px 30px rgba(16, 24, 40, .08));
  padding: 26px 32px 30px;
}
.cnsite .cn-qzprog { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cnsite .cn-qzbar { flex: 1; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .07); overflow: hidden; }
.cnsite .cn-qzbar i { display: block; height: 100%; width: 0; background: var(--cn-accent); transition: width .3s ease; }
.cnsite .cn-qzstep { font-size: 13px; font-weight: 600; opacity: .6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnsite .cn-qzq h3 { margin: 0; font-size: 25px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.cnsite .cn-qzq p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; opacity: .72; }
.cnsite .cn-qzans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.cnsite .cn-qza {
  font: inherit; font-size: 16px; font-weight: 650; cursor: pointer;
  padding: 14px 12px; border-radius: var(--cn-br, 8px);
  background: #fff; color: var(--cn-ink, #14181f);
  border: 1.5px solid var(--cn-boxline, rgba(0, 0, 0, .16));
  transition: background .15s, border-color .15s, color .15s;
}
.cnsite .cn-qza:hover { border-color: var(--cn-accent); color: var(--cn-accent); }
.cnsite .cn-qza.cn-qza-y { background: var(--cn-accent); border-color: var(--cn-accent); color: var(--cn-aink, #fff); }
.cnsite .cn-qza.cn-qza-y:hover { filter: brightness(.94); color: var(--cn-aink, #fff); }
.cnsite .cn-qza:focus-visible, .cnsite .cn-qzback:focus-visible { outline: 3px solid var(--cn-accent); outline-offset: 2px; }
.cnsite .cn-qzback {
  margin-top: 16px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: inherit; opacity: .65;
}
.cnsite .cn-qzback:hover { opacity: 1; }
.cnsite .cn-qzdone { display: flex; flex-direction: column; gap: 18px; }
.cnsite .cn-qzhead { margin: 0; text-align: center; font-size: 22px; font-weight: 700; }
.cnsite .cn-qzhead:focus { outline: none; }
.cnsite .cn-qzyes, .cnsite .cn-qzmay { justify-content: center; }
.cnsite .cn-qzpk {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px;
  padding: 20px 24px; border-radius: var(--cn-cr, 12px);
  background: color-mix(in srgb, var(--cn-accent) 10%, #fff); color: var(--cn-ink, #14181f);
  border: 1px solid color-mix(in srgb, var(--cn-accent) 35%, transparent);
}
.cnsite .cn-qzpk { width: 100%; max-width: 1180px; margin: 0 auto; box-sizing: border-box; }
.cnsite .cn-qzpk b { font-size: 18px; }
.cnsite .cn-qzpk p { margin: 4px 0 0; font-size: 14.5px; opacity: .78; }
.cnsite .cn-qzmayt { margin: 6px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; text-align: center; }
.cnsite .cn-qzmay .cn-lcard { opacity: .9; }
.cnsite .cn-qzrestart { align-self: center; margin-top: 4px; }
@media (max-width: 780px) {
  .cnsite .cn-qzcard { padding: 20px 18px 22px; }
  .cnsite .cn-qzq h3 { font-size: 21px; }
  .cnsite .cn-qzans { grid-template-columns: 1fr; }
  .cnsite .cn-qza { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cnsite .cn-qzbar i { transition: none; }
}

/* ---- THE SLIDE TABS' ICONS: colour, background, size - 24 September -------
   John: "yes it would be nice to change icon colors". The same three
   controls the cards have (Design > Icon), so the same section classes:
   cn-ik-* the mark's colour, cn-ic-* a tile behind it (its ink worked out
   from the tile, never chosen), --cn-isz the mark's size. Written for the
   tab's own icon span rather than by giving it .cn-ico, whose accent tile
   would have changed every existing tab. A tile is the mark plus 12px -
   a tab is shorter than a card. */
.cnsite .cn-hadv-tico svg { width: var(--cn-isz, 22px); height: var(--cn-isz, 22px); }
.cnsite .cn-hadv-tico { width: auto; height: auto; min-width: 26px; min-height: 26px; }
.cnsite [class*='cn-ic-c'] .cn-hadv-tico { padding: 6px; border-radius: 7px; }
.cnsite .cn-ic-c1 .cn-hadv-tico { background: var(--cn-c1); color: var(--cn-c1i); }
.cnsite .cn-ic-c2 .cn-hadv-tico { background: var(--cn-c2); color: var(--cn-c2i); }
.cnsite .cn-ic-c3 .cn-hadv-tico { background: var(--cn-c3); color: var(--cn-c3i); }
.cnsite .cn-ic-c4 .cn-hadv-tico { background: var(--cn-c4); color: var(--cn-c4i); }
.cnsite .cn-ic-c5 .cn-hadv-tico { background: var(--cn-c5); color: var(--cn-c5i); }
.cnsite .cn-ic-c6 .cn-hadv-tico { background: var(--cn-c6); color: var(--cn-c6i); }
.cnsite .cn-ic-cw .cn-hadv-tico { background: #ffffff; color: #14181f; }
.cnsite .cn-ic-cg .cn-hadv-tico { background: #f1f3f6; color: #14181f; }
.cnsite .cn-ic-ck .cn-hadv-tico { background: #14181f; color: #ffffff; }
.cnsite .cn-ik-c1 .cn-hadv-tico { color: var(--cn-c1); }
.cnsite .cn-ik-c2 .cn-hadv-tico { color: var(--cn-c2); }
.cnsite .cn-ik-c3 .cn-hadv-tico { color: var(--cn-c3); }
.cnsite .cn-ik-c4 .cn-hadv-tico { color: var(--cn-c4); }
.cnsite .cn-ik-c5 .cn-hadv-tico { color: var(--cn-c5); }
.cnsite .cn-ik-c6 .cn-hadv-tico { color: var(--cn-c6); }
.cnsite .cn-ik-cw .cn-hadv-tico { color: #ffffff; }
.cnsite .cn-ik-cg .cn-hadv-tico { color: #f1f3f6; }
.cnsite .cn-ik-ck .cn-hadv-tico { color: #14181f; }
/* with a tile, the icon-above card grows to hold it rather than clipping */
.cnsite .cn-hadv-tabtop .cn-hadv-tab { height: auto; min-height: 86px; padding-top: 12px; }
@media (max-width: 760px) {
  .cnsite .cn-hadv-tabtop .cn-hadv-tab { min-height: 70px; padding-top: 10px; }
}

/* ---- THE TAB ROW LINES UP WITH THE WORDS - 24 September ------------------
   His screenshot: the headline at the page's edge and the first tab 28px in
   from it. The row was a 1280px box with 28px of padding INSIDE it, while
   the words sit in a 1280px column with the slide's padding OUTSIDE it - so
   on any window wider than the column the tabs started 28px late. The row's
   box is now the column plus the slide's own padding, so its inside edge is
   the column's edge at every width (28px, and 32px from 1200px up, the same
   numbers .cn-hadv-slide uses), and a narrower content width narrows both. */
.cnsite .cn-hadv-tabs { max-width: calc(1280px + 56px); padding: 0 28px; }
.cnsite .cn-w-normal .cn-hadv-tabs { max-width: calc(1040px + 56px); }
.cnsite .cn-w-narrow .cn-hadv-tabs { max-width: calc(720px + 56px); }
@media (min-width: 1200px) {
  .cnsite .cn-hadv-tabs { max-width: calc(1280px + 64px); padding: 0 32px; }
  .cnsite .cn-w-normal .cn-hadv-tabs { max-width: calc(1040px + 64px); }
  .cnsite .cn-w-narrow .cn-hadv-tabs { max-width: calc(720px + 64px); }
}

/* ---- LEFT OR CENTER INSTEAD OF FILLING - 24 September --------------------
   "if there less tabs, i think show it left or give option to choose left or
   center". Fill (the default) stretches the tabs across the row. Left and
   Center give each tab its own width - up to 280px, never less than 180 -
   so two tabs read as two tabs; the pause button follows the last one. */
.cnsite .cn-hadv-tal-left .cn-hadv-trow, .cnsite .cn-hadv-tal-centre .cn-hadv-trow { flex: 0 1 auto; width: max-content; max-width: 100%; }
.cnsite .cn-hadv-tal-left .cn-hadv-tab, .cnsite .cn-hadv-tal-centre .cn-hadv-tab { flex: 0 1 280px; width: 280px; min-width: 180px; }
.cnsite .cn-hadv-tal-centre .cn-hadv-tabs { justify-content: center; }
@media (max-width: 760px) {
  .cnsite .cn-hadv-tabs { padding: 0 20px; }
  .cnsite .cn-hadv-behind .cn-hadv-tabs { padding: 0 22px; }
  .cnsite .cn-hadv-tal-left .cn-hadv-tab, .cnsite .cn-hadv-tal-centre .cn-hadv-tab { flex: 0 0 auto; width: auto; min-width: 0; }
}
/* an uploaded picture used as a tab icon is held to the icon's size, like
   every drawn one - his screenshot had one spilling out of its tab */
.cnsite .cn-hadv-tico img, .cnsite .cn-hadv-tico .cn-icoimg {
  width: var(--cn-isz, 22px); height: var(--cn-isz, 22px); max-width: none; object-fit: contain; display: block;
}
.cnsite .cn-hadv-tico { overflow: hidden; }
/* ICON ABOVE THE NAME, laid out as a grid rather than a wrapped row - the
   wrapped row made the icon's box the full width of the card, which was
   invisible until the icon could have a tile behind it (24 Sep). Row one is
   the icon, at its own size; row two the name and the arrow. */
.cnsite .cn-hadv-tabtop .cn-hadv-tab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-content: end; row-gap: 10px; column-gap: 10px;
}
.cnsite .cn-hadv-tabtop .cn-hadv-tico { grid-column: 1 / -1; justify-self: start; flex: none; }

/* ---- A FLOATING HEADER OVER THE SLIDESHOW - 24 September ----------------
   The slide paints its own photograph, so the photograph runs up under the
   see-through bar by the slide taking the bar's height as extra padding on
   top - the same way the overlay hero's .cn-overlay does it (96px bar on a
   computer, 64 on a phone, see the rules above). The words stay where they
   were relative to the photo's visible part; the tabs sit at the bottom as
   before. */
.cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-advanced .cn-hadv-behind .cn-hadv-slide { padding-top: calc(76px + 96px); }
@media (max-width: 760px) {
  .cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-advanced .cn-hadv-behind .cn-hadv-slide { padding-top: calc(56px + 64px); }
}

/* ---- SPACING ON THE SLIDESHOW - 24 September -----------------------------
   John: "this numbers are not working". Design > Spacing writes --cn-spt /
   --cn-spb (and the phone pair) onto the section, and every other section
   reads them as its own padding - but the slideshow's section has padding 0
   on purpose (each slide is full bleed and paints its own photo), so the
   numbers landed on nothing. They go on the SLIDE now:

     Top      the room above the words (the photo grows to fill it)
     Bottom   the room under the buttons - with tabs, the gap between the
              buttons and the row of tabs, which is adobe.com's big space

   Auto is untouched. Under a floating header the bar is a floor, the same
   rule the photo hero follows: their number is the band of photograph, and
   it never puts the words under the menu. */
.cnsite .cn-hadv-hastabs { --cn-hadv-tabroom: 150px; }
.cnsite .cn-hadv-hastabs.cn-hadv-tabtop { --cn-hadv-tabroom: 172px; }
.cnsite .cn-sec.cn-v-advanced.cn-pt-set .cn-hadv .cn-hadv-slide { padding-top: var(--cn-spt); }
.cnsite .cn-sec.cn-v-advanced.cn-pb-set .cn-hadv .cn-hadv-slide { padding-bottom: var(--cn-spb); }
.cnsite .cn-sec.cn-v-advanced.cn-pb-set .cn-hadv.cn-hadv-hastabs .cn-hadv-slide { padding-bottom: calc(var(--cn-spb) + var(--cn-hadv-tabroom)); }
.cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-advanced.cn-pt-set .cn-hadv-behind .cn-hadv-slide { padding-top: max(var(--cn-spt), 116px); }
@media (max-width: 780px) {
  .cnsite .cn-hadv-hastabs { --cn-hadv-tabroom: 104px; }
  .cnsite .cn-hadv-hastabs.cn-hadv-tabtop { --cn-hadv-tabroom: 122px; }
  .cnsite .cn-sec.cn-v-advanced.cn-pt-set .cn-hadv .cn-hadv-slide { padding-top: var(--cn-sptm, var(--cn-spt)); }
  .cnsite .cn-sec.cn-v-advanced.cn-ptm-set .cn-hadv .cn-hadv-slide { padding-top: var(--cn-sptm); }
  .cnsite .cn-sec.cn-v-advanced.cn-pb-set .cn-hadv .cn-hadv-slide { padding-bottom: var(--cn-spbm, var(--cn-spb)); }
  .cnsite .cn-sec.cn-v-advanced.cn-pbm-set .cn-hadv .cn-hadv-slide { padding-bottom: var(--cn-spbm); }
  .cnsite .cn-sec.cn-v-advanced.cn-pb-set .cn-hadv.cn-hadv-hastabs .cn-hadv-slide { padding-bottom: calc(var(--cn-spbm, var(--cn-spb)) + var(--cn-hadv-tabroom)); }
  .cnsite .cn-sec.cn-v-advanced.cn-pbm-set .cn-hadv.cn-hadv-hastabs .cn-hadv-slide { padding-bottom: calc(var(--cn-spbm) + var(--cn-hadv-tabroom)); }
  .cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-advanced.cn-pt-set .cn-hadv-behind .cn-hadv-slide { padding-top: max(var(--cn-sptm, var(--cn-spt)), 84px); }
  .cnsite .cn-head.cn-float ~ .cn-sec.cn-hero.cn-v-advanced.cn-ptm-set .cn-hadv-behind .cn-hadv-slide { padding-top: max(var(--cn-sptm), 84px); }
}

/* ---- SLIDE AND PUSH, WITH A DIRECTION - 24 September ----------------------
   John: "our slide has a little bounce, it moves back a little and then
   goes" - the leaving slide used to slide back to the right, where waiting
   slides sit, while the new one came in from the right. And on adobe.com
   hovering along the tabs moves the slides the way you are moving.

   cn.js now says which way (data-dir f / b on the slideshow) and marks the
   leaving slide is-out. Only the arriving (is-on) and leaving (is-out)
   slides animate; the waiting ones jump to their side without animating,
   so a change of direction can never drag one across the picture.

   SLIDE  the whole slide - photo and words - travels 60px and fades.
   PUSH   adobe.com's, read frame by frame off his screen recording: the
          new slide pushes the old one out, full width, both moving
          together, no fade - very fast at first and a long soft settle
          (an expo-out curve), so it reads as a snap that lands gently.
          Forward comes in from the right, backward from the left. */
.cnsite .cn-hadv-mv-slide .cn-hadv-slide,
.cnsite .cn-hadv-mv-push .cn-hadv-slide { transition: none; }
.cnsite .cn-hadv-mv-slide .cn-hadv-slide.is-on,
.cnsite .cn-hadv-mv-slide .cn-hadv-slide.is-out {
  transition: opacity var(--cn-hadv-dur, .45s) ease,
              transform var(--cn-hadv-dur, .45s) cubic-bezier(.22, .61, .36, 1),
              visibility var(--cn-hadv-dur, .45s);
}
.cnsite .cn-hadv-mv-slide .cn-hadv-slide { transform: translateX(60px); }
.cnsite .cn-hadv-mv-slide[data-dir='b'] .cn-hadv-slide { transform: translateX(-60px); }
.cnsite .cn-hadv-mv-slide .cn-hadv-slide.is-out { transform: translateX(-60px); }
.cnsite .cn-hadv-mv-slide[data-dir='b'] .cn-hadv-slide.is-out { transform: translateX(60px); }
.cnsite .cn-hadv-mv-slide .cn-hadv-slide.is-on,
.cnsite .cn-hadv-mv-slide[data-dir='b'] .cn-hadv-slide.is-on { transform: none; }

/* PUSH. The leaving slide stays fully drawn while it is pushed off (its
   visibility switches off only once the move is over), and the waiting ones
   sit a whole width away on the side the next move comes from. */
.cnsite .cn-hadv-mv-push .cn-hadv-slide { transform: translateX(100%); }
.cnsite .cn-hadv-mv-push[data-dir='b'] .cn-hadv-slide { transform: translateX(-100%); }
.cnsite .cn-hadv-mv-push .cn-hadv-slide.is-out { transform: translateX(-100%); opacity: 1; visibility: hidden; }
.cnsite .cn-hadv-mv-push[data-dir='b'] .cn-hadv-slide.is-out { transform: translateX(100%); }
.cnsite .cn-hadv-mv-push .cn-hadv-slide.is-on,
.cnsite .cn-hadv-mv-push[data-dir='b'] .cn-hadv-slide.is-on { transform: none; }
.cnsite .cn-hadv-mv-push .cn-hadv-slide.is-on,
.cnsite .cn-hadv-mv-push .cn-hadv-slide.is-out {
  transition: transform calc(var(--cn-hadv-dur, .45s) * 1.6) cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear calc(var(--cn-hadv-dur, .45s) * 1.6);
}
.cnsite .cn-hadv-mv-push .cn-hadv-slide.is-on { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .cnsite .cn-hadv-mv-push .cn-hadv-slide { transition-duration: .001s !important; transition-delay: 0s !important; }
}

/* ---- THE PHONE MENU UNDER A FLOATING HEADER - 24 September ------------
   John, on his phone: "see what happens when i click the menu, is also
   transparent". The floating header takes the paint off its BAR, and the
   panel was left with nothing solid of its own: the scrim (::before, a
   positioned layer) painted over it, and on his page the photograph and
   the hero words showed straight through the menu.

   OPEN MEANS DARK, WHEREVER THE PAGE IS SCROLLED. The first version went
   white when the bar had turned white on scroll, to match the bar - and
   that gave the same menu two looks depending on where you opened it. His
   second round: "it shows 2 diff background depends on how i use the
   menu". So an open menu paints the whole header the dark bar colour,
   bar and panel as one piece, and the light-background logo steps back
   for the dark-background one while it is open.

   ONLY BELOW 761, WHERE THE HAMBURGER IS. The checkbox stays checked when
   the window grows (see the note by .cn-mpanel above), so without the
   width gate a menu opened on a phone and then stretched to a computer
   left the bar painted dark at the top of the page - his round-two #7,
   gone after a refresh. 761 is the hamburger's own number, as there.

   Its own height, scrolling inside itself: the header is fixed, so a menu
   taller than a phone would otherwise run off the bottom with no way to
   reach the last items. */
@media (max-width: 760px) {
  .cnsite .cn-head.cn-float .cn-mpanel {
    position: relative; z-index: 1;
    background: var(--cn-pd); color: #fff; border-top-color: var(--cn-phairD);
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  .cnsite .cn-head.cn-float:has(.cn-mtog:checked) .cn-pbar,
  .cnsite .cn-head.cn-float.cn-slw.cn-solid:has(.cn-mtog:checked) .cn-pbar { background: var(--cn-pd); color: #fff; }
  .cnsite .cn-head.cn-float:has(.cn-mtog:checked)::before { opacity: 0; }
  .cnsite .cn-head.cn-float.cn-slw.cn-solid:has(.cn-mtog:checked) .cn-mbtn { color: #fff; }
  .cnsite .cn-head.cn-float.cn-slw.cn-solid:has(.cn-mtog:checked) .cn-logo-two .cn-lg-a { opacity: 1; }
  .cnsite .cn-head.cn-float.cn-slw.cn-solid:has(.cn-mtog:checked) .cn-logo-two .cn-lg-b { opacity: 0; }
}

/* ---- THE APP GRID - 25 September -------------------------------------
   adobe.com's nine-dot button beside Sign in, for texnav.com. A <button>
   and a card; the card opens on hover and on focus (a tap on a phone), with
   no script, and lingers a fifth of a second like the big panel so the
   pointer can cross the gap. Always a light card, like the big panel, so it
   has an edge over any bar. Nothing here matches unless a menu row is
   marked "App grid" - cn-ag is drawn by cnGridHtml() and nowhere else. */
.cnsite .cn-agwrap { display: inline-flex; align-items: center; gap: 12px; }
.cnsite .cn-ag { position: relative; display: inline-flex; }
.cnsite .cn-agb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; margin: 0; border: 0; border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer; font: inherit;
}
.cnsite .cn-agb:hover, .cnsite .cn-ag:focus-within .cn-agb { background: rgba(128, 128, 128, .16); }
.cnsite .cn-agb:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 2px; }
.cnsite .cn-agp {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 14px;
  background: var(--cn-pw, #fff); color: var(--cn-pink, var(--cn-ink, #14181f));
  border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--cn-ri, var(--cn-cr, 10px));
  box-shadow: 0 14px 38px rgba(16, 32, 64, .16), 0 2px 6px rgba(16, 32, 64, .06);
  text-align: left; white-space: normal;
  visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility 0s linear .22s;
}
/* the gap between the button and the card is bridged so the pointer can cross it */
.cnsite .cn-agp::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.cnsite .cn-ag:hover .cn-agp, .cnsite .cn-ag:focus-within .cn-agp {
  visibility: visible; opacity: 1; transition-delay: 0s;
}
.cnsite .cn-agh { font-size: 15px; font-weight: 700; padding: 0 6px 8px; letter-spacing: normal; text-transform: none; }
.cnsite .cn-agis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cnsite .cn-head a.cn-agit, .cnsite a.cn-agit {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 4px 10px; border-radius: var(--cn-ri, 8px);
  color: inherit !important; text-decoration: none; text-align: center;
  font-size: 13px; font-weight: 500; line-height: 1.25; text-transform: none; letter-spacing: normal; opacity: 1;
  white-space: normal; height: auto; width: auto; background: none; border: 0;
}
.cnsite a.cn-agit::before, .cnsite a.cn-agit::after { display: none; }
.cnsite a.cn-agit:hover, .cnsite a.cn-agit:focus-visible { background: rgba(128, 128, 128, .10); }
.cnsite a.cn-agit:focus-visible { outline: 2px solid var(--cn-accent); outline-offset: -2px; }
.cnsite .cn-agit b { font-weight: 600; font-size: 13px; }
.cnsite .cn-agit em { font-style: normal; font-size: 10.5px; font-weight: 700; opacity: .6; margin-top: -5px; }
.cnsite .cn-agico {
  width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--cn-accent); color: var(--cn-aink, #fff); font-weight: 800; font-size: 18px;
}
.cnsite .cn-agico svg { width: 24px; height: 24px; }
.cnsite .cn-agf {
  display: flex; justify-content: center; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid rgba(128, 128, 128, .18);
}
.cnsite .cn-head .cn-agf a, .cnsite .cn-agf a {
  display: inline-flex; padding: 8px 14px; border-radius: var(--cn-ri, 6px);
  color: inherit !important; font-size: 14px; font-weight: 600; text-decoration: none;
  text-transform: none; letter-spacing: normal; background: none; height: auto; opacity: 1;
}
.cnsite .cn-agf a:hover { background: rgba(128, 128, 128, .10); }
.cnsite .cn-agf a::before, .cnsite .cn-agf a::after { display: none; }
@media (prefers-reduced-motion: reduce) { .cnsite .cn-agp { transition: none; } }
/* IN THE PHONE MENU the card is simply shown, open, above the header
   button - a button of dots inside a menu that is already open would be a
   menu inside a menu, and its card had nowhere on screen to open to. */
.cnsite .cn-mpanel .cn-agwrap { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
.cnsite .cn-mpanel .cn-ag { display: block; width: 100%; }
.cnsite .cn-mpanel .cn-agb { display: none; }
.cnsite .cn-mpanel .cn-agp {
  position: static; visibility: visible; opacity: 1; transition: none;
  width: 100%; max-width: none; box-shadow: none;
}
.cnsite .cn-mpanel .cn-agp::before { display: none; }
/* A PHONE, when the header keeps the button in its bar: the card hangs
   from the bar, full width less a margin, instead of from a button that may
   sit at the left edge with no room to open. */
@media (max-width: 760px) {
  .cnsite .cn-head:has(.cn-ag) { position: relative; }
  .cnsite .cn-head .cn-ag { position: static; }
  .cnsite .cn-head .cn-agp { top: calc(100% + 6px); left: 12px; right: 12px; width: auto; max-width: none; }
  .cnsite .cn-head .cn-mpanel .cn-agp { top: auto; left: auto; right: auto; }
}