/* Custom CSS */

/* #page-content section {
	padding: 72px 0;
} */

.top {
  margin-top: -64px;
}

.bottom {
  margin-bottom: -64px;
}

.img
{
	border-radius: 10px;
}

.homeheading {
	font-size: 60px;
}

@media (max-width: 767px) {
  .homeheading {
	  font-size: 30px;
  }
  .heading {
	  font-size: 30px;
  }
}

.homebanner {
  width: 100%;
	border-radius: 0px;
}

.textbox {
  background-color: var(--colour3);
  /* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5); */
  box-shadow: 4px 5px 17px -4px var(--colour4);
  padding: 32px;
  border-radius: 10px;
}

.overtext {
  margin-bottom: -24px;
}

.overtext .heading {
  align-self: center;
}

.undertext {
  margin-top: -24px;
}

.undertext .heading {
  align-self: center
}

.overflow {
  overflow-wrap: anywhere;
}

.overflowx {
  overflow-x: visible;
}

.overflowy {
  overflow-y: visible;
}

.list {
  /* list-style-position: inside; */
  /* list-style-type: none; */
  margin-left: -20px;
  /* margin-top: 0px;
  margin-bottom: 0px; */
  align-items: start;
}

.tickyicons {
  color: var(--colour2);
}

@font-face {
  font-family: "Anton";
  /* src: url("../Ameyallinda Signature.ttf"); */
  src: url("../Anton-Regular.ttf");
}

@font-face {
  font-family: "AnekLatin";
  /* src: url("../Ameyallinda Signature.ttf"); */
  src: url("../Anek\ Latin.ttf");
}

.btnnew {
  border-top: 1px solid;
  border-bottom: 1px solid;
  justify-self: start;
  padding: 16px;
  font-weight: 400;
}

.btnnew:hover {
  color: #ccc;
}

/* COLOUR BG */

.colour-bg {
  background-color: var(--colour2);
  padding-top: 64px;
  padding-bottom: 64px;
}

.colour-bg :is(strong, b, h3, h2, h1, a) {
  color: var(--colour1) !important;
}

.colour-bg :is(li, p) {
  color: var(--colour3) !important;
}

.minicolourbg {
  padding: 32px;
  box-sizing: border-box;
  border-radius: 10px;
}

/* SHAPE DIVIDER TOP */

.custom-shape-divider-top-1718618646 {
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1718618646 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 50px;
}

.custom-shape-divider-top-1718618646 .shape-fill {
  fill: var(--colour2);
}

/* SHAPE DIVIDER BOTTOM */

.custom-shape-divider-bottom-1718619373 {
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1718619373 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 39px;
}

.custom-shape-divider-bottom-1718619373 .shape-fill {
  fill: var(--colour2);
}



.overcarda {
  /* background-color: #e2e2e2;
  padding: 24px;
  border-radius: 20px; */

  border-radius: 10px;
  /* box-shadow: 4px 5px 17px -4px #2c2c2b; */
  box-shadow: 4px 5px 17px -4px var(--colour4);
  background-color: #fff;
  padding: 24px;
  z-index: 3;
  /* border: solid 4px aliceblue; */
  margin-top: -96px;
}

.cardya {
  /* border: 4px solid var(--colour2); */
  padding: 32px;
  /* border-radius: 20px; */
  background-color: var(--colour3);
  width: 75%;
  /* height: 250px; */
  justify-self: center;

  border-right: 1px dashed black;
}

.cardya h2 {
  justify-self: center;
  text-align: center;
  color: var(--colour1)!important;
}

.cardya p {
  justify-self: center;
  text-align: center;
  color: var(--colour4)!important;
}

.cardya i {
  justify-self: center;
  text-align: center;
  color: var(--colour4)!important;
  font-size: large;
}

.cardya2 {
  padding: 32px;
  background-color: var(--colour3);
  width: 75%;
  justify-self: center;

}

.cardya2 h2 {
  justify-self: center;
  text-align: center;
  color: var(--colour1)!important;
}

.cardya2 p {
  justify-self: center;
  text-align: center;
  color: var(--colour4)!important;
}

.cardya2 i {
  justify-self: center;
  text-align: center;
  color: var(--colour4)!important;
  font-size: large;
}




.cardyb {
  border: 4px solid var(--colour2);
  padding: 32px;
  border-radius: 20px;
  background-color: var(--colour1);
  width: 75%;
  /* height: 250px; */
  justify-self: center;
  box-shadow: 4px 5px 17px -4px var(--colour4);
}

.cardyb h2 {
  justify-self: center;
  text-align: center;
  color: var(--colour2)!important;
}

.cardyb p {
  justify-self: center;
  text-align: center;
  color: var(--colour2)!important;
}

.cardyb i {
  justify-self: center;
  text-align: center;
  color: var(--colour2)!important;
  font-size: large;
}


.cardyc {
  border: 4px solid var(--colour1);
  padding: 32px;
  border-radius: 20px;
  background-color: var(--colour2);
  width: 75%;
  /* height: 250px; */
  justify-self: center;
  box-shadow: 4px 5px 17px -4px var(--colour4);
}

.cardyc h2 {
  justify-self: center;
  text-align: center;
  color: var(--colour1)!important;
}

.cardyc p {
  justify-self: center;
  text-align: center;
  color: var(--colour1)!important;
}

.cardyc i {
  justify-self: center;
  text-align: center;
  color: var(--colour1)!important;
  font-size: large;
}


#page-content-2 {
  display: grid;
  width: 100%;
  grid-gap: 32px;
  padding: 32px 0 0px;
}

#page-content-3 {
  display: grid;
  width: 100%;
  /* grid-gap: 32px; */
  padding: 0px 0 0px;
}

/*
@media( max-width: 992px )
{
	#topbar
	{
		display: none;
	}

}
*/

.availalign {
  display: grid;
  justify-content: center;
}

.availaligninner {
  display: grid;
  justify-content: center;
}

@media (max-width:900px) {
  .availaligninner {
    max-width: 100%;
  }
}

/*
hr { 
    background: url("../img/logo2.png") no-repeat top center;
    background-size: contain;
    display: block;
    height: 50px;
    border: 0;
    position: relative;
}
hr:before,
hr:after {
    content: '';
    display: block;
    position: absolute;
    background: var(--colour1);
    height: 1px;
    top: 22px;
}
hr:before {
    left: 0;
    right: 60%;
    margin-right: 10px;
    margin-left: 70px;
}
hr:after {
    right: 0;
    left: 60%;
    margin-left: 10px;
    margin-right: 70px;
} 
*/

.cent {
  text-align: center;
  justify-content: center;
}

.button-alignment {
  text-align: center;
}

figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 320px;
  margin: auto;
}


figcaption {
  background-color: var(--colour4);
  color: var(--colour3);
  font: italic smaller sans-serif;
  padding: 10px;
  text-align: center;
}

.zoom {
  transition: transform .2s;
}

.zoom:hover {
  transform: scale(1.05);
}

/*
.quotes
{
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;
  box-sizing: border-box;
  padding:20px;
padding-top: 50px;
	padding-bottom: 50px;
}

.quotes .box
{
  position: relative;
  padding:80px 40px 40px;
  transition:0.5s;
  text-align: center;
  background:#fff;
  border-radius:10px;
}

.quotes .box:hover
{
  background-color: var(--colour1);
}

.quotes .box p
{
  margin:0;
  padding:0;
  transition:0.5s;
  text-align: center;
  justify-self: center;
}

.quotes .box h4
{
  margin:20px 0 0;
  padding:0;
  transition:0.5s;
  font-size:18px;
  color:var(--colour1);
  font-weight:700;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  justify-self: center;
}

.quotes .box h4 span
{
  font-weight: 600;
  font-size: 14px;
  color: #c5c5c5;
  transition: 0.5s;
}

.quotes .box:hover p,
.quotes .box:hover h4,
.quotes .box:hover h4 span
{
  color:var(--colour3);
}

.quotes .box .imgBox
{
  position:absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%);
  width: 120px;
  height: 120px;
  border-radius:50%;
  overflow: hidden;

}

.quotes .box:before
{
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  background: url("../img/quotes.webp");
  background-size: cover;
  opacity: 0.02;
  pointer-events: none;
  transition: 0.5s;
}

.quotes .box:hover:before
{
  transform: translateY(-60px);
  opacity: 1;
}

.quotes .box:after
{
  content:'';
  position: absolute;
  bottom:20px;
  left: 20px;
  width: 80px;
  height: 80px;
  background: url("../img/quotes.webp");
  background-size: cover;
  opacity: 0.02;
  pointer-events: none;
  transition: 0.5s;
  transform: rotate(180deg) translateY(0px);
}

.quotes .box:hover:after
{
  transform: rotate(180deg) translateY(-60px);
  opacity: 1;
}
*/

.imageback {
  padding: 64px 0px;
  background-image: url("../img/imageback.jpg");
     background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /*    color: var(--colour3);*/
}

.imageback :is(strong, b, h3, h2, h1, a) {
  color: var(--colour3);
}

.imageback :is(li, p) {
  color: var(--colour3)!important;
}

.imageback b {
  font-weight: 900;
}


.imageback2 {
  padding: 64px 0px;
  background-image: url("../img/imageback2.jpg");
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--colour3);
}


/* Temp 5 stuff */

/* .contact-item .element svg {
    align-self: center;
    padding: 12px;
    border: solid 2px white;
    border-radius: 100%;
	color: var(--colour3);
} */

/* #footer .socials svg {
    align-self: center;
    padding: 12px;
    border: solid 2px white;
    border-radius: 100%;
	background-color: var(--colour1);
	color: var(--colour3);
} */




/* All Roofs South West Limited | custom.css */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Per-site overrides */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Every page links this last, so anything written here wins over the
   template's own stylesheets. Put a one-off tweak for a single site at
   the bottom, under its own ruler.

   A template that wants its own starting point can keep a css/custom.css
   of its own - that one is used instead of this. */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Set pieces */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The sections the Claude tie-in ( claude-copy.php ) builds a page out of.
   They are plain h2, h3, p, ul and img inside Alchemy's grid classes, so
   the template's own type does nearly all the work. Everything here is
   prefixed piece- so it can never fight a template's core.css.

   The colours are never the client's two raw colours. They come from
   site-style.php, which works out from the pair a set that always reads:

     #111111           a true dark - bands, panels, dark pages
     #222222      a step lighter, for alternating dark sections
     #d6810b        the picking-out colour for large or graphic use
     #aa6709   the same, dark enough for small text on white
     #d6810b   the accent as it shows on #111111
     #111111     text on an #d6810b fill
     #111111 text on an #d6810b fill
     #fcf5ec          a pale wash for soft bands
     #f7e6ce     a hairline in the same family

   So a charcoal-and-grey gym gets white on charcoal, not white on grey,
   and a yellow-and-white café gets a deep olive dark instead of none.

   The full list of pieces, and when each one is used, lives in
   assets/claude/page-rules.md - keep the two in step.

   - - - Template skins - - -

   The pieces are the same HTML on every template, but each template
   gives them its own feel. forge.php appends the template's skin -
   assets/templates/shared/skins/<template>.css - below this sheet, and
   the page preview does the same. A skin sets these, then adds the
   template's own signature touches:

     --piece-radius-media   photographs
     --piece-radius-card    cards, steps, options, featured services
     --piece-radius-btn     buttons and tags
     --piece-radius-icon    icon rings and checklist ticks

   Each skin also gives the headings their own style - case, tracking,
   weight, a signature mark, and how .piece-accent and .piece-second
   look. Fonts change from company to company, so the weights are never
   numbers in a skin, always these:

     --heading-light     --heading-regular     --heading-strong
     --heading-italic    italic, or normal for a font with no italic

   The skin sets them for the template's own font ( and names any weights
   it needs on an "@fonts" line, which the build links ); a heading font
   chosen on the Template step sets them again for itself.

   Change a skin, never the pieces, to change how one template looks. */

/* - - - a heading group - - - */

/* h1 or h2, with the business name or a strapline as an h3 under it, and a
   thin rule to close the group off */

.piece-heading
{
    display: grid;
    grid-gap: 8px;
    width: 100%;
    padding-bottom: 16px;

    border-bottom: solid 1px #d6810b;
}

.piece-heading h3
{
    color: #aa6709;
}

/* - centred text: section headings over a grid, intros, the final CTA - */

.piece-centre :is( h1, h2, h3, h4, p )
{
    justify-self: center;
    text-align: center;
}

.piece-centre.piece-heading,
.piece-centre .piece-heading
{
    border-bottom: none;
}

/* - a readable line length for centred or full-width text - */

.piece-narrow
{
    width: 100%;
    max-width: 720px;
    justify-self: center;
}

/* - the line under a heading that sets the page up - */

.piece-lead
{
    font-size: 1.18em;
    line-height: 1.6;
    opacity: .9;
  font-family: "Anton";

}

/* - - - a picture inside a piece - - - */

/* Alchemy's .img centres and scales; these round it off and stop a tall
   photograph running away with the row. */

.piece-shot
{
    /* aspect-ratio: 4 / 3; */
    overflow: hidden;
    border-radius: var( --piece-radius-media, 12px );
}

.piece-shot img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* - the same frame in two more shapes, so a picture beside text can be
     matched to how much text there is - see "Balancing a split" in
     assets/claude/page-rules.md -

     wide ( 16:9 ):  beside a short block, so the picture does not tower
     tall ( 4:5 ):   in the narrow third of a col-2a / col-2b, beside a
                     long block, so the picture holds its own height */

.piece-shot-wide
{
    /* aspect-ratio: 16 / 9; */
}

.piece-shot-tall
{
    /* aspect-ratio: 4 / 5; */
}

/* a shot fills its column - in a narrow one it should not shrink to the
   picture's own width */
.piece-split > .element > .piece-shot
{
    width: 100%;
}

/* - */

/* copy beside a picture sits in the middle of it, not at the top */

.piece-split
{
    align-items: center;
}

/* - - - bands - - - */

/* A full-width dark section. Every other section at most, and never two
   side by side. #111111, not the raw secondary colour - a light grey
   secondary used to put white text on light grey. */

.piece-band
{
    padding: 64px 0;

    background-color: #111111;
}

.piece-band :is( h1, h2, h3, h4, p, li, b, blockquote )
{
    color: #fff;
}

/* - the same, over a photograph - assets/img/src/band.jpg when there is
     one, the dark underneath when there is not - */

.piece-band-image
{
    padding: 64px 0;

    background-color: #111111;
    background-image: linear-gradient( rgba( 0, 0, 0, .45 ), rgba( 0, 0, 0, .45 ) ), url( "../img/src/band.jpg" );
    background-position: center center;
    background-size: cover;
}

.piece-band-image :is( h1, h2, h3, h4, p, li, b, blockquote )
{
    color: #fff;
}

/* - - - coloured sections meet flush - - - */

/* Each template's core.css spaces the page's sections with a grid gap
   ( 32px; Pigeon none ). Between a white section and anything else the
   gap is white on white and goes unseen, but between two sections that
   both carry their own colour or photograph - a tint beside a dark band,
   a photo band beside a cover - it showed as a white stripe. Those meet
   flush: the second is pulled up by the gap. --page-gap is the template's
   gap; a skin with a different one sets it. */

#page-content > section:is( .piece-band, .piece-band-tint, .piece-band-image, .piece-cover, .piece-cta-band, .piece-dark-alt ) + section:is( .piece-band, .piece-band-tint, .piece-band-image, .piece-cover, .piece-cta-band, .piece-dark-alt ),
#page-content > section.piece-dark-alt + section.piece-dark,
#page-content > section.piece-dark + section.piece-dark-alt
{
    margin-top: calc( var( --page-gap, 32px ) );
}

/* The same at the foot of a page. The page content keeps some space under
   its last section ( 32 to 75px, by template ) before the footer - unseen
   under a white section, but under a tint, a band or a photograph it was a
   white bar between that and the footer. A coloured last section runs
   straight into the footer instead. */

#page-content:has( > section:last-of-type:is( .piece-band, .piece-band-tint, .piece-band-image, .piece-cover, .piece-cta-band, .piece-dark-alt ) )
{
    padding-bottom: 0;
}

/* - - - boxes - - - */

/* align-content stops a short box spreading its lines out to match the
   tallest one in the row */

.piece-box
{
    align-content: start;
    padding: 32px;
    box-sizing: border-box;

    background-color: #fff;
    border-radius: var( --piece-radius-card, 16px );
    box-shadow: 0 4px 16px rgba( 0, 0, 0, .1 );

    transition: ease all .3s;
}

.piece-box:hover
{
    transform: translateY( -6px );
}

.piece-box :is( h2, h3, h4, p, li )
{
    color: #222;
}

.piece-box h3
{
    color: #aa6709;
}

/* - the dark box, for a band - */

.piece-box-dark
{
    background-color: #111111;
    box-shadow: 0 4px 16px rgba( 0, 0, 0, .25 );
}

.piece-box-dark :is( h2, h4, p, li )
{
    color: #fff;
}

.piece-box-dark h3
{
    color: #d6810b;
}

.piece-band .piece-box-dark,
.piece-band-image .piece-box-dark
{
    background-color: rgba( 0, 0, 0, .35 );
}

/* - - - a bullet list - - - */

/* Alchemy resets p and li margins, so a list needs its marker back. The
   marker is drawn here rather than by the browser so it takes the accent
   and lines up with wrapped lines. */

.piece-list
{
    display: grid;
    grid-gap: 8px;
    margin: 0;
    padding: 0;

    list-style: none;
}

.piece-list li
{
    display: grid;
    grid-template-columns: 20px auto max-content;
    grid-gap: 8px;
}

.piece-list li::before
{
    content: "\2713";
    font-weight: 700;
    color: #d6810b;
}

/* - */

.piece-list-chevron li::before
{
    content: "\203A";
    font-size: 1.4em;
    line-height: 1;
}

/* - - - a pulled-out quote - - - */

.piece-quote
{
    align-content: start;
    margin: 0;
    padding: 24px 24px 24px 28px;
    box-sizing: border-box;

    border-left: solid 3px #d6810b;
    border-radius: 0 15px 15px 0;
    background-color: rgba( 0, 0, 0, .03 );
}

.piece-quote p
{
    font-style: italic;
}

.piece-quote-who
{
    font-style: normal;
    font-weight: 600;
    opacity: .8;
}

.piece-band .piece-quote,
.piece-band-image .piece-quote
{
    background-color: rgba( 255, 255, 255, .08 );
}

/* - - - buttons - - - */

/* An <a>, never a <button> inside one. Two at most, side by side. */

.piece-btn
{
    display: grid;
    justify-self: start;
    padding: 14px 32px;

    background-color: #d6810b;
    border: solid 1px #d6810b;
    border-radius: var( --piece-radius-btn, 32px );
    text-decoration: none;

    transition: ease all .3s;

	border-radius: 5px;

}

.piece-btn :is( h4, p, span )
{
    margin: 0;

    color: #111111;
    text-align: center;
}

.piece-btn:hover
{
    transform: translateY( -2px );
    box-shadow: 0 12px 24px -12px rgba( 0, 0, 0, .45 );
}

/* - */

.piece-btn-alt
{
    background-color: transparent;
}

.piece-btn-alt :is( h4, p, span )
{
    color: #aa6709;
}

/* - inside a band, the solid one turns white so it cannot vanish - */

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn
{
    background-color: #fff;
    border-color: #fff;
}

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn :is( h4, p, span )
{
    color: #111111;
}

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn-alt
{
    background-color: transparent;
    border-color: rgba( 255, 255, 255, .7 );
}

:is( .piece-band, .piece-band-image, .piece-cover ) .piece-btn-alt :is( h4, p, span )
{
    color: #fff;
}

/* - */

.piece-btn-row
{
    display: grid;
    grid-gap: 16px;
    justify-content: start;
}

/* a row of buttons under a heading or text needs more than the 16px the
   grid gives everything else, or it reads as part of the line above */
* + .piece-btn-row
{
    margin-top: 12px;
}

.piece-centre .piece-btn-row,
.piece-centre .piece-btn
{
    justify-content: center;
    justify-self: center;
}

/* - - - a row of logos - accreditations, trade bodies - - - */

.piece-logos img
{
    max-height: 96px;
    max-width: 100%;
    justify-self: center;
    align-self: center;
}

/* - - - a divider, for pages with no bands - - - */

.piece-rule
{
    width: 100%;
    height: 1px;
    margin: 0;

    background-color: rgba( 0, 0, 0, .12 );
    border: 0;
}

/* - */

@media( min-width: 768px )
{
    .piece-btn-row
    {
        grid-auto-flow: column;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Set pieces - the designed layer */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The pieces that make a page look designed rather than assembled:
   hierarchy ( eyebrow, display heading, lead ), framed imagery, numbers
   and steps, refined cards, option cards, a softer tinted band, photo
   covers and the call-to-action banner. */

/* - - - hierarchy - - - */

/* a short label over a heading - spaced capitals and a rule leading in */
.piece-eyebrow
{
    display: grid;
    grid-template-columns: 32px auto;
    grid-gap: 12px;
    align-items: center;
    justify-self: start;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #aa6709;
}

.piece-eyebrow::before
{
    content: "";
    height: 2px;

    background-color: #d6810b;
}

.piece-centre .piece-eyebrow,
.piece-intro .piece-eyebrow,
.piece-eyebrow.piece-centre
{
    justify-self: center;
}

/* - a heading that sets a section, larger and tighter than the
     template's default - */

.piece-display
{
    font-size: clamp( 32px, 4.2vw, 54px );
    line-height: 1.08;
    letter-spacing: -.02em;
}

h2.piece-display
{
    font-size: clamp( 25px, 3.4vw, 46px );
    line-height: 1.12;
}

/* one or two words of the heading picked out - the client's own words */
.piece-accent
{
    color: #d6810b;
}

/* the second half of a two-part heading ( "Quality Work. Built to Last." ),
   always on a line of its own. Each skin styles it its own way - in the
   accent, in italic, lighter, highlighted - so here it only breaks */
.piece-second
{
    color: #aa6709;
}

.piece-second::before
{
    content: "\A";
    white-space: pre;
}

/* long words in big, tracked headings wrap rather than overflow a phone */
.piece-display
{
    overflow-wrap: break-word;
}

/* a heading block for a section: eyebrow, heading, lead - centred and
   kept to a readable width */
.piece-intro
{
    display: grid;
    grid-gap: 16px;
    justify-items: center;
    justify-self: center;
    width: 100%;
    max-width: 760px;

    text-align: center;
}

.piece-intro :is( h1, h2, h3, p )
{
    justify-self: center;
    text-align: center;
}

/* - - - imagery - - - */

/* A plain holder for a picture and, when there is one, its floating card.
   It used to set a block of the accent behind the picture's corner, with
   a drop shadow under it; both are gone. Photographs sit flat with
   rounded corners, which reads cleanly on every template. */
.piece-media
{
    position: relative;
    display: grid;
    width: 100%;
}

.piece-media > *
{
    position: relative;
    z-index: 1;
}

/* - a small card laid over a picture's corner - a figure, a short review
     or the years in business, taken from the copy - */

.piece-float
{
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;

    display: grid;
    grid-gap: 4px;
    max-width: 240px;
    padding: 18px 22px;
    box-sizing: border-box;

    background-color: #fff;
    border-radius: var( --piece-radius-card, 14px );
}

.piece-float b
{
    font-size: 30px;
    line-height: 1;
    color: #d6810b;
}

.piece-float p
{
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

.piece-media-left .piece-float
{
    right: 20px;
    left: auto;
}

/* - three or more pictures together: one large, the rest beside it - */

.piece-mosaic
{
    display: grid;
    grid-gap: 16px;
}

.piece-mosaic .piece-shot
{
    border-radius: var( --piece-radius-media, 14px );
}

/* - - - numbers and steps - - - */

/* figures the copy already states - years, jobs, rating */
.piece-stats
{
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    grid-gap: 32px 24px;
    padding: 32px 0;

    border-top: solid 1px rgba( 0, 0, 0, .1 );
    border-bottom: solid 1px rgba( 0, 0, 0, .1 );
}

.piece-stat
{
    display: grid;
    grid-gap: 6px;
    justify-items: center;
    text-align: center;
}

.piece-stat b
{
    font-size: clamp( 34px, 4vw, 48px );
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #d6810b;
}

.piece-stat p
{
    justify-self: center;

    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
}

/* - a process, numbered by the stylesheet so the copy is not touched -
     only for things that happen in order - */

.piece-steps
{
    display: grid;
    grid-gap: 24px;

    counter-reset: piece-step;
}

.piece-step
{
    display: grid;
    grid-gap: 10px;
    align-content: start;
    padding: 28px;
    box-sizing: border-box;

    background-color: #fff;
    border: solid 1px rgba( 0, 0, 0, .08 );
    border-radius: var( --piece-radius-card, 16px );

    counter-increment: piece-step;
}

.piece-step::before
{
    content: counter( piece-step, decimal-leading-zero );

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #aa6709;
}

.piece-step :is( h3, p, li )
{
    color: #222;
}

/* - - - cards - - - */

/* The refined card: a hairline border, an accent bar that grows on
   hover, and a lift. Reads well on white and on the tinted band. */
.piece-card
{
    position: relative;
    display: grid;
    grid-gap: 12px;
    align-content: start;
    padding: 32px 28px;
    box-sizing: border-box;
    overflow: hidden;

    background-color: #fff;
    border: solid 1px rgba( 0, 0, 0, .08 );
    border-radius: var( --piece-radius-card, 16px );
    box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 );

    transition: ease all .3s;
}

.piece-card::before
{
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 48px;
    height: 4px;

    background-color: #d6810b;

    transition: ease all .3s;
}

.piece-card:hover
{
    transform: translateY( -6px );
    box-shadow: 0 24px 48px -24px rgba( 0, 0, 0, .25 );
}

.piece-card:hover::before
{
    width: 100%;
}

.piece-card :is( h3, h4 )
{
    color: #111111;
}

.piece-card :is( p, li )
{
    color: #444;
}

/* - a card with its picture on top, edge to edge - */

.piece-card-image
{
    padding-top: 0;
}

.piece-card-image > .piece-shot
{
    margin: 0 -28px 8px;
    border-radius: 0;
}

/* - - - option cards - - - */

/* Choices the client offers side by side - memberships, packages, ways to
   start. One may be featured: the dark card, lifted. A short tag can sit
   on top of it. Not for steps - those are .piece-steps. */

.piece-options
{
    align-items: stretch;
}

.piece-option
{
    position: relative;
    display: grid;
    grid-gap: 14px;
    align-content: start;
    padding: 40px 32px 36px;
    box-sizing: border-box;

    background-color: #fff;
    border: solid 1px rgba( 0, 0, 0, .1 );
    border-radius: var( --piece-radius-card, 20px );

    transition: ease all .3s;
}

.piece-option:hover
{
    transform: translateY( -4px );
    box-shadow: 0 24px 48px -28px rgba( 0, 0, 0, .3 );
}

.piece-option :is( h3, h4 )
{
    color: #111111;
}

.piece-option :is( p, li )
{
    color: #444;
}

/* - the price or the headline figure of an option - */

.piece-option-price
{
    font-size: 15px;
}

.piece-option-price b
{
    font-size: clamp( 30px, 3.4vw, 42px );
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #111111;
}

/* - the small pill on top - */

.piece-option-tag
{
    position: absolute;
    top: 0;
    left: 32px;
    transform: translateY( -50% );

    padding: 6px 14px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #111111;

    background-color: #d6810b;
    border-radius: var( --piece-radius-btn, 20px );
}

/* - the featured one: dark, lifted - */

section .piece-option.piece-option-featured
{
    background-color: #111111;
    border-color: #111111;
    box-shadow: 0 32px 64px -32px rgba( 0, 0, 0, .55 );
}

section .piece-option.piece-option-featured :is( h3, h4, b, .piece-option-price b )
{
    color: #fff;
}

section .piece-option.piece-option-featured :is( p, li )
{
    color: rgba( 255, 255, 255, .8 );
}

section .piece-option.piece-option-featured .piece-option-tag
{
    color: #111111;

    background-color: #d6810b;
}

section .piece-option.piece-option-featured .piece-list li::before
{
    color: #d6810b;
}

section .piece-option.piece-option-featured .piece-btn
{
    background-color: #d6810b;
    border-color: #d6810b;
}

section .piece-option.piece-option-featured .piece-btn :is( h4, p, span )
{
    color: #111111;
}

/* - - - more on the cards - - - */

/* The card family. Every card is the same HTML on every template; the
   skins give them the template's surface - its corners, border or
   shadow, tint or white, brackets or bars - by listing these classes
   with .piece-card in their card rules.

     service cards      .piece-card, with an icon, a price and a link
     price cards        .piece-option, with a price per period and ticks
     product cards      .piece-product
     info / stat cards  .piece-stats.piece-stats-cards
     team cards         .piece-member
     testimonial cards  .piece-testimonial
     category cards     .piece-category ( a link to another page )
     article cards      .piece-article ( a link to a post )

   See section 7 of assets/claude/page-rules.md for when each is used. */

/* - card titles: the heading font at its regular weight, whatever the
     template does with h3 - */

:is( .piece-card, .piece-option, .piece-product, .piece-member, .piece-category, .piece-article ) :is( h3, h4 )
{
    font-size: 20px;
    font-weight: var( --heading-regular, 600 );
    line-height: 1.3;
}

/* - the shared surface of the newer cards - */

:is( .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat )
{
    position: relative;
    display: grid;
    align-content: start;
    box-sizing: border-box;
    overflow: hidden;

    text-align: left;
    text-decoration: none;

    background-color: #fff;
    border: solid 1px rgba( 0, 0, 0, .08 );
    border-radius: var( --piece-radius-card, 16px );
    box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 );

    transition: ease all .3s;
}

/* the ones that are links lift a little */
:is( a.piece-category, a.piece-article, .piece-product ):hover
{
    transform: translateY( -4px );
    box-shadow: 0 24px 48px -26px rgba( 0, 0, 0, .3 );
}

:is( .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article ) :is( h3, h4 )
{
    margin: 0;

    color: #111111;
}

:is( .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article ) p
{
    margin: 0;

    color: #4a4a4a;
}

/* a picture across the top of a card, edge to edge */
:is( .piece-product, .piece-member, .piece-category, .piece-article ) > .piece-shot
{
    width: 100%;
    border-radius: 0;
}

/* - the small link at the foot of a card: spaced capitals and an arrow - */

.piece-card-link
{
    display: inline-grid;
    grid-auto-flow: column;
    grid-gap: 8px;
    align-items: center;
    justify-self: start;
    margin-top: 6px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #aa6709;
}

.piece-card-link::after
{
    content: "\2192";

    transition: ease transform .3s;
}

.piece-card-link:hover::after
{
    transform: translateX( 4px );
}

/* - a price on a card - */

.piece-card-price
{
    margin-top: 4px;

    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #111111;
}

/* - - - service cards: icons, prices, links, dark and tinted - - - */

/* the icon: a small tile of the tint, top left - or riding the photo's
   lower edge on a picture card */
:is( .piece-card, :where( .piece-stats-cards ) > .piece-stat ) > :is( i, svg )
{
    justify-self: start;
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    padding: 13px;

    font-size: 26px;
    color: #d6810b;

    background-color: #fcf5ec;
    border-radius: var( --piece-radius-icon, 50% );
}

.piece-card-image > .piece-shot + :is( i, svg )
{
    position: relative;
    z-index: 1;
    margin-top: -42px;

    box-shadow: 0 6px 16px -8px rgba( 0, 0, 0, .3 );
}

/* the dark card - one in a row, to pick out the lead service */
section .piece-card.piece-card-dark
{
    background-color: #111111;
    border-color: #111111;
}

section .piece-card.piece-card-dark :is( h3, h4, .piece-card-price )
{
    color: #fff;
}

section .piece-card.piece-card-dark :is( p, li )
{
    color: rgba( 255, 255, 255, .82 );
}

section .piece-card.piece-card-dark .piece-card-link
{
    color: #d6810b;
}

section .piece-card.piece-card-dark > :is( i, svg )
{
    color: #d6810b;

    background-color: rgba( 255, 255, 255, .08 );
}

section .piece-card.piece-card-dark::before
{
    background-color: #d6810b;
}

/* the tinted card - a softer way to pick one out: a wash a step deeper
   than the tint, so it still shows on the tinted band and on templates
   whose cards are already tinted */
section .piece-card.piece-card-tint
{
    background-color: color-mix( in srgb, #d6810b 13%, #fff );
    border-color: transparent;
}

/* - - - price cards: the price per period, ticks, an outline button - - - */

.piece-option-price span
{
    font-size: 15px;
    opacity: .75;
}

.piece-option .piece-checklist
{
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 10px;
    margin-top: 4px;
}

.piece-option .piece-checklist li
{
    grid-template-columns: 20px auto;
    grid-gap: 10px;

    font-size: 15px;
}

.piece-option .piece-checklist li::before
{
    width: 20px;
    height: 20px;

    font-size: 11px;
}

.piece-option > .piece-btn
{
    justify-self: stretch;
    margin-top: 10px;
}

.piece-option:not( .piece-option-featured ) > .piece-btn
{
    background-color: transparent;
    border-color: #d6810b;
}

.piece-option:not( .piece-option-featured ) > .piece-btn :is( h4, p, span )
{
    color: #aa6709;
}

section .piece-option.piece-option-featured .piece-checklist li::before
{
    color: #111111;

    background-color: #d6810b;
}

/* - - - info / stat cards - - - */

/* the stats strip as cards: an icon, the figure, what it counts and an
   optional short line - every word and figure from the copy */
.piece-stats.piece-stats-cards
{
    grid-gap: 24px;
    padding: 0;

    border: 0;
}

.piece-stats-cards > .piece-stat
{
    grid-gap: 8px;
    justify-items: start;
    padding: 28px 26px;

    text-align: left;
}

.piece-stats-cards > .piece-stat > :is( i, svg )
{
    margin-bottom: 6px;
}

.piece-stats-cards .piece-stat b
{
    color: #111111;
}

.piece-stats-cards .piece-stat p
{
    justify-self: start;

    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #111111;
    opacity: 1;
}

.piece-stats-cards .piece-stat p.piece-stat-note
{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: #555;
}

@media( min-width: 900px )
{
    .piece-stats.piece-stats-cards
    {
        grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
    }
}

/* - - - product cards - - - */

/* Things the client sells, each with its price: a photo ( with an
   optional tag - Bestseller, New - in the copy's words ), the name, one
   short line, the price and a small link. */

.piece-product > .piece-shot
{
    aspect-ratio: 5 / 4;
}

.piece-product-tag
{
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 5px 10px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff !important;

    background-color: #111111;
    border-radius: var( --piece-radius-btn, 20px );
}

.piece-product-body
{
    display: grid;
    grid-gap: 8px;
    align-content: start;
    padding: 20px 22px 24px;
}

.piece-product-body h3
{
    font-size: 18px;
}

.piece-product-body p
{
    font-size: 14.5px;
    line-height: 1.55;
}

/* - - - team cards - - - */

/* The people the copy introduces: a photo of each ( or none for any ),
   the name, the role, a short line and links to their profiles. */

.piece-member > .piece-shot
{
    aspect-ratio: 1 / 1;
}

.piece-member-body
{
    display: grid;
    grid-gap: 6px;
    align-content: start;
    padding: 20px 22px 24px;
}

.piece-member-body h3
{
    font-size: 19px;
}

.piece-member-body p.piece-member-role
{
    margin-bottom: 6px;

    font-size: 14px;
    font-weight: 600;
    color: #aa6709;
}

.piece-member-body p
{
    font-size: 14.5px;
    line-height: 1.55;
}

.piece-member-links
{
    display: grid;
    grid-auto-flow: column;
    grid-gap: 14px;
    justify-content: start;
    margin-top: 10px;
}

.piece-member-links a
{
    font-size: 17px;
    color: #666;
    text-decoration: none;
}

.piece-member-links a:hover
{
    color: #aa6709;
}

/* - - - testimonial cards - - - */

/* Only when switched on ( and only the copy's own reviews, word for
   word ): a quote mark, the review, who said it, and stars when the copy
   gives a rating. Dark and tinted versions pick one out. */

.piece-testimonial
{
    grid-gap: 18px;
    padding: 64px 28px 28px;
}

.piece-testimonial::before
{
    content: "\201C";
    position: absolute;
    top: 14px;
    left: 24px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: 1;
    color: #d6810b;
}

.piece-testimonial > p
{
    font-size: 16px;
    line-height: 1.65;
}

.piece-testimonial-who
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 2px 14px;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
}

.piece-testimonial-who:has( > img )
{
    grid-template-columns: 48px minmax( 0, 1fr );
}

.piece-testimonial-who > img
{
    grid-row: span 3;
    width: 48px;
    height: 48px;

    object-fit: cover;
    border-radius: 50%;
}

.piece-testimonial-who b
{
    font-size: 15px;
    color: #111111;
}

.piece-testimonial-who span
{
    font-size: 13px;
    color: #666;
}

.piece-stars
{
    font-size: 15px;
    letter-spacing: .12em;
    color: #d99a1e;
}

section .piece-testimonial.piece-testimonial-dark
{
    background-color: #111111;
    border-color: #111111;
}

section .piece-testimonial.piece-testimonial-dark :is( p, b )
{
    color: #fff;
}

section .piece-testimonial.piece-testimonial-dark span
{
    color: rgba( 255, 255, 255, .7 );
}

section .piece-testimonial.piece-testimonial-dark::before
{
    color: #d6810b;
}

section .piece-testimonial.piece-testimonial-tint
{
    background-color: color-mix( in srgb, #d6810b 13%, #fff );
    border-color: transparent;
}

/* - - - category cards - - - */

/* An overview that sends people on: each card a link to one of the
   site's own pages - a photo, an icon, the name, an optional count from
   the copy, and an arrow. */

.piece-category > .piece-shot
{
    aspect-ratio: 16 / 11;
}

.piece-category-body
{
    display: grid;
    grid-gap: 6px;
    align-content: start;
    padding: 16px 20px 44px;
}

.piece-category-body > :is( i, svg )
{
    width: 22px;
    height: 22px;
    margin-bottom: 4px;

    font-size: 22px;
    color: #d6810b;
}

.piece-category-body h3
{
    font-size: 17px;
}

.piece-category-body p
{
    font-size: 13.5px;
    color: #666;
}

:is( .piece-category-body, .piece-article-body )
{
    position: relative;
}

:is( .piece-category-body, .piece-article-body )::after
{
    content: "\2192";
    position: absolute;
    right: 20px;
    bottom: 16px;

    font-size: 18px;
    line-height: 1;
    color: #111111;

    transition: ease transform .3s;
}

:is( .piece-category, .piece-article ):hover :is( .piece-category-body, .piece-article-body )::after
{
    transform: translateX( 4px );
}

/* - - - article cards - - - */

/* Posts, news or case studies the copy lists: a photo, a small label,
   the title, and who and how long. */

.piece-article > .piece-shot
{
    aspect-ratio: 16 / 9;
}

.piece-article-body
{
    display: grid;
    grid-gap: 8px;
    align-content: start;
    padding: 18px 22px 48px;
}

.piece-article-body p.piece-article-label
{
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #aa6709;
}

.piece-article-body h3
{
    font-size: 18px;
    line-height: 1.3;
}

.piece-article-body p
{
    font-size: 13px;
    color: #666;
}

/* - - - the tinted band - - - */

/* A pale wash of the accent - for a section that wants separating
   without the weight of a dark band. Up to two of these a page. */
.piece-band-tint
{
    padding: 80px 0;

    background-color: #fcf5ec;
}

/* the dark bands get a touch more air in the designed layer */
.piece-band.piece-roomy,
.piece-band-image.piece-roomy
{
    padding: 96px 0;
}

/* - - - lists - - - */

/* a two-column checklist for a run of short benefits */
.piece-checklist
{
    display: grid;
    grid-gap: 14px 32px;
    margin: 0;
    padding: 0;

    list-style: none;
}

.piece-checklist li
{
    display: grid;
    grid-template-columns: 28px auto;
    grid-gap: 12px;
    align-items: start;
}

.piece-checklist li::before
{
    content: "\2713";
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #111111;

    background-color: #d6810b;
    border-radius: var( --piece-radius-icon, 50% );
}

/* - - - opening hours - - - */

/* Days and times the copy lists, one row each - never invented, never
   reworded. */

.piece-hours
{
    display: grid;
    width: 100%;
    max-width: 560px;
    margin: 0;
}

.piece-hours > div
{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 16px;
    justify-content: space-between;
    padding: 14px 0;

    border-bottom: solid 1px rgba( 0, 0, 0, .1 );
}

.piece-hours dt
{
    font-weight: 600;
    color: #111111;
}

.piece-hours dd
{
    margin: 0;

    text-align: right;
    color: #444;
}

.piece-centre .piece-hours,
.piece-intro + .piece-hours
{
    justify-self: center;
}

/* - - - a price list - - - */

/* Treatments or services with their prices, grouped under headings - a
   salon's menu, a groomer's list, a trade's set prices. No boxes: the
   structure is alignment, hairlines and type size. Each group is a
   picture beside its list ( or the list alone ):

     <div class="element piece-prices">
         <div class="element piece-price-group">
             <div class="piece-shot"> <img …> </div>
             <div class="element piece-price-list">
                 <div class="element piece-price-head">
                     <h3>Facials</h3>
                     <p class="piece-price-tag">Refresh · Glow</p>
                 </div>
                 <div class="element piece-price-item">
                     <div class="element piece-price-what">
                         <p class="piece-price-name">Signature Facial</p>
                         <p>A personalised facial…</p>
                     </div>
                     <p class="piece-price-time">60 mins</p>
                     <p class="piece-price-cost">£45</p>
                 </div>
             </div>
         </div>
     </div>

   The tag line and the time are optional - leave either out and the row
   closes up. */

.piece-prices
{
    display: grid;
    grid-gap: 56px;
    width: 100%;
}

.piece-price-group
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 24px;
}

/* the picture: a short strip over its list on a phone, a column beside
   it from tablet up, as tall as the list it belongs to */
.piece-price-group > .piece-shot
{
    aspect-ratio: 16 / 7;
    width: 100%;
}

@media( min-width: 900px )
{
    .piece-price-group
    {
        grid-template-columns: minmax( 0, 1fr ) minmax( 0, 3fr );
        grid-gap: 48px;
        align-items: stretch;
    }

    .piece-price-group > .piece-shot
    {
        aspect-ratio: auto;
        height: 100%;
        min-height: 260px;
        max-height: 560px;
    }
}

/* a group with no picture fills the content width like the rest of the
   page. With no pictures at all, the groups sit two to a row from 900px,
   read left to right, each row lined up across the page */
.piece-price-group:not( :has( > .piece-shot ) )
{
    grid-template-columns: minmax( 0, 1fr );
    width: 100%;
}

@media( min-width: 900px )
{
    .piece-prices:not( :has( .piece-shot ) ):has( > .piece-price-group:nth-child( 2 ) )
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
        grid-gap: 56px 72px;
        align-items: start;
    }
}

.piece-price-list
{
    display: grid;
    grid-gap: 0;
    align-content: start;
}

/* - the heading: the name on the left, a hairline running on from it,
     the tag line sitting on the rule at the right - */

.piece-price-head
{
    display: grid;
    grid-template-columns: auto minmax( 0, 1fr );
    grid-gap: 0 24px;
    align-items: end;
    padding-bottom: 8px;
}

.piece-price-head::after
{
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    height: 1px;
    margin-bottom: .55em;

    background-color: #d6810b;
    opacity: .45;
}

.piece-price-head h3
{
    grid-column: 1;
    grid-row: 1;

    font-size: clamp( 28px, 3vw, 40px );
    line-height: 1.1;
    color: #111111;
}

.piece-price-tag
{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin-bottom: calc( .55em + 10px );

    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: right;
    color: #aa6709;
}

/* - one row: what it is, how long, how much - */

.piece-price-item
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto minmax( 64px, auto );
    grid-gap: 0 28px;
    align-items: center;
    padding: 18px 0;

    border-bottom: solid 1px #f7e6ce;
}

.piece-price-item:last-child
{
    border-bottom: none;
}

.piece-price-what
{
    display: grid;
    grid-gap: 4px;
}

.piece-price-what p
{
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b6b;
}

.piece-price-what .piece-price-name
{
    font-size: 17px;
    line-height: 1.35;
    color: #111111;
}

.piece-price-time
{
    font-size: 13px;
    color: #7a7a7a;
    white-space: nowrap;
}

.piece-price-cost
{
    grid-column: 3;
    justify-self: end;

    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #111111;
}

@media( max-width: 599px )
{
    .piece-price-head
    {
        grid-template-columns: minmax( 0, 1fr );
    }

    /* on a phone the rule runs under the heading, and the tag line goes */
    .piece-price-head::after
    {
        grid-column: 1;
        grid-row: 2;
        margin: 10px 0 0;
    }

    .piece-price-tag
    {
        display: none;
    }

    /* the time tucks under the price, so the words get the width */
    .piece-price-item
    {
        grid-template-columns: minmax( 0, 1fr ) auto;
        grid-gap: 2px 16px;
        align-items: start;
        padding: 14px 0;
    }

    .piece-price-what
    {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .piece-price-cost
    {
        grid-column: 2;
        grid-row: 1;
        font-size: 18px;
    }

    .piece-price-time
    {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        font-size: 12px;
    }
}

/* - - - a price menu - - - */

/* The simple one: the lists a client sends with a price on each line -
   a barber's cuts, a beautician's waxing. Group headings in spaced
   capitals with a hairline running on, then name ..... price rows with a
   dotted leader between. On a wide screen one group fills the width,
   two sit side by side, three or more flow into two balanced columns.

     <div class="element piece-menu">
         <div class="element piece-menu-group">
             <div class="element piece-menu-head">
                 <i class="fa-light fa-scissors"></i>        ( optional )
                 <h3>Haircuts &amp; styling</h3>
             </div>
             <div class="element piece-menu-item">
                 <p class="piece-menu-name">Classic haircut</p>
                 <p class="piece-menu-cost">£25</p>
             </div>
         </div>
     </div>                                                                */

.piece-menu
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 48px;
    width: 100%;
}

/* on a wide screen: one group fills the width like the rest of the
   content, two sit side by side, and three or more flow into two
   balanced columns, newspaper style, so an odd one out leaves no hole */
@media( min-width: 900px )
{
    .piece-menu:has( > .piece-menu-group:nth-child( 2 ) ):not( :has( > .piece-menu-group:nth-child( 3 ) ) )
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
        grid-gap: 56px 72px;
    }

    .piece-menu:has( > .piece-menu-group:nth-child( 3 ) )
    {
        display: block;
        max-width: none;
        column-count: 2;
        column-gap: 72px;
    }

    .piece-menu:has( > .piece-menu-group:nth-child( 3 ) ) > .piece-menu-group
    {
        margin-bottom: 52px;
        break-inside: avoid;
    }
}

.piece-menu-group
{
    display: grid;
    grid-gap: 4px;
    align-content: start;
}

/* - the heading: an optional icon in a ring, the name in spaced capitals,
     a hairline running on to the edge - */

.piece-menu-head
{
    display: grid;
    grid-template-columns: auto minmax( 24px, 1fr );
    grid-gap: 16px;
    align-items: center;
    margin-bottom: 10px;
}

.piece-menu-head:has( > :is( i, svg ) )
{
    grid-template-columns: auto auto minmax( 24px, 1fr );
}

.piece-menu-head::after
{
    content: "";
    height: 1px;

    background-color: #d6810b;
    opacity: .45;
}

.piece-menu-head :is( i, svg )
{
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 12px;

    font-size: 20px;
    color: #d6810b;

    border: solid 1.5px #d6810b;
    border-radius: var( --piece-radius-icon, 50% );
}

.piece-menu-head h3
{
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #aa6709;
}

/* the heading font is for display headings - not these small capitals */
html body .piece-menu-head h3
{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

/* - a row: name, a dotted leader, the price - */

.piece-menu-item
{
    display: grid;
    grid-template-columns: auto minmax( 20px, 1fr ) auto;
    grid-gap: 0 10px;
    align-items: baseline;
    padding: 7px 0;
}

.piece-menu-item::after
{
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: .4em;

    border-bottom: dotted 1.5px rgba( 0, 0, 0, .28 );
}

.piece-menu-name
{
    grid-column: 1;
    grid-row: 1;

    font-size: 16px;
    line-height: 1.45;
    color: #111111;
}

.piece-menu-cost
{
    grid-column: 3;
    grid-row: 1;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #111111;
}

@media( max-width: 599px )
{
    .piece-menu-head h3
    {
        font-size: 14px;
        letter-spacing: .14em;
    }
}

/* with an icon, the rows line up under the heading's words */
@media( min-width: 600px )
{
    .piece-menu-group:has( > .piece-menu-head > :is( i, svg ) ) > .piece-menu-item
    {
        margin-left: 62px;
    }
}

/* - - - featured services - - - */

/* Two to four services picked out with a photo, a short description and
   a price each - "our most popular", a home page teaser, packages. The
   one card style on the page when it is used: photo, an optional icon in
   a ring riding the photo's edge, the name, an optional small-capitals
   kind, the description, a hairline, the price, an optional button.
   Prices and buttons line up across the row however long the words.

     <div class="element piece-features">
         <div class="element piece-feature">
             <div class="piece-shot"> <img …> </div>
             <i class="fa-light fa-scissors"></i>                ( optional )
             <div class="element piece-feature-body">
                 <h3>Men's Haircut</h3>
                 <p class="piece-feature-kind">Barber services</p>   ( optional )
                 <p>Precision cut, tailored to your style.</p>
                 <p class="piece-feature-cost">£25</p>
                 <a class="piece-btn" href="…"><h4>Book now</h4></a>  ( optional )
             </div>
         </div>
     </div>                                                                */

.piece-features
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 24px;
    width: 100%;
}

@media( min-width: 600px )
{
    .piece-features
    {
        grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    }
}

@media( min-width: 1100px )
{
    .piece-features:has( > .piece-feature:nth-child( 3 ) )
    {
        grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    }

    .piece-features:has( > .piece-feature:nth-child( 4 ) )
    {
        grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    }

    /* two side by side would be too wide - keep them to a pair */
    .piece-features:not( :has( > .piece-feature:nth-child( 3 ) ) )
    {
        max-width: 820px;
        justify-self: center;
    }
}

.piece-feature
{
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-gap: 0;
    overflow: hidden;

    text-align: center;

    background-color: #fff;
    border: solid 1px #f7e6ce;
    border-radius: var( --piece-radius-card, 10px );
}

.piece-feature > .piece-shot,
.piece-feature > .piece-shot img
{
    border-radius: 0;
}

.piece-feature > .piece-shot
{
    aspect-ratio: 4 / 3;
}

/* the icon sits on the photo's lower edge, half over it */
.piece-feature > :is( i, svg )
{
    position: relative;
    z-index: 1;
    justify-self: center;
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    margin-top: -32px;
    padding: 18px;

    font-size: 26px;
    color: #d6810b;

    background-color: #fff;
    border: solid 1.5px #d6810b;
    border-radius: var( --piece-radius-icon, 50% );
}

.piece-feature-body
{
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    grid-gap: 10px;
    justify-items: center;
    padding: 24px 28px 28px;
}

.piece-feature > :is( i, svg ) + .piece-feature-body
{
    padding-top: 14px;
}

/* centred whatever the template does with headings and paragraphs */
.piece-feature .piece-feature-body > :is( h3, p )
{
    justify-self: center;
    text-align: center;
}

.piece-feature-body h3
{
    font-size: clamp( 22px, 2vw, 28px );
    line-height: 1.15;
    text-align: center;
    color: #111111;
}

.piece-feature-body p
{
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    color: #5f5f5f;
}

.piece-feature-body .piece-feature-kind
{
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #777;
}

/* no kind line: the description takes the row that would grow */
.piece-feature-body:not( :has( > .piece-feature-kind ) )
{
    grid-template-rows: auto 1fr auto auto;
}

.piece-feature-body .piece-feature-cost
{
    align-self: end;
    width: 100%;
    margin-top: 8px;
    padding-top: 18px;

    font-size: 30px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #aa6709;

    border-top: solid 1px #f7e6ce;
}

.piece-feature-body .piece-btn
{
    justify-self: stretch;
    justify-content: center;
    margin-top: 6px;
}

/* - - - reviews - - - */

/* a review on a card, with a large quote mark */
.piece-review
{
    position: relative;
    display: grid;
    grid-gap: 16px;
    align-content: start;
    margin: 0;
    padding: 56px 32px 32px;
    box-sizing: border-box;

    background-color: #fff;
    border-radius: var( --piece-radius-card, 18px );
    box-shadow: 0 24px 48px -28px rgba( 0, 0, 0, .3 );
}

.piece-review::before
{
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 26px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 84px;
    line-height: 1;
    color: #d6810b;
}

.piece-review :is( p, h3 )
{
    color: #333;
}

.piece-review p
{
    font-size: 16px;
    line-height: 1.65;
}

.piece-review-who
{
    display: grid;
    grid-gap: 2px;
    padding-top: 16px;

    border-top: solid 1px rgba( 0, 0, 0, .08 );
}

.piece-review-who b
{
    color: #111111;
}

/* - - - photo covers - - - */

/* A photograph across the full width with the words over it, under a
   wash of the dark. The picture is a real <img> - the client's own -
   laid behind the content:

     <section class="piece-cover">
         <img class="piece-cover-img" src="assets/img/src/…" alt="…" >
         <div class="workspace …"> … </div>
     </section>

   .piece-cover-left washes from the left, for text on the left. */

.piece-cover
{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 112px 0;

    background-color: #111111;
}

.piece-cover-img
{
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.piece-cover::before
{
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    background-image: linear-gradient( 180deg, #111111cc 0%, #111111e6 100% );
}

.piece-cover-left::before
{
    background-image: linear-gradient( 90deg, #111111f2 0%, #111111d9 45%, #11111159 100% );
}

.piece-cover :is( h1, h2, h3, h4, b )
{
    color: #fff;
}

.piece-cover :is( p, li )
{
    color: rgba( 255, 255, 255, .85 );
}

.piece-cover .piece-eyebrow,
.piece-cover :is( .piece-accent, .piece-second ),
.piece-band :is( .piece-accent, .piece-second ),
.piece-band-image :is( .piece-accent, .piece-second )
{
    color: #d6810b;
}

.piece-cover .piece-eyebrow::before
{
    background-color: #d6810b;
}

/* a taller one, for an opening */
.piece-cover-tall
{
    display: grid;
    align-items: center;
    min-height: 560px;
}

/* - - - the call to action - - - */

/* - - - the ornament before the close - - - */

/* A short line, a small trade icon, a short line - a quiet full stop
   between two sections, always the one before the close. It has a
   section of its own:

     <section class="piece-divide">
         <div class="workspace">
             <div class="element piece-divider">
                 <i class="fa-light fa-border-all"></i>
             </div>
         </div>
     </section>

   The section takes a little space back from the sections either side,
   and sits exactly halfway between them. */
/* pulled in a little, so it sits closer to both neighbours */
.piece-divide .workspace
{
    margin-top: -16px;
    margin-bottom: -16px;
}

.piece-divider
{
    display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
    grid-gap: 24px;
    align-items: center;
    width: 100%;
    max-width: 760px;
    justify-self: center;

    color: #d6810b;
}

.piece-divider::before,
.piece-divider::after
{
    content: "";
    height: 2px;

    background-color: #d6810b;
}

.piece-divider :is( i, svg )
{
    font-size: var( --piece-mark, 34px );
    width: var( --piece-mark, 34px );
    height: var( --piece-mark, 34px );

    color: #d6810b;
}

/* a small version of the logo in the middle instead ( Finishing touches
   step ) - as it is, or masked so it takes the accent colour */
.piece-divider-mark
{
    display: block;
    height: var( --piece-mark, 34px );
    width: auto;
    max-width: 240px;
}

.piece-divider-mark.is-tinted
{
    background-color: #d6810b;

    /* the picture itself comes inline ( mask-image ), so its path is
       read from the page, not from this stylesheet */
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.piece-dark .piece-divider-mark.is-tinted
{
    background-color: #d6810b;
}

.piece-dark .piece-divider,
.piece-dark .piece-divider :is( i, svg )
{
    color: #d6810b;
}

.piece-dark .piece-divider::before,
.piece-dark .piece-divider::after
{
    background-color: #d6810b;
}

/* a second heading further down the same text column ( "Why choose us"
   under "Services" on a short page ) gets room above it */
.piece-split .element > :is( h2, h3 ).piece-display:not( :first-child )
{
    margin-top: 24px;
}

/* - - - the close - - - */

/* The page's last words, centred on the page's own background: a display
   heading, a short capitals line, one button. No box, no band - the
   space around it does the work. */
.piece-close .piece-narrow
{
    display: grid;
    grid-gap: 16px;
    justify-items: center;
}

/* 64px under the heading in all - the grid's 16px plus this */
.piece-close .piece-btn-row
{
    margin-top: 48px;
}

.piece-close h3
{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* A rounded panel in the dark with a soft glow of the accent across it -
   sits inside a plain section, so the page ends on a strong note without
   another full-width band. */
.piece-cta-panel
{
    position: relative;
    display: grid;
    grid-gap: 20px;
    justify-items: center;
    padding: 64px 32px;
    box-sizing: border-box;
    overflow: hidden;

    text-align: center;

    background-color: #111111;
    background-image: radial-gradient( circle at 85% 15%, #d6810b66, transparent 55% ),
                      radial-gradient( circle at 10% 100%, #d6810b33, transparent 45% );
    border-radius: 24px;
}

.piece-cta-panel :is( h1, h2, h3, p )
{
    justify-self: center;
    max-width: 680px;

    text-align: center;
    color: #fff;
}

.piece-cta-panel .piece-eyebrow
{
    color: #fff;
}

.piece-cta-panel .piece-eyebrow::before
{
    background-color: #fff;
}

.piece-cta-panel .piece-btn
{
    justify-self: center;

    background-color: #fff;
    border-color: #fff;
}

.piece-cta-panel .piece-btn :is( h4, p, span )
{
    color: #111111;
}

.piece-cta-panel .piece-btn-alt
{
    background-color: transparent;
    border-color: rgba( 255, 255, 255, .7 );
}

.piece-cta-panel .piece-btn-alt :is( h4, p, span )
{
    color: #fff;
}

.piece-cta-panel .piece-btn-row
{
    justify-content: center;
    justify-self: center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Dark pages */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* For a brand that is dark at heart - charcoal, black, slate, a deep
   navy logo on a dark template - every section of the page carries
   .piece-dark, alternating with .piece-dark .piece-dark-alt for rhythm.
   The pieces inside turn themselves over: light text, the accent as it
   shows on the dark, cards as faint panels, the featured option and the
   floating card in white so they still lift.

   When every section is dark ( a photo cover counts ), #page-content goes
   dark too, so the gaps the template leaves between sections do not show
   as white stripes. */

#page-content:has( > section.piece-dark ):not( :has( > section:not( .piece-dark, .piece-cover ) ) )
{
    background-color: #111111;
}

section.piece-dark
{
    padding: 88px 0;

    background-color: #111111;
}

section.piece-dark-alt
{
    background-color: #222222;
}

/* the divider's own section takes none of that - the sections either
   side bring their padding, and it sits halfway between them */
section.piece-divide.piece-dark
{
    padding: 0;
}

/* type */

.piece-dark :is( h1, h2, h3, h4, b, strong )
{
    color: #fff;
  overflow-wrap: anywhere;
    
}

.piece-dark :is( p, li, dd )
{
    color: rgba( 255, 255, 255, .78 );
  overflow-wrap: anywhere;
}

.piece-dark a:not( .piece-btn )
{
    color: #fff;
}

.piece-dark :is( .piece-eyebrow, .piece-accent, .piece-second, .piece-heading h3 ),
.piece-dark .piece-step::before
{
    color: #d6810b;
  overflow-wrap: anywhere;
}

.piece-dark .piece-eyebrow::before,
.piece-dark .piece-card::before
{
    background-color: #d6810b;
}

.piece-dark .piece-heading
{
    border-bottom-color: rgba( 255, 255, 255, .2 );
}

.piece-dark .piece-list li::before,
.piece-dark .piece-review::before,
.piece-dark .piece-stat b
{
    color: #d6810b;
}

.piece-dark .piece-checklist li::before
{
    color: #111111;

    background-color: #d6810b;
}

.piece-dark :is( .piece-stats, .piece-hours > div )
{
    border-color: rgba( 255, 255, 255, .14 );
}

.piece-dark .piece-hours dt
{
    color: #fff;
}

.piece-dark :is( .piece-price-head h3, .piece-price-name, .piece-price-cost )
{
    color: #fff;
}

.piece-dark :is( .piece-price-what p:not( .piece-price-name ), .piece-price-time )
{
    color: rgba( 255, 255, 255, .62 );
}

.piece-dark .piece-price-tag
{
    color: #d6810b;
}

.piece-dark .piece-price-head::after
{
    background-color: #d6810b;
}

.piece-dark .piece-price-item
{
    border-color: rgba( 255, 255, 255, .14 );
}

.piece-dark :is( .piece-menu-name, .piece-menu-cost )
{
    color: #fff;
}

.piece-dark .piece-menu-head h3,
.piece-dark .piece-menu-head :is( i, svg )
{
    color: #d6810b;
}

.piece-dark .piece-menu-head :is( i, svg )
{
    border-color: #d6810b;
}

.piece-dark .piece-menu-head::after
{
    background-color: #d6810b;
}

.piece-dark .piece-menu-item::after
{
    border-color: rgba( 255, 255, 255, .3 );
}

.piece-dark .piece-feature
{
    background-color: rgba( 255, 255, 255, .04 );
    border-color: rgba( 255, 255, 255, .12 );
}

.piece-dark .piece-feature > :is( i, svg )
{
    color: #d6810b;

    background-color: #111111;
    border-color: #d6810b;
}

.piece-dark .piece-feature-body h3
{
    color: #fff;
}

.piece-dark .piece-feature-body :is( p, .piece-feature-kind )
{
    color: rgba( 255, 255, 255, .7 );
}

.piece-dark .piece-feature-body .piece-feature-cost
{
    color: #d6810b;
    border-color: rgba( 255, 255, 255, .14 );
}

/* faint panels instead of white cards */

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat )
{
    background-color: rgba( 255, 255, 255, .045 );
    border: solid 1px rgba( 255, 255, 255, .1 );
    box-shadow: none;
}

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat ) :is( h3, h4, b )
{
    color: #fff;
}

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat ) :is( p, li )
{
    color: rgba( 255, 255, 255, .75 );
}

.piece-dark .piece-review-who
{
    border-top-color: rgba( 255, 255, 255, .12 );
}

.piece-dark .piece-quote
{
    background-color: rgba( 255, 255, 255, .05 );
    border-left-color: #d6810b;
}

/* the featured option and the floating card stay white, so they lift */

section.piece-dark .piece-option.piece-option-featured
{
    background-color: #fff;
    border-color: #fff;
}

section.piece-dark .piece-option.piece-option-featured :is( h3, h4, b, .piece-option-price b )
{
    color: #111111;
}

section.piece-dark .piece-option.piece-option-featured :is( p, li )
{
    color: #444;
}

section.piece-dark .piece-option.piece-option-featured .piece-option-tag
{
    color: #111111;

    background-color: #d6810b;
}

section.piece-dark .piece-option.piece-option-featured .piece-btn
{
    background-color: #111111;
    border-color: #111111;
}

section.piece-dark .piece-option.piece-option-featured .piece-btn :is( h4, p, span )
{
    color: #fff;
}

.piece-dark .piece-float b
{
    color: #111111;
}

.piece-dark .piece-float p
{
    color: #333;
}

/* buttons */

.piece-dark .piece-btn
{
    background-color: #d6810b;
    border-color: #d6810b;
}

.piece-dark .piece-btn :is( h4, p, span )
{
    color: #111111;
}

.piece-dark .piece-btn-alt
{
    background-color: transparent;
    border-color: rgba( 255, 255, 255, .55 );
}

.piece-dark .piece-btn-alt :is( h4, p, span )
{
    color: #fff;
}

/* the panel and the tint band, set a shade apart from the dark around them */

.piece-dark .piece-cta-panel
{
    background-color: #222222;
    border: solid 1px rgba( 255, 255, 255, .1 );
}

.piece-dark-alt .piece-cta-panel
{
    background-color: #111111;
}

.piece-dark .piece-cta-panel .piece-btn
{
    background-color: #fff;
    border-color: #fff;
}

.piece-dark .piece-cta-panel .piece-btn :is( h4, p, span )
{
    color: #111111;
}

.piece-dark .piece-cta-panel .piece-btn-alt
{
    background-color: transparent;
    border-color: rgba( 255, 255, 255, .55 );
}

.piece-dark .piece-cta-panel .piece-btn-alt :is( h4, p, span )
{
    color: #fff;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The call-to-action banner */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* A full-width band that breaks up a long run of sections that look the
   same: a short line from the copy and a button or two, kept to the
   site's content width, and - when one was set up on the Assigning
   images step - a letterbox picture filling the right half of the band
   out to the edge of the screen.

     <section class="piece-cta-band">
         <div class="workspace">
             <div class="element piece-cta-band-text">
                 <h2>Need a plumber today?</h2>
                 <p>Same-day call-outs across Whitby.</p>     ( optional )
             </div>

             <div class="element piece-btn-row">
                 <a class="piece-btn" href="contact.php"><h4>Get a quote</h4></a>
                 <a class="piece-btn piece-btn-alt" href="tel:…"><h4>Call …</h4></a>
             </div>
         </div>
     </section>

   Claude writes it without a picture. The build ( and the preview ) adds
   the picture when there is one - assets/img/cta-band.jpg - through
   styleCtaPhoto() in site-style.php: the section gains
   .piece-cta-band-photo, and its workspace a .piece-cta-band-media
   holding the <img>. With no picture the band stands on its own.

   Here it is a dark band: words on the left, buttons on the right from
   900px, stacked on a phone. With a picture the words and buttons take
   the left half of the content width and the picture the right half of
   the band, fading in from the band's colour; on a phone it is a strip
   across the top, edge to edge. Each skin gives it the template's own
   colour, edges and shape of picture. */

.piece-cta-band
{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 56px 0;

    background-color: #111111;
}

.piece-cta-band > .workspace
{
    grid-template-columns: minmax( 0, 1fr );
    grid-gap: 24px;
    align-items: center;
    justify-items: start;

    text-align: left;
}

/* the words and buttons sit over the picture's faded edge */
.piece-cta-band > .workspace > .element:not( .piece-cta-band-media )
{
    position: relative;
    z-index: 1;
}

.piece-cta-band-text
{
    display: grid;
    grid-gap: 10px;
    max-width: 640px;
}

.piece-cta-band :is( h2, h3, p )
{
    margin: 0;

    color: #fff;
}

.piece-cta-band h2
{
    font-size: clamp( 26px, 2.6vw, 36px );
    line-height: 1.15;
}

.piece-cta-band p
{
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;

    opacity: .92;
}

/* the second half of a two-part heading: the band's own text colour, a
   step softer. Skins that colour it keep it at 7:1 or better against
   their band - the accent darkened toward the ink on a pale band,
   lightened toward white on a dark one */
.piece-cta-band .piece-second
{
    color: inherit;

    opacity: .85;
}

/* - buttons: white on the dark, the second an outline, the first with an
     arrow - */

.piece-cta-band .piece-btn-row
{
    justify-content: start;
    margin-top: 0;
}

.piece-cta-band .piece-btn
{
    justify-self: start;

    background-color: #fff;
    border-color: #fff;
}

.piece-cta-band .piece-btn :is( h4, p, span )
{
    color: #111111;
    opacity: 1;
}

.piece-cta-band .piece-btn h4::after
{
    content: "\2192";
    margin-left: 10px;
}

.piece-cta-band .piece-btn-alt
{
    background-color: transparent;
    border-color: rgba( 255, 255, 255, .7 );
}

.piece-cta-band .piece-btn-alt :is( h4, p, span )
{
    color: #fff;
}

.piece-cta-band .piece-btn-alt h4::after
{
    content: none;
}

/* - the picture: a strip across the top on a phone, edge to edge,
     fading into the band below it - */

.piece-cta-band-media
{
    grid-column: 1 / -1;
    justify-self: stretch;
    margin: -56px calc( 50% - 50vw ) 0;
    aspect-ratio: 16 / 7;
    overflow: hidden;

    -webkit-mask-image: linear-gradient( to bottom, #000 55%, transparent );
    mask-image: linear-gradient( to bottom, #000 55%, transparent );
}

.piece-cta-band-media img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media( min-width: 900px )
{
    .piece-cta-band
    {
        padding: 64px 0;
    }

    .piece-cta-band > .workspace
    {
        grid-template-columns: minmax( 0, 1fr ) auto;
        grid-gap: 48px;
    }

    .piece-cta-band .piece-btn-row
    {
        justify-self: end;
    }

    /* with a picture: words and buttons down the left half of the
       content, the picture the right half of the band */
    .piece-cta-band-photo
    {
        padding: 80px 0;
    }

    .piece-cta-band-photo > .workspace
    {
        grid-template-columns: minmax( 0, calc( 50% - 48px ) );
        grid-gap: 28px;
        align-content: center;
        min-height: 200px;
    }

    .piece-cta-band-photo .piece-btn-row
    {
        justify-self: start;
    }

    /* measured from the band - the workspace is not positioned - and
       left: auto, as the templates' anim.css pins every .element to
       left: 0 for its slide-in */
    .piece-cta-band-media
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 50%;
        margin: 0;
        aspect-ratio: auto;

        -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 38% );
        mask-image: linear-gradient( to right, transparent 0%, #000 38% );
    }
}

/* - on a dark page the dark band would vanish - it steps up a shade - */

.piece-cta-band.piece-dark
{
    background-color: #222222;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Wider and narrower screens */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media( min-width: 768px )
{
    .piece-stats
    {
        grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
    }

    .piece-checklist
    {
        grid-template-columns: repeat( 2, 1fr );
    }

    .piece-mosaic
    {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .piece-mosaic > :first-child
    {
        grid-row: 1 / span 2;
    }

    .piece-mosaic > :first-child .piece-shot
    {
        height: 100%;
        aspect-ratio: auto;
    }

    .piece-cta-panel
    {
        padding: 80px 64px;
    }

    .piece-cover
    {
        padding: 140px 0;
    }
}

@media( min-width: 992px )
{
    .piece-steps
    {
        grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
    }

    .piece-option-featured
    {
        transform: scale( 1.04 );
    }

    .piece-option-featured:hover
    {
        transform: scale( 1.04 ) translateY( -4px );
    }
}

/* on a phone the floating card drops under the picture, and the dark
   sections take a little less air */
@media( max-width: 767px )
{
    .piece-float,
    .piece-media-left .piece-float
    {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        max-width: none;
        margin: -32px 16px 0;
    }

    section.piece-dark
    {
        padding: 64px 0;
    }

    .piece-cover
    {
        padding: 88px 0;
    }

    .piece-options
    {
        grid-gap: 40px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Template parts */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* The testimonials section's tint: a fill laid over the background photo
   and under the reviews, covering everything the photo covers - both grid
   rows ( the reviews and the dots under them ) and the container's own
   padding.

   It is taken out of the grid and pinned to all four edges of the
   container, which becomes its positioning box. isolation gives the
   container a stacking context of its own, so z-index -1 puts the fill
   above the container's background ( the photo ) but below everything in
   it - the reviews, the arrows and the dots - whatever their own z-index.
   #111111 at .7 keeps white text readable on any photo. */

.testimonial-container
{
    position: relative;

    isolation: isolate;
}

.testimonial-fill
{
    position: absolute;

    z-index: -1;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: #111111;

    opacity: .7;

    pointer-events: none;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Skin - Temp 4: flat and blocky */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Square, flat and solid, like the colour nav bar and its square active
   tab: no rounding, no shadows, no lift. Cards are flat tint blocks with
   a full-width accent bar; eyebrows are square tabs; icons sit in solid
   accent squares; featured prices sit on a solid accent strip.

   Heading weights the template doesn't load itself - the build links
   them:

   @fonts Montserrat:wght@300;400;600;700;800 */

:root
{
    --piece-radius-media: 0;
    --piece-radius-card: 0;
    --piece-radius-btn: 0;
    --piece-radius-icon: 0;

    /* the template font's heading weights - a chosen heading font
       sets its own */
    --heading-light: 400;
    --heading-regular: 700;
    --heading-strong: 800;
    --heading-italic: normal;
}

.piece-btn:hover
{
    transform: none;
    box-shadow: none;
    filter: brightness( .92 );
}

/* - flat tint blocks with a full accent bar - */

:is( .piece-card, .piece-step, .piece-option, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat )
{
    background-color: #fcf5ec;
    border-color: transparent;
    box-shadow: none;
}

:is( .piece-card, .piece-step, .piece-option, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat, .piece-feature ):hover
{
    transform: none;
    box-shadow: none;
}

.piece-card::before
{
    width: 100%;
}

.piece-step
{
    border-top: solid 4px #d6810b;
}

.piece-feature
{
    border-color: #f7e6ce;
    box-shadow: none;
}

/* - the price on a solid accent strip - */

.piece-feature-body .piece-feature-cost
{
    margin: 8px -28px 0;
    padding: 14px 28px;
    width: auto;
    justify-self: stretch;

    color: #111111;

    background-color: #d6810b;
    border-top: none;
}

.piece-feature-body .piece-btn
{
    margin: 0 -28px -28px;
    justify-self: stretch;

    background-color: #111111;
    border-color: #111111;
}

.piece-feature-body .piece-btn :is( h4, p, span )
{
    color: #fff;
}

/* - eyebrows as the nav's square tab - */

.piece-eyebrow
{
    grid-template-columns: auto;
    padding: 6px 12px;

    color: #fff;

    background-color: #111111;
}

.piece-eyebrow::before
{
    display: none;
}

/* - icons in solid accent squares - */

:is( .piece-menu-head, .piece-feature, .piece-card, :where( .piece-stats-cards ) > .piece-stat ) > :is( i, svg ),
.piece-divider :is( i, svg )
{
    color: #111111;
    background-color: #d6810b;
    border-color: #d6810b;
}

.piece-divider :is( i, svg )
{
    box-sizing: content-box;
    padding: 12px;
}

:is( .piece-price-head, .piece-menu-head )::after
{
    height: 3px;
    opacity: 1;
}

.piece-checklist li::before
{
    border-radius: 0;
}

/* on the tinted band the tint cards would vanish - they go white */
.piece-band-tint :is( .piece-card, .piece-step, .piece-option, .piece-product, .piece-member, .piece-testimonial, .piece-category, .piece-article, :where( .piece-stats-cards ) > .piece-stat, .piece-feature )
{
    background-color: #fff;
}

/* - - - headings: the block and bar - - - */

/* Heavy, tight and square-shouldered, with a solid accent bar down the
   left of every left-hand heading ( "| Your Vision, / Our Expertise" ),
   the second half in the accent. Over a centred heading the bar turns
   into a short solid block under it, like the nav's square tab. The
   opening heading group carries the bar instead of its underline. */

.piece-display
{
    font-weight: var( --heading-strong );
    line-height: 1.06;
    letter-spacing: .02em;
}

.piece-display,
.piece-heading
{
    padding-left: 12px;

    border-left: solid 6px #d6810b;
}

.piece-heading
{
    padding-bottom: 0;

    border-bottom: none;
}

:is( .piece-heading, .piece-intro, .piece-centre, .piece-close, .piece-cover, .piece-cta-panel ) .piece-display,
.piece-centre.piece-heading,
.piece-centre .piece-heading
{
    padding-left: 0;

    border-left: none;
}

:is( .piece-intro, .piece-close .piece-narrow ) > .piece-display::after
{
    content: "";
    display: block;
    width: 48px;
    height: 6px;
    margin: 22px auto 0;

    background-color: #d6810b;
}

.piece-heading h3
{
    font-size: 14px;
    font-weight: var( --heading-strong );
    letter-spacing: .08em;
    text-transform: uppercase;
}

.piece-dark :is( .piece-display, .piece-heading )
{
    border-left-color: #d6810b;
}

.piece-dark :is( .piece-intro, .piece-close .piece-narrow ) > .piece-display::after
{
    background-color: #d6810b;
}

/* - - - cards: flat and blocky - - - */

/* Square accent tags, and links underlined with a solid accent bar. */

.piece-product-tag
{
    background-color: #d6810b;
    border-radius: 0;
    color: #111111 !important;
}

.piece-card-link
{
    padding-bottom: 4px;

    border-bottom: solid 2px #d6810b;
}

/* - - - the call-to-action banner: the flat block - - - */

/* A flat pale band with a solid accent strip along its foot, like the
   colour nav bar, heavy heading and square solid buttons. A picture is
   cut straight and hard - no fade - with an accent strip down its edge,
   like the nav's square tab. */

.piece-cta-band
{
    padding-bottom: 66px;

    background-color: #fcf5ec;
    box-shadow: inset 0 -10px 0 #d6810b;
}

.piece-cta-band :is( h2, h3, p )
{
    color: #111111;
}

.piece-cta-band p
{
    opacity: 1;
}

.piece-cta-band h2
{
    font-weight: var( --heading-strong );
    letter-spacing: -.02em;
}

.piece-cta-band h2 .piece-second
{
    color: color-mix( in srgb, #aa6709 62%, #111111 );

    opacity: 1;
}

.piece-cta-band .piece-btn
{
    background-color: #d6810b;
    border-color: #d6810b;
}

.piece-cta-band .piece-btn :is( h4, p, span )
{
    color: #111111;
}

.piece-cta-band .piece-btn-alt
{
    background-color: transparent;
    border-color: #111111;
}

.piece-cta-band .piece-btn-alt :is( h4, p, span )
{
    color: #111111;
}

.piece-cta-band-media
{
    border-bottom: solid 8px #d6810b;

    -webkit-mask-image: none;
    mask-image: none;
}

@media( min-width: 900px )
{
    .piece-cta-band
    {
        padding-bottom: 74px;
    }

    .piece-cta-band-photo
    {
        padding-bottom: 90px;
    }

    .piece-cta-band-media
    {
        bottom: 10px;

        border-bottom: 0;
        border-left: solid 8px #d6810b;
    }
}

.piece-cta-band.piece-dark
{
    background-color: #fcf5ec;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* One-off tweaks for this site go below */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */