/* 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: "Bevan";
  /* src: url("../Ameyallinda Signature.ttf"); */
  src: url("../Bevan-Regular.ttf");
}

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

/* From Uiverse.io by Creatlydev */
.button2 {
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    border: none;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--colour1-light);
    /*    background: linear-gradient(64deg, rgba(154, 108, 49, 1) 0%, rgba(181, 144, 83, 1) 54%, rgba(225, 207, 131, 1) 87%);*/
    border-radius: 10rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--colour3);
    /*    font-size: 20px;*/
    padding-left: 20px;
    line-height: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
    font-family: "Cormorant Garamond", Georgia, serif;

}

.button2__icon-wrapper {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    position: relative;
    color: var(--colour1-light);
    background-color: var(--colour3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.button2:hover {
    /*    border: 2px solid #347563;*/
    color: var(--colour3);
    background-color: var(--colour1);
}

.button2:hover .button2__icon-wrapper {
    background-color: var(--colour3);
    color: var(--colour1);

}

.button2__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}

.button2:hover .button2__icon-svg:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}

.button2:hover .button2__icon-svg--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}


/* 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(--colour3) !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);
} */


/* Judith Florey School of Ballet | 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:

     #26192e           a true dark - bands, panels, dark pages
     #35293d      a step lighter, for alternating dark sections
     #ab83c7        the picking-out colour for large or graphic use
     #925eb6   the same, dark enough for small text on white
     #ab83c7   the accent as it shows on #26192e
     #111111     text on an #ab83c7 fill
     #26192e text on an #ab83c7 fill
     #f8f5fb          a pale wash for soft bands
     #eee6f4     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. */

/* - - - 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 #ab83c7;
}

.piece-heading h3
{
    color: #925eb6;
}

/* - 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;
}

/* - - - 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: 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. #26192e, not the raw secondary colour - a light grey
   secondary used to put white text on light grey. */

.piece-band
{
    padding: 64px 0;

    background-color: #26192e;
}

.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: #26192e;
    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;
}

/* - - - 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: 15px;
    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: #925eb6;
}

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

.piece-box-dark
{
    background-color: #26192e;
    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: #ab83c7;
}

.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;
    grid-gap: 8px;
}

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

/* - */

.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 #ab83c7;
    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: #ab83c7;
    border: solid 1px #ab83c7;
    border-radius: 32px;
    text-decoration: none;

    transition: ease all .3s;
}

.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: #925eb6;
}

/* - 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: #26192e;
}

: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;
}

.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 a call-to-action panel. */

/* - - - 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: #925eb6;
}

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

    background-color: #ab83c7;
}

.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( 28px, 3.4vw, 46px );
    line-height: 1.12;
}

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

/* 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;
}

/* - - - framed imagery - - - */

/* A picture with a block of the accent set off behind one corner. The
   picture steps in from the corner rather than the block hanging out,
   because the workspaces clip anything past their edge. The block sits
   towards the text, on the inside of the split. */
.piece-media
{
    position: relative;
    display: grid;
    width: 100%;
    padding: 0 0 28px 28px;
    box-sizing: border-box;
}

.piece-media::before
{
    content: "";
    position: absolute;
    z-index: 0;
    top: 28px;
    right: 28px;
    bottom: 0;
    left: 0;

    background-color: #ab83c7;
    border-radius: 18px;
    opacity: .22;
}

.piece-media-left
{
    padding: 0 28px 28px 0;
}

.piece-media-left::before
{
    right: 14px;
    left: 28px;
}

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

.piece-media .piece-shot
{
    border-radius: 18px;
    box-shadow: 0 24px 48px -24px rgba( 0, 0, 0, .35 );
}

/* - 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: -12px;
    bottom: 56px;

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

    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px -16px rgba( 0, 0, 0, .35 );
}

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

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

.piece-media-left .piece-float
{
    right: -12px;
    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: 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: #ab83c7;
}

.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: 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: #925eb6;
}

.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: 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: #ab83c7;

    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: #26192e;
}

.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: 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: #26192e;
}

.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: #26192e;
}

/* - 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: #ab83c7;
    border-radius: 20px;
}

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

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

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

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

.piece-option-featured .piece-option-tag
{
    color: #26192e;

    background-color: #ab83c7;
}

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

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

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

/* - - - 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: #f8f5fb;
}

/* 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: #ab83c7;
    border-radius: 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: #26192e;
}

.piece-hours dd
{
    margin: 0;

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

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

/* - - - 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: 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: #ab83c7;
}

.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: #26192e;
}

/* - - - 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: #26192e;
}

.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, #26192ecc 0%, #26192ee6 100% );
}

.piece-cover-left::before
{
    background-image: linear-gradient( 90deg, #26192ef2 0%, #26192ed9 45%, #26192e59 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 .piece-accent
{
    color: #ab83c7;
}

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

/* 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 the content and the closing call to action:

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

   It opens the close: the first thing in its centred column. */
.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;
    margin-bottom: 24px;

    color: #ab83c7;
}

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

    background-color: #ab83c7;
}

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

    color: #ab83c7;
}

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

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

/* 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;
}

.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: #26192e;
    background-image: radial-gradient( circle at 85% 15%, #ab83c766, transparent 55% ),
                      radial-gradient( circle at 10% 100%, #ab83c733, 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: #26192e;
}

.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: #26192e;
}

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

    background-color: #26192e;
}

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

/* type */

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

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

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

.piece-dark :is( .piece-eyebrow, .piece-accent, .piece-heading h3 ),
.piece-dark .piece-step::before
{
    color: #ab83c7;
}

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

.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: #ab83c7;
}

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

    background-color: #ab83c7;
}

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

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

/* faint panels instead of white cards */

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box )
{
    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 ) :is( h3, h4, b )
{
    color: #fff;
}

.piece-dark :is( .piece-card, .piece-step, .piece-option, .piece-review, .piece-box ) :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: #ab83c7;
}

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

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

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

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

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

    background-color: #ab83c7;
}

.piece-dark .piece-option-featured .piece-btn
{
    background-color: #26192e;
    border-color: #26192e;
}

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

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

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

/* buttons */

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

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

.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: #35293d;
    border: solid 1px rgba( 255, 255, 255, .1 );
}

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

.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: #26192e;
}

.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;
}

.piece-dark .piece-media .piece-shot
{
    box-shadow: 0 24px 48px -20px rgba( 0, 0, 0, .7 );
}

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

/* 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 offset and the floating card come in, so nothing hangs
   off the screen edge, and the dark sections take a little less air */
@media( max-width: 767px )
{
    .piece-media
    {
        padding: 0 0 14px 14px;
    }

    .piece-media::before
    {
        top: 14px;
        right: 14px;
    }

    .piece-media-left
    {
        padding: 0 14px 14px 0;
    }

    .piece-media-left::before
    {
        right: 0;
        left: 14px;
    }

    .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.
   #26192e 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: #26192e;

    opacity: .7;

    pointer-events: none;
} */

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

/* Heading font - elegant ( chosen on the Template step ) */

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

html body :is( h1, h2, h3 ),
html body .piece-display,
html body .piece-stat b,
html body .piece-float b
{
    /* font-family: "Cormorant Garamond", Georgia, serif; */
    font-weight: 600;
    letter-spacing: 0;
}

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

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

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




.overcard {
  margin-top: -50px;
  z-index: 5;
}

.overcard .workspace {
  grid-gap: 64px;
}

@media (min-width: 768px ) {
  .overcard {
    margin-top: -138px;
  }
}

.card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 15px;
    border: 2px solid white;
    /*    padding: 1rem;*/
    width: 80%;
    text-align: center;
    color: whitesmoke;
    background-color: var(--colour4);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.1),
        0 2px 2px rgba(0, 0, 0, 0.1),
        0 4px 4px rgba(0, 0, 0, 0.1),
        0 8px 8px rgba(0, 0, 0, 0.1),
        0 16px 16px rgba(0, 0, 0, 0.1);
    transition: all ease .5s;

        align-self: center;
}

@media (min-width: 600px) {
    .card {
        width: 90%;
        height: 326px;
    }
}

/* Card background image */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: 0 0;

    transition: transform calc(var(--d) * 1.5) var(--e);
    pointer-events: none;
}

/* Gradient overlay */
.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    pointer-events: none;
    background-image: linear-gradient(to bottom,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.009) 11.7%,
            hsla(0, 0%, 0%, 0.034) 22.1%,
            hsla(0, 0%, 0%, 0.072) 31.2%,
            hsla(0, 0%, 0%, 0.123) 39.4%,
            hsla(0, 0%, 0%, 0.182) 46.6%,
            hsla(0, 0%, 0%, 0.249) 53.1%,
            hsla(0, 0%, 0%, 0.320) 58.9%,
            hsla(0, 0%, 0%, 0.394) 64.3%,
            hsla(0, 0%, 0%, 0.468) 69.3%,
            hsla(0, 0%, 0%, 0.540) 74.1%,
            hsla(0, 0%, 0%, 0.607) 78.8%,
            hsla(0, 0%, 0%, 0.668) 83.6%,
            hsla(0, 0%, 0%, 0.721) 88.7%,
            hsla(0, 0%, 0%, 0.762) 94.1%,
            hsla(0, 0%, 0%, 0.790) 100%);
    transform: translateY(-50%);
    transition: transform calc(var(--d) * 2) var(--e);
}

/* Background images (expanded @each loop) */
.card:nth-child(1)::before {
    background-image: url('../img/f1.jpg');
    background-position: center;
    opacity: 0.4;
    background-color: var(--colour4);
}

.card:nth-child(2)::before {
    background-image: url('../img/f2.jpg');
    background-position: center;
    opacity: 0.4;
    background-color: var(--colour4);
}

.card:nth-child(3)::before {
    background-image: url('../img/f3.jpg');
    background-position: center;
    opacity: 0.4;
    background-color: var(--colour4);
}


/* Content */
.content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
    transition: transform var(--d) var(--e);
    z-index: 1;
}

.content > * + * {

    margin-top: 1rem;
}

.title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
    color: white;
}

.copy {
    color: white;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35;
}

/* Button */
.btn {
    cursor: pointer;
    border-radius: 40px;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    /* font-size: 0.65rem; */
    font-weight: bold;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    color: var(--colour4);
    background-color: var(--colour1);
    border: none;
	font-family: "gill-sans-nova", sans-serif;
}

.btn:hover {
    background-color: var(--colour2);
}

.btn:focus {
    outline: 1px dashed var(--colour2);
    outline-offset: 3px;
}

/* Hover interactions */
@media (hover: hover) and (min-width: 600px) {
    .card::after {
        transform: translateY(0);
    }

    .content {
        transition: 0.5s ease;

        transform: translateY(calc(100% - 4.5rem));
    }

    .content > *:not(.title) {
        opacity: 0;
        transform: translateY(1rem);
        transition:
            transform var(--d) var(--e),
            opacity var(--d) var(--e);
    }

    .card:hover,
    .card:focus-within {
        align-items: center;
    }

    .card:hover::before,
    .card:focus-within::before {
        transform: translateY(-4%);
    }

    .card:hover::after,
    .card:focus-within::after {
        transform: translateY(-50%);
    }

    .card:hover .content,
    .card:focus-within .content {
        transform: translateY(0);
    }

    .card:hover .content > *:not(.title),
    .card:focus-within .content > *:not(.title) {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--d) / 8);
    }

    .card:focus-within::before,
    .card:focus-within::after,
    .card:focus-within .content,
    .card:focus-within .content > *:not(.title) {
        transition-duration: 0s;
    }
}


.extendedcard {

}

@media (min-width: 600px) {
    .extendedcard {
        width: 90%;
        height: 450px;
    }
}