@import "./type-scale.css";
@import "./menu.css";

:root {
  h1, h2, h3, h4, h5, h6 {
      --wp--preset--font-size--very-small: var(--wp--preset--font-size--heading--very-small);
      --wp--preset--font-size--small: var(--wp--preset--font-size--heading--small);
      --wp--preset--font-size--medium: var(--wp--preset--font-size--heading--medium);
      --wp--preset--font-size--large: var(--wp--preset--font-size--heading--large);
      --wp--preset--font-size--x-large: var(--wp--preset--font-size--heading--x-large);
      --wp--preset--font-size--xx-large: var(--wp--preset--font-size--heading--xx-large);
      --wp--preset--font-size--3-x-large: var(--wp--preset--font-size--heading--3-x-large);
      --wp--preset--font-size--4-x-large: var(--wp--preset--font-size--heading--4-x-large);
      --wp--preset--font-size--5-x-large: var(--wp--preset--font-size--heading--5-x-large);
      --wp--preset--font-size--6-x-large: var(--wp--preset--font-size--heading--6-x-large);
      --wp--preset--font-size--7-x-large: var(--wp--preset--font-size--heading--7-x-large);
      --wp--preset--font-size--8-x-large: var(--wp--preset--font-size--heading--8-x-large);
      line-height: clamp(1, calc(1 + 0.5rem / 1em), 1.5);
      margin-top:clamp(0.75rem, 0.5em, 1.5rem) ;
       margin-bottom:clamp(0.75rem, 0.5em, 1.5rem) ;
      
  }
  body {
    --wp--preset--spacing--resp: clamp(8px, 1.66vw, 32px);
  }
}

* {
  box-sizing: border-box;
}

* {
  line-height: clamp(1, calc(1 + 0.5rem / 1em), 1.5);
}
.relative {
  position:relative;
}
a {
  text-decoration: none;
}
a:hover  {
  text-decoration: underline;
}

.cta a {
  padding: 1em 1.5em;
  display: inline-block;
  line-height: .9;
  letter-spacing: .02em;;
}

.cta:hover  a, .cta  a:hover,   .cta:hover  * {
  text-decoration: none !important;
}

.split-char {
  line-height:inherit;
}
.char-inner {
  display:inline-block;
  line-height:inherit;
}

header {
	--border-radius:16px;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index:9999;
	
}


header .tms-nav li, header .tms-nav ul {
  min-height: 100%;
}
header .tms-nav a {
  display:inline;
  text-decoration: none;
    padding: 16px 32px;
    min-height: 100%;
    white-space: nowrap;
    border-radius: 12px;
    letter-spacing: .02em;
  transition: background-color .15s ease, box-shadow .15s ease;
}

header .tms-nav a:hover {
  background-color: var(--wp--preset--color--contrast);
  box-shadow: -2px 2px 4px  #00000041 ;
}

header .tms-nav a p {
  margin:0px;
  letter-spacing: .05em;
  white-space: nowrap;
  line-height: 1;
  font-weight: 400;
  color: var(--wp--preset--color--contrast);
  min-height: 100%;
}

footer {
  position:relative;
}

.single-post p {
  margin-block-start: .5em;
  
}
.page-template-hero {
  --mask-height: var(--wp--preset--spacing--80);
  mask-image:
   linear-gradient(white, white),
    url('https://londontenantservices.com/wp-content/uploads/2026/05/hero-bottom.svg');
  mask-position: top, bottom;
  mask-repeat: no-repeat;
  mask-size: 100% calc(100% - var(--mask-height)),
             calc( 100% + 8px )  calc(var(--mask-height) + 2px );
  mask-composite: add;
}
.page-template-hero-b {
  --mask-height: var(--wp--preset--spacing--80);
  mask-image:
   linear-gradient(white, white),
    url('https://londontenantservices.com/wp-content/uploads/2026/05/hero-bottom-b.svg');
  mask-position: top, bottom;
  mask-repeat: no-repeat;
  mask-size: 100% calc(100% - var(--mask-height)),
             calc( 100% + 8px )  calc(var(--mask-height) + 2px );
  mask-composite: add;
}
@media (max-width: 1024px) {
  .page-template-hero, .page-template-hero-b {
    --mask-height: var(--wp--preset--spacing--40);
  }
}
.hero-bgr-adjust {
  margin-block-start: calc( var(--wp--preset--spacing--80) * -1 ) !important;
}

footer {
  margin-top: calc( var(--wp--preset--spacing--80) * -1 ) !important;
  position:relative;
  z-index:2;
}
footer .footer-bgr {
  mask-image:
    url('https://londontenantservices.com/wp-content/uploads/2026/04/footer-mask.svg'),
    linear-gradient(white, white);
  mask-position: top, bottom;
  mask-repeat: no-repeat;
  mask-size: calc( 102% + 10px ) 30%,
             100%  calc( 70% + 2px );
  mask-composite: add;
}
@media (max-width: 1024px) {
  footer .footer-bgr {
    mask-size: calc( 100% + 10px ) 15%,
             100%  calc( 85% + 2px );
  }
}
.dots-bgr {
  --gap: 6px;
  position:relative;
}
.dots-bgr::before {
  --dot: #4a9797;
  content: "";
  position: absolute;
  inset:0px;
  background-color: #4DADAE;
  background-image:
  radial-gradient(circle, var(--dot) 1px, transparent 1px),
  radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0, calc( var(--gap) / 2 ) calc( var(--gap) / 2 );
  border-radius: inherit;
}

.dots-1 {
  --gap: 6px;
  --dot: rgba(153, 172, 172, 0.322);
  background-image:
  radial-gradient(circle, var(--dot) 1px, transparent 1px),
  radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-blend-mode: multiply;
  background-size: var(--gap) var(--gap);
  background-position: 0 0, calc( var(--gap) / 2 ) calc( var(--gap) / 2 );
  border-radius: inherit;
}
.dots-2 {
  --gap: clamp(14px, 1.35vw ,26px);
  --dot: rgb(119, 119, 119);
  background-image:
  radial-gradient(circle, var(--dot) 1px, transparent 1px),
  radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0, 0 0;
}
.dots-2-white {
  --gap: clamp(14px, 1.35vw ,26px);
  --dot: rgb(201, 201, 201);
  background-image:
  radial-gradient(circle, var(--dot) 1px, transparent 1px),
  radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0, 0 0;
}
.dots-2-offset {
  --gap: 6px;
  --dot: #4a9797;
  background-image:
  radial-gradient(circle, var(--dot) 1px, transparent 1px),
  radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: var(--gap) var(--gap);
  background-position: 0 0, calc( var(--gap) / 2 ) calc( var(--gap) / 2 );
}

.tms-heading {
  --wp--preset--font-size--very-small: var(--wp--preset--font-size--heading--very-small);
  --wp--preset--font-size--small: var(--wp--preset--font-size--heading--small);
  --wp--preset--font-size--medium: var(--wp--preset--font-size--heading--medium);
  --wp--preset--font-size--large: var(--wp--preset--font-size--heading--large);
  --wp--preset--font-size--x-large: var(--wp--preset--font-size--heading--x-large);
  --wp--preset--font-size--xx-large: var(--wp--preset--font-size--heading--xx-large);
  --wp--preset--font-size--3-x-large: var(--wp--preset--font-size--heading--3-x-large);
  --wp--preset--font-size--4-x-large: var(--wp--preset--font-size--heading--4-x-large);
  --wp--preset--font-size--5-x-large: var(--wp--preset--font-size--heading--5-x-large);
  --wp--preset--font-size--6-x-large: var(--wp--preset--font-size--heading--6-x-large);
  --wp--preset--font-size--7-x-large: var(--wp--preset--font-size--heading--7-x-large);
  --wp--preset--font-size--8-x-large: var(--wp--preset--font-size--heading--8-x-large);
}

.tms-cap-trim {
  line-height: .67em;
}

.img-wrap {
  position:relative;
}
.img-wrap img {
  position: relative ;
  z-index:1;
}
.img-wrap::after {
  content: "";
  opacity:50%;
  position: absolute;
  top: 8px;
  left: -8px; 
  width: 100%;
  height: 100%;
  border: 1px solid var(--wp--preset--color--accent-1);
}

.tms-diamond-container{
 
}

.tms-diamond {
   transform: rotate(45deg);
  width:24px;
  height:24px;
}

.tms-diamond-bordered {
  transform: rotate(45deg);
  width:24px;
  height:24px;
  outline:1px solid var(--wp--preset--color--accent-1);
  outline-offset: 4px;
}