:root {

   /* Structure */
   --header-height: 260px;
   --logo-width: 111px;
   --logo-aspect-ratio: 111/145;
   --menu-height:44px;
   --menu-spacing:90px;
   --margin: 90px;
   --margin-small: 60px;
   --padding:80px;
   --grid-gap: 50px;
   --container: 1380px;
   --container-narrow: 1040px;
   --container-padding:100px;
   --footer-height:190px;
   --footer-menu-gap: 70px;
   --button-height: 66px;
   --button-size:44px;

   /* Layouts */
   --hero-aspect-ratio: 1180/450;
   --quote-aspect-ratio: 564/336;
   --text-image-aspect-ratio: 1/1;
   --gallery-aspect-ratio: 564/336;
   --products-aspect-ratio: 256/305;

   /* Font Sizes */
   --font-small: 18px;
   --font-regular-small: 24px;
   --font-regular: 28px;
   --font-regular-large: 32px;
   --font-medium: 36px;
   --font-large: 40px;
   --font-x-large: 44px;

   /* Fonts */
   --font-sansserif: "gill-sans-nova-book", sans-serif;

   /* Colours */
   --navy: #103b58;
   --pink: #dd4588;
   --cream: #f7f3e9;
   --white: #FFF;
   --teal: #30716d;

   /* Swiper */
   --swiper-theme-color: var(--navy);

   /* Transitions */
   --transition-color: 0.3s ease-out color;
   --transition-background: 0.3s ease-out background-color;

   /* Cookie Banner */
   --cc-btn-primary-bg: var(--teal);
   --cc-btn-secondary-hover-bg: var(--black);

}

/* Font sizes */
.font-small { font-size: var(--font-small); }
.font-regular { font-size: var(--font-regular); }
.font-regular-large { font-size: var(--font-regular-large); }
.font-medium { font-size: var(--font-medium); }
.font-medium-large { font-size: var(--font-medium-large); }
.font-large { font-size: var(--font-large); }

.font-small { font-size:var(--font-small); }
.font-regular-small { font-size:var(--font-regular-small); }
.font-regular { font-size:var(--font-regular); }
.font-regular-large { font-size:var(--font-regular-large); }
.font-medium { font-size:var(--font-medium); }
.font-large { font-size:var(--font-large); }
.font-x-large { font-size:var(--font-x-large); }

/* Colours */
.navy { color:var(--navy); }
.pink { color:var(--pink); }
.cream { color:var(--cream); }
.white { color:var(--white); }
.teal { color:var(--teal); }
.bg-navy { background-color:var(--navy); }
.bg-pink { background-color:var(--pink); }
.bg-cream { background-color:var(--cream); }
.bg-white { background-color:var(--white); }
.bg-teal { background-color:var(--teal); }

/* --------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */
body { font-family: var(--font-sansserif); color: var(--navy); background:var(--white); font-size: var(--font-regular); text-align: center; font-weight: 300; line-height: 1.5; }
.container { max-width: var(--container); padding-left: var(--container-padding); padding-right: var(--container-padding); margin-left: auto; margin-right: auto; width: 100%; position: relative; z-index: 0; }
.grid-gap-small { grid-gap:var(--grid-gap-small); }
.margin-top-small { margin-top:var(--margin-small); }
.margin-bottom-small { margin-bottom:var(--margin-small); }
.has-bg { padding-top:var(--padding); padding-bottom: var(--padding); }
.has-bg + .has-bg { margin-top:calc(-1 * var(--margin)); }
.bg-cream + .bg-cream { padding-top: 0; }
.bg-white + .bg-white { padding-top: 0; }
.reveal { visibility: hidden; will-change: opacity, transform; transform: translateY(20px); opacity:0 }

.uppercase { letter-spacing: 0.2em; }
.light { font-weight: 300; }
.button { height: var(--button-height); line-height: calc(var(--button-height) - 2px); padding: 0 40px; text-transform: uppercase; letter-spacing: 0.2em; border:2px solid var(--teal); margin: 1lh auto 0 auto; font-size: var(--font-regular-small); display: inline-flex; font-weight: 400; }
.button-underline { text-decoration: underline; font-size: var(--font-regular-small); line-height: 32px; text-transform: uppercase; font-weight: 400; text-underline-offset: 8px; letter-spacing: 0.14em; margin-top: 12px; }
h1,h2,h3 { font-weight: 300; margin-bottom: 0.5lh; }
p { max-width: var(--container-narrow); margin-left: auto; margin-right: auto; }
p:last-of-type { margin-bottom: 0; }
strong, b, .bold { font-weight: 400; }

/* Skip Link */
.skip-link { top:-100px; left: 20px; background: var(--teal); color: var(--white); padding: 0 20px; z-index: 10000; text-decoration: none; font-weight: bold; transition: var(--transition-top); line-height: 44px; font-size: var(--font-small); text-transform: uppercase; letter-spacing: 0.2em;}
.skip-link:focus { top:20px }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header { height: var(--header-height); }
.header-logo { width: var(--logo-width); height: auto; aspect-ratio: var(--logo-aspect-ratio); top:0; bottom: 0; left: 0; right: 0; margin: auto; }
.header-menu { gap:var(--menu-spacing); margin: 0 auto; }
.header-menu-toggle { display: none; }
.header-menu-link-consultancy { margin-right: var(--logo-width); }
.header-menu-link-the-shop { margin-left: var(--logo-width); }
.header-instagram { width: 44px; height: 44px; padding: 14px; top:0; bottom: 0; right: var(--container-padding); margin: auto; }
.header-menu-toggle { width: 44px; height: 44px; top:0; bottom:0; left:var(--container-padding); margin: auto; padding: 12px 0; }
.header-menu-toggle span { height: 1px; width: 26px; background-color: var(--pink); margin: 0 auto; }


/* --------------------------------------------------------------------------
   Layouts
   -------------------------------------------------------------------------- */

/* Hero */
.layout-hero { padding-top:0; }
.hero__image { aspect-ratio: var(--hero-aspect-ratio); }
.hero__title { max-width: 860px; margin-left: auto; margin-right: auto; line-height: 1.1818; letter-spacing: 0.07em; }
.hero__text h3 { color: var(--pink); font-size: var(--font-medium); }

/* Quote */
.quote__media { aspect-ratio: var(--quote-aspect-ratio); }

/* Text */
.layout-text h3 { color: var(--pink); font-size: var(--font-medium); }
.layout-text.is-small h3 { font-size:var(--font-regular-small); }

/* Text & Image */
.text-image-media { aspect-ratio: var(--text-image-aspect-ratio); }

/* Gallery */
.gallery__image { aspect-ratio: var(--gallery-aspect-ratio); }

/* Services */
.services__list { max-width: 840px; margin-left: auto; margin-right: auto; text-align: left; }
.services__item:not(:last-child) { margin-bottom: 6px; }
.services__item-title, .services__list p { margin: 0; }
.services__item-title { min-width: 40%; }
.services__item-duration { min-width:29%; }

/* Products */
.products__item-image { aspect-ratio: var(--products-aspect-ratio); margin-bottom: 20px; }
.products__item-title { margin-bottom: 0.25lh; }
.button-product-zoom { top:0; right:0; bottom:0; left:0; }
.button-product-zoom svg { width: var(--button-size); height: var(--button-size); padding: 10px; margin: auto 0 0 auto; }

/* Product Modal */
.product-modal-inner { margin: 40px; width: calc(100vw - 80px); height: calc(100dvh - 80px); display: flex; justify-content: center; }
.product-modal-inner .button-product-close { width: var(--button-size); height: var(--button-size); top:20px; right:20px; z-index: 1; }
.product-modal-inner .swiper { z-index: 0; }
.product-modal-inner .swiper-slide { padding: 20px; }
.product-modal-inner img { height: 100%; object-fit: contain; }

/* Table */
.layout-table table { width: 100%; text-align: left; min-width: 600px; }
.layout-table th { font-weight: normal; color:var(--pink); }
.layout-table td, .layout-table th { padding-bottom: 10px; padding-right: 10px; vertical-align: top;}
.layout-table .table__wrapper { overflow-x: auto; }
.has-bg + .layout-table { margin-top: calc(-1.5 * var(--margin));}

/* Privacy Policy / Terms */
.page-secondary .layout-text { text-align: left;}
.page-secondary .layout-text p { max-width: none; }
.page-secondary .layout-text:not(:first-of-type) h2 { font-size: var(--font-regular); }
.page-secondary .layout-text:first-of-type h2 { text-transform: uppercase; color: var(--navy); text-align: center; letter-spacing: 0.075em; }
.page-secondary .layout-text:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { min-height: var(--footer-height); padding: 60px 0;}
.footer-menu { gap: var(--footer-menu-gap); }
.footer-menu-link.is-active { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 8px; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.dialog-container,
.dialog-overlay { position: fixed; inset: 0; }
.dialog-container { z-index: 2; display: flex; }
.dialog-container[aria-hidden='true'] { display: none; }
.dialog-overlay { background-color: var(--cream); opacity: 0.8; cursor: pointer; }
.dialog-content { z-index: 2; position: relative; }

/* --------------------------------------------------------------------------
   Media Queries
   -------------------------------------------------------------------------- */

@media (pointer: fine) {
   /* Hover styles for devices that support hover */
   .button { transition: var(--transition-background), var(--transition-color); }
   .button:hover { background-color: var(--teal); color: var(--white); }
   .button-underline { transition: var(--transition-color); }
   .button-underline:hover { color: var(--pink); }
   .footer-menu-link:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 8px; }
   .header a { transition: var(--transition-color); }
   .header a:hover { color: var(--pink); }
   .button-product-zoom  { transition: var(--transition-color); }
   .button-product-zoom:hover { color: var(--white); }
   .button-product-close { transition: var(--transition-color); }
   .button-product-close:hover { color: var(--pink); }
   .swiper-button-next, .swiper-button-prev { transition: var(--transition-color); }
   .swiper-button-next:not(.swiper-button-disabled):hover, .swiper-button-prev:not(.swiper-button-disabled):hover { color: var(--pink); }
   .layout-text a { transition: var(--transition-color); }
   .layout-text a:not(.button):hover { color: var(--pink); }
}

@media (min-width: 768px) {
   /* Desktop */

   /* Structure */
   .d\:col-span-2	{ grid-column: span 2 / span 2; }

   /* Quote */
   .layout-quote.has-text-left .quote__text { grid-column: 1; grid-column: 1; grid-row: 1; }
   .layout-quote.has-text-left .quote__media { grid-column: 2; } 

}

@media (max-width: 1240px) {
   :root {
      --container-padding:50px;
      --header-height: 208px;
      --logo-width: 89px;
      --menu-spacing:72px;
      --button-height: 52px;
      --margin: 72px;
      --margin-small: 48px;
      --padding: 64px;

      /* Font Sizes - 80% */
      --font-small: 15px;
      --font-regular-small: 19px;
      --font-regular: 22px;
      --font-regular-large: 26px;
      --font-medium: 29px;
      --font-large: 32px;
      --font-x-large: 35px;
   }
}

@media (max-width: 1024px) {

   /* Menu */
   .header-menu-toggle { display: flex; }
   .header-menu { display: none; }

   /* Mobile Menu */
   .mobile-menu { max-width: 375px; margin: 0; width: 100%; flex-direction: column; }
   .mobile-menu__link { font-size: 18px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.2em; line-height: 2; }
   .mobile-menu__contacts { font-size: 20px; bottom: 40px; left: 40px; right: 40px; line-height: 1.4; font-weight: 400; }
   .mobile-menu__logo { position: absolute; width: 60px; aspect-ratio: var(--logo-aspect-ratio); top:25px; left:0; right:0; margin: auto; --color1:var(--cream); --color2:var(--cream);  } 
   .button-close { width: 44px; height: 44px; top:32px; left:32px; padding: 10px; }
}

@media (max-width: 768px) {

   :root {
      /* Structure */
      --container-padding:35px;
      --header-height: 126px;
      --logo-width: 60px;
      --grid-gap:15px;
      --margin: 30px;
      --button-height:44px;
      --padding: 24px;

      /* Layouts */
      --hero-aspect-ratio: 375/218;
      
      /* Font Sizes - 65% */
      --font-small: 12px;
      --font-regular-small: 16px;
      --font-regular: 18px;
      --font-regular-large: 21px;
      --font-medium: 24px;
      --font-large: 26px;
      --font-x-large: 28px;

   }

   /* Structure */
   .button { font-size: var(--font-small); padding: 0 16px;}

   /* Hero */
   .hero__image { margin-left: calc( -1 * var(--container-padding)); margin-right: calc( -1 * var(--container-padding)); }

   /* Services */
   .services__item:not(:last-child) { margin-bottom: 0.5lh; }
   .services__item { flex-wrap: wrap; justify-content: center; }
   .services__item-title { width: 100%; text-align: center; }
   .services__item-duration { min-width: 0; }
   .services__item-duration:after { content: '-'; padding: 0 10px; }

   /* Product : Modal */
   .product-modal-inner { width: 100vw; height: 100dvh; margin: 0; }
   .product-modal-inner .button-product-close { padding: 10px; top:10px; right:10px; }

   /* Footer */
   .footer { padding: 20px 0; }
   .footer-menu { flex-direction: column; gap: 20px; }
}