@brandlab-digital/site-next 3.13.0 → 3.15.0

package/dist/ui-kit/structure.css

@@ -97,11 +97,10 @@
 
   [data-bl='stars'] {
     display: inline-flex;
-    gap: 0.125rem;
     color: var(--bl-color-star, #f5b301);
   }
-  [data-bl='stars'] [data-slot='star'] svg {
-    width: 1em;
+  [data-bl='stars'] > svg {
+    width: 5.4em;
     height: 1em;
   }
   [data-bl='stars'] [data-slot='star'][data-state='off'] {
@@ -120,6 +119,198 @@
     }
   }
 
+  /* 05-media.css */
+  /* MediaFrame and Media (F13), the library's one image path: the frame holds the image at its own shape, or cropped to
+     an allowed ratio around the focal point (inline object-position); a caption flows under it. An AI image's
+     "Illustration" label (inside the figcaption) sits over the image's top corner; the site colours it. */
+
+  [data-bl='media'] {
+    position: relative;
+    margin: 0;
+  }
+  [data-bl='media'] > img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+  [data-bl='media'][data-fit='fluid'] > img {
+    width: 100%;
+  }
+  [data-bl='media'][data-ratio] > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  [data-bl='media'][data-ratio='16:9'] > img {
+    aspect-ratio: 16 / 9;
+  }
+  [data-bl='media'][data-ratio='4:5'] > img {
+    aspect-ratio: 4 / 5;
+  }
+  [data-bl='media'][data-ratio='4:3'] > img {
+    aspect-ratio: 4 / 3;
+  }
+  [data-bl='media'][data-ratio='3:2'] > img {
+    aspect-ratio: 3 / 2;
+  }
+  [data-bl='media'] [data-slot='label'] {
+    position: absolute;
+    inset-block-start: 0.5rem;
+    inset-inline-start: 0.5rem;
+    padding: 0.125rem 0.5rem;
+    background: var(--bl-color-surface, Canvas);
+    color: var(--bl-color-ink, CanvasText);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  /* Behind the page header's text, the figure fills its media slot. */
+  :where([data-bl-section] [data-slot='media']) > [data-bl='media'][data-ratio] {
+    height: 100%;
+  }
+
+  /* 05-primitives.css */
+  /* Primitives (3.14.0): Button, Eyebrow, TickList, LinkList, Card, Badge and Chip, Stat, MediaFrame. Layout only. */
+
+  button[data-bl='button'] {
+    font: inherit;
+    cursor: pointer;
+  }
+  button[data-bl='button']:disabled {
+    cursor: not-allowed;
+  }
+
+  [data-bl='eyebrow'] {
+    margin: 0;
+  }
+
+  /* TickList: one column, or two from the first width up (the hero checklist). */
+  [data-bl='tick-list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 0.5rem 1.5rem;
+  }
+  [data-bl='tick-list'][data-columns='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  [data-bl='tick-list'] [data-slot='item'] {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  [data-bl='tick-list'] [data-slot='tick'] {
+    color: var(--bl-color-action, currentColor);
+  }
+  [data-bl='tick-list'] [data-slot='tick'] svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+  /* tick: 'rule': no svg, a short rule on the first line's centre (AA's ruled lists). */
+  [data-bl='tick-list'][data-tick='rule'] [data-slot='tick'] {
+    flex: none;
+    width: 0.875em;
+    height: 2px;
+    margin-top: 0.7em;
+    background: currentColor;
+  }
+
+  /* LinkList: plain entries, one column on phones, two from 40rem, the chosen count from 64rem. */
+  [data-bl='link-list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    column-gap: 2.5rem;
+  }
+  [data-bl='link-list'] > li > a {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+  }
+  @media (min-width: 40rem) {
+    [data-bl='link-list']:not([data-columns='1']) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 64rem) {
+    [data-bl='link-list'][data-columns='3'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl='link-list'][data-columns='4'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  /* Card: media then body; a linked card is one hit area through its title link. */
+  [data-bl='card'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  [data-bl='card'] [data-slot='title'] {
+    margin: 0;
+  }
+  [data-bl='card'] [data-slot='link']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  @media (min-width: 40rem) {
+    [data-bl='card'][data-media='start'] {
+      flex-direction: row;
+    }
+    [data-bl='card'][data-media='start'] > [data-slot='media'] {
+      flex: 0 0 40%;
+    }
+  }
+
+  [data-bl='badge'],
+  [data-bl='chip'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375em;
+  }
+  :where([data-bl='badge'], [data-bl='chip']) [data-slot='icon'] svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  [data-bl='stat'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  [data-bl='stat'] [data-slot='link'] {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+  }
+
+  /* 06-breadcrumbs.css */
+  /* Breadcrumbs (F11): one wrapping line; the separator is drawn here (no element per crumb) with empty alternative
+     text, so assistive technology reads the list alone. A skin may restyle or replace it on the same selector. */
+
+  [data-bl='breadcrumbs'] [data-slot='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl='breadcrumbs'] [data-slot='item'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  [data-bl='breadcrumbs'] [data-slot='item'] + [data-slot='item']::before {
+    content: '/';
+    content: '/' / '';
+    opacity: 0.6;
+  }
+
   /* 10-header.css */
   /*
    * F2 header and F3 panels: sticky and solid, modes by the header's own width, panels always in the HTML. The drawer's
@@ -194,7 +385,7 @@
     height: var(--bl-logo-h-phone, 40px);
   }
 
-  /* The menu: hidden below 1280 px (the drawer takes over). */
+  /* The menu: hidden below 1200 px (the drawer takes over). */
   [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
     display: none;
     flex: 1;
@@ -368,7 +559,7 @@
     height: 1.25rem;
   }
 
-  /* 1024 to 1279 px: the compact band. Logo, phone with its number, quote and Menu. */
+  /* 1024 to 1199 px: the compact band. Logo, phone with its number, quote and Menu. The phone stays from 1024 px up. */
   @container bl-header (min-width: 1024px) {
     [data-bl='header'] > [data-slot='bar'] > [data-slot='inner'] {
       min-height: var(--bl-header-bar, 5rem);
@@ -408,8 +599,8 @@
     }
   }
 
-  /* 1280 px and up: the full menu. */
-  @container bl-header (min-width: 1280px) {
+  /* 1200 px and up: the full menu, with the phone and quote still beside it. */
+  @container bl-header (min-width: 1200px) {
     [data-bl='header'] [data-slot='inner'] > [data-slot='nav'] {
       display: block;
     }
@@ -643,13 +834,22 @@
     color: var(--bl-color-ink, CanvasText);
     transition: translate 200ms ease, visibility 0s;
   }
-  [data-bl='callbar'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
-    flex: 1 1 0;
+  /*
+   * One line each down to 360 px (3.15.0): the buttons size to their content, the number never wraps, and the inline
+   * padding (`--bl-callbar-button-padding`) outranks a skin's general button padding, so a skin tunes it by the token.
+   */
+  [data-bl='callbar'][data-variant] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
+    flex: 1 1 auto;
     justify-content: center;
     min-width: 0;
     min-height: 48px;
+    padding-inline: var(--bl-callbar-button-padding, 0.75rem);
+    white-space: nowrap;
     text-decoration: none;
   }
+  [data-bl='callbar'] [data-bl='phone-link'] [data-slot='number'] {
+    white-space: nowrap;
+  }
   [data-bl='callbar'][data-variant='float'] {
     inset-inline: auto 0;
     justify-content: flex-end;
@@ -658,6 +858,25 @@
   [data-bl='callbar'][data-variant='float'] > :is([data-bl='phone-link'], [data-bl='quote-button']) {
     flex: none;
   }
+  /*
+   * Narrow phones: the verb before the number is visually hidden (the link's name still reads "Call 0497 777 735"), and
+   * a quote button with a compact label draws it from the attribute with empty alternative text, so its name stays the
+   * full label, which contains it (WCAG 2.5.3).
+   */
+  @media (max-width: 419.98px) {
+    [data-bl='callbar'] [data-bl='phone-link'] [data-slot='label'],
+    [data-bl='callbar'] [data-slot='label'][data-compact-label] > [data-bl-full-label] {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    [data-bl='callbar'] [data-slot='label'][data-compact-label]::after {
+      content: attr(data-compact-label) / '';
+    }
+  }
   [data-bl='callbar'][data-state='hidden'] {
     visibility: hidden;
     translate: 0 100%;
@@ -670,7 +889,10 @@
   }
 
   /* 14-back-to-top.css */
-  /* F7 back-to-top: a 44 px button in a bottom corner, above the call bar while it shows. */
+  /*
+   * F7 back-to-top: a 44 px button in a bottom corner. The hook hides it while the phone call bar shows (3.15.0); the
+   * bottom offset still clears the bar's height while the bar slides away.
+   */
 
   [data-bl='back-to-top'] {
     --bl-back-to-top-offset: 1.25rem;
@@ -911,6 +1133,103 @@
     padding: 1rem var(--bl-gutter, 1.25rem) var(--bl-gutter, 1.25rem);
   }
 
+  /* 29-hero.css */
+  /* S1 Hero (3.14.0): layout only. Phones stack in source order (text, actions, checklist, photo at 4:3, form). From
+     1024 px of the hero's own width, `split` puts the text and form on one side and the photo on the other, and
+     `full-bleed` puts the photo behind both, under the skin's scrim, with the form as a card beside the text. */
+
+  [data-bl-section='hero'] {
+    container: bl-hero / inline-size;
+    isolation: isolate;
+  }
+  [data-bl-section='hero'] :where(h1, p) {
+    margin: 0;
+  }
+  [data-bl-section='hero'] > [data-slot='inner'] {
+    display: grid;
+    gap: 1.5rem;
+  }
+  [data-bl-section='hero'] [data-slot='content'] {
+    display: grid;
+    align-content: start;
+    gap: 1rem;
+  }
+  [data-bl-section='hero'] [data-slot='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  [data-bl-section='hero'] [data-slot='scrim'] {
+    display: none;
+  }
+  /* The root is the bl-hero container, and a container never matches its own query, so the full-bleed root is set up
+     here: it holds the absolute photo and scrim from 1024 px. */
+  [data-bl-section='hero'][data-variant='full-bleed'] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @container bl-hero (min-width: 1024px) {
+    [data-bl-section='hero'][data-height='tall'] > [data-slot='inner'] {
+      padding-block: calc(var(--bl-space-section, 4rem) * 1.5);
+    }
+    [data-bl-section='hero'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-areas:
+        'content media'
+        'form media';
+      grid-template-rows: auto 1fr;
+      column-gap: 3rem;
+      align-items: start;
+    }
+    [data-bl-section='hero'][data-media-side='start'] > [data-slot='inner'] {
+      grid-template-areas:
+        'media content'
+        'media form';
+    }
+    [data-bl-section='hero'] [data-slot='content'] {
+      grid-area: content;
+    }
+    [data-bl-section='hero'] > [data-slot='inner'] > [data-slot='media'] {
+      grid-area: media;
+      align-self: stretch;
+    }
+    [data-bl-section='hero'] > [data-slot='inner'] > [data-slot='form'] {
+      grid-area: form;
+    }
+    /* The photo fills its side: no white gaps beside it (Romie, Gabrael and H&R). */
+    [data-bl-section='hero'] [data-slot='media'] > [data-bl='media'] {
+      height: 100%;
+    }
+    [data-bl-section='hero'] [data-slot='media'] > [data-bl='media'] > img {
+      height: 100%;
+      min-height: 24rem;
+      aspect-ratio: auto;
+    }
+
+    /* full-bleed: the photo behind the whole hero; text and the form card side by side over it. */
+    [data-bl-section='hero'][data-variant='full-bleed'] > [data-slot='inner'] {
+      position: static;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
+      grid-template-areas: 'content form';
+      grid-template-rows: auto;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] > [data-slot='inner'] > [data-slot='media'] {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] [data-slot='media'] > [data-bl='media'] > img {
+      min-height: 0;
+    }
+    [data-bl-section='hero'][data-variant='full-bleed'] [data-slot='scrim'] {
+      display: block;
+      position: absolute;
+      inset: 0;
+    }
+  }
+
   /* 30-reviews.css */
   /* S7 reviews band and the rating chip: layout only. Colours, fonts and shapes come from each site's skin. */
 
@@ -1480,4 +1799,468 @@
     color: var(--bl-color-on-band, inherit);
   }
 
+  /* 39-services.css */
+  /* Services grid (S4). `rows`: text beside the photo from 1024 px of its own width, the photo alternating sides by
+     default. `cards`: a grid of up to 4 columns, the photo on top. `compact`: a lean, wrapping list of links. Lists
+     styled without bullets carry role="list", so Safari keeps announcing them as lists. */
+
+  [data-bl-section='services'] {
+    container: bl-services / inline-size;
+  }
+  [data-bl-section='services'] [data-slot='list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='services'] [data-slot='list'] [data-slot='points'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='services'] [data-slot='list'] [data-slot='title'] {
+    margin: 0;
+  }
+
+  /* Rows: text first in reading order; the photo above it on phones. */
+  [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item'] {
+    display: grid;
+    gap: 1.25rem;
+    padding-block: 2rem;
+  }
+  [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+
+  /* Cards: the photo on top. */
+  [data-bl-section='services'][data-variant='cards'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  [data-bl-section='services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+
+  /* Compact: every service as one link, in columns. */
+  [data-bl-section='services'][data-variant='compact'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+    gap: 0 var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='services'][data-variant='compact'] [data-slot='list'] > [data-slot='item'] > [data-slot='link'] {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+  }
+
+  @container bl-services (min-width: 1024px) {
+    [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item']:has(> [data-slot='media']) {
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      column-gap: clamp(3rem, 6cqi, 5rem);
+    }
+    [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+      grid-row: 1;
+      grid-column: 1;
+    }
+    [data-bl-section='services'][data-variant='rows'] [data-slot='list'] > [data-slot='item']:has(> [data-slot='media']) > [data-slot='body'] {
+      grid-row: 1;
+      grid-column: 2;
+    }
+    [data-bl-section='services'][data-variant='rows'][data-media-side='end'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'],
+    [data-bl-section='services'][data-variant='rows'][data-media-side='alternate'] [data-slot='list'] > [data-slot='item']:nth-child(even) > [data-slot='media'] {
+      grid-column: 2;
+    }
+    [data-bl-section='services'][data-variant='rows'][data-media-side='end'] [data-slot='list'] > [data-slot='item']:has(> [data-slot='media']) > [data-slot='body'],
+    [data-bl-section='services'][data-variant='rows'][data-media-side='alternate'] [data-slot='list'] > [data-slot='item']:nth-child(even):has(> [data-slot='media']) > [data-slot='body'] {
+      grid-column: 1;
+    }
+    [data-bl-section='services'][data-variant='cards'][data-columns='2'] [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    [data-bl-section='services'][data-variant='cards'][data-columns='3'] [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='services'][data-variant='cards'][data-columns='4'] [data-slot='list'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  /* 40-location.css */
+  /* Location sections (3.15.0): LocalFacts, CouncilRules, NearbyJobs, NearbyAreas, Coverage and RelatedServices. Layout
+     only; the link lists are `LinkList`s (05-primitives.css) and the job and service cards follow 39-services.css. Lists
+     styled without bullets carry role="list", so Safari keeps announcing them as lists. */
+
+  [data-bl-section='local-facts'] [data-slot='facts'],
+  [data-bl-section='local-facts'] [data-slot='fees'],
+  [data-bl-section='council-rules'] [data-slot='fees'],
+  [data-bl-section='nearby-jobs'] [data-slot='list'],
+  [data-bl-section='related-services'] [data-slot='list'] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='local-facts'] [data-slot='source'] > a,
+  [data-bl-section='council-rules'] [data-slot='source'] > a,
+  [data-bl-section='local-facts'] [data-slot='councilLink'] > a {
+    display: inline-block;
+    padding-block: 0.25rem;
+  }
+
+  /* Nearby jobs: the photo on top of each card; a grid of up to 3 columns, or a scrolling rail. */
+  [data-bl-section='nearby-jobs'] {
+    container: bl-nearby-jobs / inline-size;
+  }
+  [data-bl-section='nearby-jobs'] [data-slot='list'] > [data-slot='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  [data-bl-section='nearby-jobs'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+  [data-bl-section='nearby-jobs'] [data-slot='list'] [data-slot='title'] {
+    margin: 0;
+  }
+  [data-bl-section='nearby-jobs'][data-variant='grid'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='nearby-jobs'][data-variant='rail'] [data-slot='list'] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(16rem, 80%);
+    gap: var(--bl-gutter, 1.25rem);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+  }
+  [data-bl-section='nearby-jobs'][data-variant='rail'] [data-slot='list'] > [data-slot='item'] {
+    scroll-snap-align: start;
+  }
+  @container bl-nearby-jobs (min-width: 1024px) {
+    [data-bl-section='nearby-jobs'][data-variant='grid'][data-columns='2'] [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    [data-bl-section='nearby-jobs'][data-variant='grid'][data-columns='3'] [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='nearby-jobs'][data-variant='rail'] [data-slot='list'] {
+      grid-auto-columns: minmax(16rem, 1fr);
+    }
+  }
+
+  /* Nearby areas as chips: the links wrap in a row. */
+  [data-bl-section='nearby-areas'][data-variant='chips'] [data-bl='link-list'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Coverage: one block per group, its heading above its list. */
+  [data-bl-section='coverage'] [data-slot='groups'] {
+    display: grid;
+    gap: 2rem;
+  }
+  [data-bl-section='coverage'] [data-slot='groups'] > [data-slot='group'] > [data-slot='groupHeading'] {
+    margin: 0 0 0.75rem;
+  }
+
+  /* Related services as cards: the photo on top. */
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] > [data-slot='item'] > [data-slot='media'] {
+    order: -1;
+  }
+  [data-bl-section='related-services'][data-variant='cards'] [data-slot='list'] [data-slot='title'] {
+    margin: 0;
+  }
+
+  /* 40-projects.css */
+  /* Projects and Gallery (3.15.0): a grid of cards or photos, one column on phones, two from 640 px and the skin's
+     columns from 1024 px of the section's own width. Lists styled without bullets carry role="list". */
+
+  [data-bl-section='projects'],
+  [data-bl-section='gallery'] {
+    container: bl-proof-grid / inline-size;
+  }
+  [data-bl-section='projects'] [data-slot='list'],
+  [data-bl-section='gallery'] [data-slot='list'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--bl-gutter, 1.25rem);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='gallery'] [data-slot='list'] > [data-slot='item'] > [data-slot='link'] {
+    display: block;
+  }
+
+  @container bl-proof-grid (min-width: 640px) {
+    [data-bl-section='projects'] [data-slot='list'],
+    [data-bl-section='gallery'] [data-slot='list'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @container bl-proof-grid (min-width: 1024px) {
+    [data-bl-section='projects'][data-columns='3'] [data-slot='list'],
+    [data-bl-section='gallery'][data-columns='3'] [data-slot='list'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    [data-bl-section='projects'][data-columns='4'] [data-slot='list'],
+    [data-bl-section='gallery'][data-columns='4'] [data-slot='list'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  /* 41-before-after.css */
+  /* Before and after (3.15.0): each pair's two frames stacked on phones and side by side from 640 px of the section's
+     width (`data-arrange="side"`), before first. Both frames share one crop, so they line up. */
+
+  [data-bl-section='before-after'] {
+    container: bl-before-after / inline-size;
+  }
+  [data-bl-section='before-after'] [data-slot='list'] {
+    display: grid;
+    gap: calc(var(--bl-gutter, 1.25rem) * 2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  [data-bl-section='before-after'] [data-slot='list'] [data-slot='frames'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--bl-gutter, 1.25rem);
+  }
+
+  @container bl-before-after (min-width: 640px) {
+    [data-bl-section='before-after'][data-arrange='side'] [data-slot='list'] [data-slot='frames'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  /* 42-licences.css */
+  /* Licences (3.15.0): a ruled ledger, the label above its value on phones and beside it from 640 px of the section's
+     width. The skin draws the rules and type. */
+
+  [data-bl-section='licences'] {
+    container: bl-licences / inline-size;
+  }
+  [data-bl-section='licences'] [data-slot='list'] {
+    margin: 0;
+  }
+  [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] {
+    display: grid;
+    gap: 0.25rem 2rem;
+    padding-block: 1rem;
+  }
+  [data-bl-section='licences'] [data-slot='list'] [data-slot='row'] > dd {
+    margin: 0;
+  }
+  [data-bl-section='licences'] [data-slot='list'] [data-slot='classes'] > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @container bl-licences (min-width: 640px) {
+    [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    }
+    [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] > dt {
+      grid-column: 1;
+      grid-row: 1;
+    }
+    [data-bl-section='licences'] [data-slot='list'] > [data-slot='row'] > dd {
+      grid-column: 2;
+    }
+  }
+
+  /* 43-quote-checklist.css */
+  /* Quote checklist (3.15.0): heading, list, then the quote button; the list's columns are the TickList's. */
+
+  [data-bl='quote-checklist'] {
+    display: grid;
+    gap: 1rem;
+    justify-items: start;
+  }
+  [data-bl='quote-checklist'] > [data-bl='tick-list'] {
+    justify-self: stretch;
+  }
+  [data-bl='quote-checklist'] > p {
+    margin: 0;
+  }
+
+  /* 44-emergency.css */
+  /* Emergency band (3.15.0): heading and summary, then the actions (phone first), side by side from 768 px of the
+     band's width. The skin colours it. */
+
+  [data-bl-section='emergency'] {
+    container: bl-emergency / inline-size;
+  }
+  [data-bl-section='emergency'] > [data-slot='inner'] {
+    display: grid;
+    gap: 1rem;
+  }
+  [data-bl-section='emergency'] [data-slot='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  @container bl-emergency (min-width: 768px) {
+    [data-bl-section='emergency'] > [data-slot='inner'] {
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      column-gap: 2rem;
+    }
+  }
+
+  /* 45-area-map.css */
+  /* Area map (3.15.0): the map and its place list, side by side from 768 px of the section's width (`data-list="beside"`)
+     or stacked. The SVG's layers are `<use>` references into the base file, coloured here from the site's `--bl-map-*`
+     tokens (falling back to its colour tokens); on narrow widths the frame shows the model's phone crop. */
+
+  [data-bl-section='area-map'] {
+    container: bl-area-map / inline-size;
+  }
+  [data-bl-section='area-map'] [data-slot='body'] {
+    display: grid;
+    gap: var(--bl-gutter, 1.25rem);
+  }
+  [data-bl-section='area-map'] [data-slot='figure'] {
+    margin: 0;
+    display: grid;
+    gap: 0.5rem;
+  }
+  [data-bl-section='area-map'] [data-slot='frame'] {
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: var(--bl-map-ratio, 1);
+  }
+  [data-bl-section='area-map'] [data-slot='map'] {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  [data-bl-section='area-map'] [data-slot='caption'] {
+    display: grid;
+    gap: 0.25rem;
+  }
+  [data-bl-section='area-map'] [data-slot='legend'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1rem;
+  }
+  /* Each legend line starts with the marker it names, drawn in the same layer as the map's (3.15.0). */
+  [data-bl-section='area-map'] :is([data-slot='legendJobs'], [data-slot='legendBase']) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+  }
+  [data-bl-section='area-map'] :is([data-slot='legendJobs'], [data-slot='legendBase']) > svg {
+    width: 0.9em;
+    height: 0.9em;
+  }
+  [data-bl-section='area-map'] [data-slot='places'] {
+    display: grid;
+    align-content: start;
+    gap: 0.75rem;
+  }
+  [data-bl-section='area-map'] [data-slot='placesTitle'],
+  [data-bl-section='area-map'] [data-slot='places'] > p {
+    margin: 0;
+  }
+
+  /* The layers. */
+  [data-bl-section='area-map'] [data-layer='water'] {
+    fill: var(--bl-map-water, transparent);
+  }
+  [data-bl-section='area-map'] [data-layer='land'] {
+    fill: var(--bl-map-land, var(--bl-color-surface, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='served'] {
+    fill: var(--bl-map-served, var(--bl-color-canvas, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='focus'] {
+    fill: var(--bl-map-focus, var(--bl-color-action, Highlight));
+  }
+  [data-bl-section='area-map'] [data-layer='linked'] use {
+    fill: var(--bl-map-linked, var(--bl-color-canvas, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='linked'] a:hover use {
+    fill: var(--bl-map-linked-hover, var(--bl-color-surface, Canvas));
+  }
+  [data-bl-section='area-map'] [data-layer='outline'] {
+    stroke: var(--bl-map-outline, currentColor);
+    stroke-opacity: 0.35;
+    stroke-width: 1px;
+  }
+  [data-bl-section='area-map'] [data-layer='names'] {
+    fill: var(--bl-map-name, var(--bl-color-ink, CanvasText));
+    stroke: var(--bl-map-name-halo, var(--bl-color-canvas, Canvas));
+    paint-order: stroke;
+    text-anchor: middle;
+    pointer-events: none;
+  }
+  [data-bl-section='area-map'] [data-layer='names'] [data-state='focus'] {
+    font-weight: 700;
+  }
+  [data-bl-section='area-map'] [data-layer='jobs'] {
+    fill: var(--bl-map-job, var(--bl-color-action, Highlight));
+    stroke: var(--bl-color-canvas, Canvas);
+    pointer-events: none;
+  }
+  [data-bl-section='area-map'] [data-layer='base'] {
+    fill: var(--bl-map-base, var(--bl-color-ink, CanvasText));
+    stroke: var(--bl-color-canvas, Canvas);
+    pointer-events: none;
+  }
+
+  /* Narrow widths: the phone crop around the served area. */
+  @container bl-area-map (max-width: 639px) {
+    [data-bl-section='area-map'] [data-slot='frame'] {
+      aspect-ratio: var(--bl-map-crop-ratio, var(--bl-map-ratio, 1));
+    }
+    [data-bl-section='area-map'] [data-slot='map'] {
+      position: absolute;
+      width: var(--bl-map-crop-size, 100%);
+      max-width: none;
+      left: var(--bl-map-crop-x, 0);
+      top: var(--bl-map-crop-y, 0);
+    }
+  }
+
+  /*
+   * Beside a place list the map takes three fifths of the width. A region or overview map with no list fills the body
+   * (3.15.0); a locator keeps its column. Names on a map that wide draw at 70%, so they read at about the same size.
+   */
+  @container bl-area-map (min-width: 768px) {
+    [data-bl-section='area-map'][data-list='beside'] [data-slot='body']:has(> [data-slot='places']),
+    [data-bl-section='area-map'][data-variant='locator'][data-list='beside'] [data-slot='body'] {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+      align-items: start;
+    }
+  }
+  @container bl-area-map (min-width: 960px) {
+    [data-bl-section='area-map']:not([data-variant='locator']) [data-slot='body']:not(:has(> [data-slot='places'])) [data-layer='names'] text {
+      font-size: 70%;
+    }
+  }
+
 }