@layer base, components, pages, overrides;
    @layer base {

  /* *{
    outline: 1px solid red;
  } */

  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    text-size-adjust: none;
    interpolate-size: allow-keywords;
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: .2s;
    }
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  textarea:not([rows]) {
    min-block-size: 10em;
  }

  :target {
    scroll-margin-block: 5ex;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding-inline-start: 0;
  }

  a:not([class]) {
    text-decoration-thickness: max(0.06rem, 1px);
    text-underline-offset: 0.3rem;
  }

  body {
    min-block-size: 100vh;
  }

}
    @layer base {
  @font-face {
    font-family:"DM Serif Display";
    font-style: normal;
    font-display: swap;
    src: url("/font/DM-serif-display.woff2") format("woff2");
    font-weight: 400;
  }

  @font-face {
    font-family: "Karla";
    font-style: normal;
    font-display: swap;
    src: url("/font/Karla.woff2") format("woff2");
    font-weight: 200 800;
  }

  :where(html) {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
    --font-serif: ui-serif, serif;
  }
}
    @layer base {
  [data-theme="light"] {
    --color-text: #312b3b;
    --color-text-revert: #312b3b;
    --color-text-inverse: hsl(0 0% 98%);
    --color-bg: hsl(48 49% 99%);
    --color-bg-revert: hsl(48 49% 99%);
    --color-transparent: rgba(255, 255, 255, 0);
    --color-brand: hsl(264, 16%, 25%);
    --color-accent: #34586f;
    --color-secondary: #cebb6f;
    --color-surface-border: hsl(48 8% 80%);
    --color-surface: rgb(241, 241, 231);
    --color-header-footer-bg: hsl(0, 0%, 100%);
    --color-punch: hsl(359 68% 51%);
    --color-punch-2: hsl(10 67% 49%);
    --shadow-soft: 0 18px 40px hsla(264, 16%, 25%, 0.1);
    --shadow-hard: 0 36px 16px -22px hsla(260, 17%, 7%, .5);
    --shadow-subtle: 0 1px 4px hsla(264, 16%, 25%, 0.2);
    --shadow-card: 0 10px 24px hsla(264, 16%, 25%, 0.3);
  }

  [data-theme="dark"] {
    --color-text: hsl(0 0% 88%);
    --color-text-inverse: hsl(0 0% 98%);
    --color-text-revert: #312b3b;
    --color-bg: hsl(264 16% 14%);
    --color-brand: hsl(263, 12%, 22%);
    --color-accent: hsl(203 59% 65%);
    --color-secondary: hsl(48 49% 62%);
    --color-surface-border: hsl(0 0% 20%);
    --color-surface: rgb(241, 241, 231);
    --color-bg-revert: hsl(48 49% 99%);
    --color-punch: hsl(359 68% 51%);
    --color-punch-2: hsl(10 67% 49%);
    --shadow-soft: 0 18px 40px hsla(264, 16%, 25%, 0.1);
    --shadow-hard: 0 36px 16px -22px hsla(260, 17%, 7%, 1);
    --shadow-card: 0 10px 24px hsl(0 0% 5%);
  }


  :root {
    --radius: clamp(.2rem, 1vw, 1.2rem);
    --radius-round: 50rem;
  }

  .dark-mode img {
    filter: brightness(1) contrast(1.1);
  }

  ::backdrop {
    --color-backdrop: rgb(240 239 240 / 0.85);
    background-color: var(--color-backdrop);
  }

  .inverse a:not(.btn) {
    color: var(--color-text-inverse);
    text-decoration-color: var(--color-secondary);
  }


  html {
    font-size: 90%;
    scrollbar-gutter: stable;
    background-color: var(--color-surface);
    max-inline-size: 1920px;
    margin-inline: auto;
    scrollbar-color: var(--color-accent) var(--color-surface);
    scrollbar-width: auto;
  }

  @media (width < 220px) {
    html {
      font-size: 70%;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: Karla, var(--font-sans);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: calc(1.2em + 0.4rem);
    min-block-size: 100vh;
    margin: 0;
    padding-inline: clamp(.2rem, 3vw, 5rem);

  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "DM Serif Display", var(--font-serif);
    font-weight: 400;
    line-height: calc(1em + 0.5rem);
    text-wrap: balance;
    margin-block-end: var(--space-3xs);
    margin-block-start: 0;
  }

  h1 {
    font-size: var(--step-4);
    margin-block-end: var(--space-s);
  }

  h1 span {
    font-family: Karla, var(--font-sans);
    font-size: var(--step--1);
    text-transform: uppercase;
    display: block;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.5;
    margin-block-end: var(--space-s);
  }

  .single h1 {
    text-align: center;
  }

  h2 {
    font-size: var(--step-3);
    text-transform: capitalize;
  }

  h3 {
    font-size: var(--step-1);
     text-transform: capitalize;
  }

  h4 {
    font-size: var(--step-0);
    font-weight: 500;
    text-transform: capitalize;
  }

  h5,
  h6,
  small {
    font-size: var(--step--1);
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif
  }


  p {
    margin-block: var(--space-2xs) var(--space-m);
  }

  p small {
    display: inline-block;
    line-height: 1.4;
    max-inline-size: 65ch;
  }

  a {
    color: var(--color-text);
    text-decoration-color: var(--color-accent);
    padding-block: var(--space-s);
  }

  a:hover {
    text-decoration-thickness: .15rem;
  }

  a:active {
    position: relative;
    inset-block-start: 0.05rem;
  }

  ul,
  ol {
    padding: 0;
  }

  li {
    margin-inline-start: var(--space-s);
    line-height: calc(1.5em + 0.5rem);
  }

  @media (width >=60rem) {

    li {
      padding-inline-start: var(--space-s);
    }

    main ul li::marker {
      color: var(--color-text);
      font-size: 1.2rem;
      content: '⬤' /"";
    }
  }

  main ol li::marker {
    display: inline-block;
    width: 2ch;
    padding-inline-end: 1ch;
    margin-inline-start: -5ch;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  hr {
    border: 0;
    border-block-start: .6rem solid;
    color: var(--color-secondary);
    width: clamp(15rem, 30vw + 1rem, 60rem);
    margin: 0;
  }

  ::selection {
    background-color: var(--color-surface);
    color: var(--color-accent);
  }

  blockquote {
    display: block;
    padding-inline-start: var(--space-xs);
    margin-inline: 0;
    margin-block: var(--space-s) var(--space-l);
    border-inline-start: 0.5rem solid var(--color-secondary);
    font-family: var(--font-serif);
    font-style: italic;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-subtle);
    text-wrap: balance;
    color: var(--color-text-revert);
  }

  cite {
    font-style: normal;
    font-weight: 600;
    float: inline-end;
    margin: 0;
  }

  main img {
    border-radius: var(--radius);
  }

  .single main img {
    margin-block-end: var(--space-m);
  }

  .skip-link {
    position: absolute;
    z-index: 10;
    margin: 1rem;
    padding: 0.5rem;
    background-color: var(--color-surface-border);
    font-weight: 700;
  }

  .skip-link:not(:focus) {
    clip-path: inset(50%);
  }

  :focus-visible,
  .toggle:focus-visible {
    outline: 0.3rem solid var(--color-accent);
    border-radius: 0.5rem;
  }
}
    @layer base {/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1920,22,1.25,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN */

:root {
  --step--3: clamp(0.5787rem, 0.5536rem + 0.1253vw, 0.704rem);
  --step--2: clamp(0.6944rem, 0.6573rem + 0.1856vw, 0.88rem);
  --step--1: clamp(0.8333rem, 0.78rem + 0.2667vw, 1.1rem);
  --step-0: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  --step-1: clamp(1.2rem, 1.0963rem + 0.5188vw, 1.7188rem);
  --step-2: clamp(1.44rem, 1.2983rem + 0.7084vw, 2.1484rem);
  --step-3: clamp(1.728rem, 1.5365rem + 0.9575vw, 2.6855rem);
  --step-4: clamp(2.0736rem, 1.8169rem + 1.2833vw, 3.3569rem);
  --step-5: clamp(2.4883rem, 2.1468rem + 1.7078vw, 4.1962rem);
  --step-6: clamp(2.986rem, 2.5341rem + 2.2592vw, 5.2452rem);
  --step-7: clamp(3.5832rem, 2.9885rem + 2.9733vw, 6.5565rem);
  --step-8: clamp(4.2998rem, 3.5207rem + 3.8958vw, 8.1956rem);
  --step-9: clamp(5.1598rem, 4.1428rem + 5.0848vw, 10.2445rem);
  --step-10: clamp(6.1917rem, 4.8689rem + 6.6139vw, 12.8057rem);
}
}

    @layer base {
  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1920,22,1.25,10,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|s-l|s-xl|3xs-2xl&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.4625rem + 0.1875vw, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6875rem + 0.3125vw, 1.0625rem);
  --space-s: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  --space-m: clamp(1.5rem, 1.3875rem + 0.5625vw, 2.0625rem);
  --space-l: clamp(2rem, 1.85rem + 0.75vw, 2.75rem);
  --space-xl: clamp(3rem, 2.775rem + 1.125vw, 4.125rem);
  --space-2xl: clamp(4rem, 3.7rem + 1.5vw, 5.5rem);
  --space-3xl: clamp(6rem, 5.55rem + 2.25vw, 8.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1625rem + 0.4375vw, 0.6875rem);
  --space-2xs-xs: clamp(0.5rem, 0.3875rem + 0.5625vw, 1.0625rem);
  --space-xs-s: clamp(0.75rem, 0.625rem + 0.625vw, 1.375rem);
  --space-s-m: clamp(1rem, 0.7875rem + 1.0625vw, 2.0625rem);
  --space-m-l: clamp(1.5rem, 1.25rem + 1.25vw, 2.75rem);
  --space-l-xl: clamp(2rem, 1.575rem + 2.125vw, 4.125rem);
  --space-xl-2xl: clamp(3rem, 2.5rem + 2.5vw, 5.5rem);
  --space-2xl-3xl: clamp(4rem, 3.15rem + 4.25vw, 8.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.65rem + 1.75vw, 2.75rem);
  --space-s-l: clamp(1rem, 0.65rem + 1.75vw, 2.75rem);
  --space-s-xl: clamp(1rem, 0.375rem + 3.125vw, 4.125rem);
  --space-3xs-2xl: clamp(0.25rem, -0.8rem + 5.25vw, 5.5rem);
}
}

    @layer base {

  /* common utilities*/

  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
   footer h3,
  .home h2,
  .getting h2,
  .about h2 {   
    margin-block-end: var(--space-m);
   text-underline-offset: .6rem;       
    position: relative;
    display: inline-block;
    &::after{      
   content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: -0.8rem; 
    block-size: 0.5rem;  
    background-color: var(--color-secondary);   
    border-radius: 0.25rem;      
    }   
  }

  /* theme utilities*/
   
@media (width > 60rem){
       .home .hero, .home .our-story, .about .shade-2 {
        background-image: url(/images/affinity-white-bg.svg);
        background-size: clamp(20rem, 40vw, 46rem) auto;
        background-repeat: no-repeat;
        background-position: 75% 50%;
        background-origin: padding-box;
    }

      .home .hero picture, .about .shade-2 picture{
        justify-self: center;
        align-self: center;
        width: clamp(60px, 26vw, 450px);
        border: clamp(5px, 2vw, 19px);       
        border-style: solid;
        border-color: var(--color-secondary);
        border-radius: var(--radius);
    }
    }

    .home .hero picture{
      transform: rotate(-5deg);
    }
    
.home .hero picture, .about .hero picture {
    border: clamp(5px, 2vw, 19px);
    border-style: solid;
    border-color: var(--color-secondary);     
}

.about .shade-2  img {
  border-radius: 0%;   
}

  .hero,
  .feature {
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    padding: var(--space-s-xl);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-block-end: var(--space-l);
    animation: softFade 0.2s ease-in-out;

    & li::marker {
      color: var(--color-secondary);
    }

    & a:not(.btn, .shade-2 a ) {
      color: var(--color-text-inverse);
      text-decoration-color: var(--color-secondary);
    }
  }

  .highlight {
    background-color: var(--color-secondary);
    color: var(--color-text-revert);
    padding: var(--space-s-xl);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-block-end: var(--space-l);
  }


  .shade {
    color: var(--color-text-revert);
    background-color: var(--color-bg-revert);
    padding: var(--space-s-xl);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid color-mix(in srgb, var(--color-brand), transparent 80%);
    margin-block-end: var(--space-l);
    animation: softFade 0.2s ease-in-out;
    & a{
      color: var(--color-text-revert);
    }    
    & li::marker{
      color: var(--color-text-revert);
    }   
  }
  
  .shade-2 {
    color:#312b3b;
    background-color:var(--color-surface); 
    padding: var(--space-s-xl);
    border-radius: var(--radius);
    box-shadow: var(--shadow-subtle);
    border: 1rem solid #fff;
    margin-block-end: var(--space-l);
    animation: softFade 0.2s ease-in-out;
    & a{
      color: var(--color-text-revert);
    }        
     & li::marker{
      color: var(--color-text-revert);
    } 
  }

  .card {
    padding: var(--space-s-m);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid color-mix(in srgb, var(--color-brand), transparent 80%);
  }

  .section-block-spacer{
    margin-block: var(--space-2xl);
  }

  /*  */
  lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    /* max-width: 720px; */
    border-radius: var(--radius);
    margin-block: var(--space-xs);
  }

  /* gradient */
  lite-youtube::before {
    content: attr(data-title);
    display: block;
    position: absolute;
    top: 0;
    /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
    background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
    height: 99px;
    width: 100%;
    font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
    color: hsl(0deg 0% 93.33%);
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    font-size: 18px;
    padding: 25px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  lite-youtube:hover::before {
    color: white;
  }

  /* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
  lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
  }

  lite-youtube>iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
  }

  /* play button */
  lite-youtube>.lyt-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
  }

  lite-youtube:hover>.lyt-playbtn,
  lite-youtube .lyt-playbtn:focus {
    filter: none;
  }

  /* Post-click styles */
  lite-youtube.lyt-activated {
    cursor: unset;
  }

  lite-youtube.lyt-activated::before,
  lite-youtube.lyt-activated>.lyt-playbtn {
    opacity: 0;
    pointer-events: none;
  }

  .lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .yt-modal {
    padding: 1.8rem;
    background-color: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    width: max(10vw, 800px);
    aspect-ratio:16/9;
     overflow: hidden;
}

#video-container iframe{
  inline-size:100% ;
  block-size: 100%;
  aspect-ratio:16/9;   
}

@media (prefers-reduced-motion: no-preference) {
    dialog[open] {
        animation: show .3s ease normal;
    }
}

}
    @layer base {
.page-layout > *, .full-width > * {
  grid-column: content;
}
.page-layout, .full-width {
--minimum-content-padding: 1rem;

/** TRACK WIDTHS **/
--full-max-width: 1fr;
--wide-max-width: 110rem;
--popout-max-width: 75rem;
--content-max-width: 60rem;
--inset-content-max-width: 45rem;

/** TRACK SIZES **/
--full: minmax( var(--minimum-content-padding), 1fr );
--wide: minmax( 0, calc( ( var(--wide-max-width) - var(--popout-max-width)) * 0.5 ) );
--popout: minmax( 0, calc( ( var(--popout-max-width) - var(--content-max-width)) * 0.5 ) );
--content: minmax( 0, calc( ( var(--content-max-width) - var(--inset-content-max-width)) * 0.5 ) );
--inset-content: min( var(--inset-content-max-width), 100% - var(--minimum-content-padding) * 2 );

display: grid;
grid-template-columns: 
  [full-start]
  var(--full)
    [wide-start]
    var(--wide)
      [popout-start]
      var(--popout)
        [content-start]
        var(--content)
          [inset-content-start]
          var(--inset-content)
          [inset-content-end]
        var(--content)
        [content-end]
      var(--popout)
      [popout-end]
    var(--wide)
    [wide-end]
  var(--full)
  [full-end];
}

/** CLASSES **/
.full { grid-column: full; }
.full-start { grid-column-start: full-start; }
.full-end { grid-column-end: full-end; }

.wide { grid-column: wide; }
.wide-start { grid-column-start: wide-start; }
.wide-end { grid-column-end: wide-end; }

.popout { grid-column: popout; }
.popout-start { grid-column-start: popout-start; }
.popout-end { grid-column-end: popout-end; }

.content { grid-column: content; }
.content-start { grid-column-start: content-start; }
.content-end { grid-column-end: content-end; }

.inset-content { grid-column: inset-content; }
.inset-content-start { grid-column-start: inset-content-start; }
.inset-content-end { grid-column-end: inset-content-end; }

.full-width { grid-column: full; }
.full-content, .full-content-nopad { grid-column: full; }
.full-content { padding-inline: var(--minimum-content-padding); }


}
    @layer base {

  .cols {
    columns: 34rem auto;
    gap: var(--space-3xl);    
    column-rule: 1px solid color-mix(in srgb, var(--color-brand), transparent 90%);   
}

.cols div {
    break-inside: avoid; 
    padding-block-start: var(--space-3xs);  
}

  .ram-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
   gap: var(--space-m);
}

  .one-col {
    inline-size: min(110rem, 100% - 3rem);
    margin-inline: auto;
    padding-inline: 0;
    min-height: 100vh;
}

 @media (width > 60rem){
     .two-col-grid {
        display: grid;
        gap: var(--space-2xl);       
        grid-template-columns: repeat(2, 1fr);
        margin-block-end: var(--space-2xl);        
    }
} 

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

.justify-items-center{  
  align-self:center ;
}

.center-me {
    display: grid;
    justify-items: center;
}



}
    @layer components {  
  
:where(.btn, [role="button"]) {
  --btn-bg: var(--color-accent);
  --btn-color: var(--color-bg);
  --btn-icon: "⯆";

  display: grid;
  inline-size: max-content;
  block-size: max-content;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 999px;
  padding-inline: var(--space-m);
  padding-block: var(--space-2xs);
  margin-block: var(--space-m) var(--space-l);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
  border: 2px solid var(--btn-border);
}

.btn:active {
  transform: scale(0.98);
}

:where(.btn, [role="button"]):visited,
:where(.btn, [role="button"]):hover,
:where(.btn, [role="button"]):focus-visible {
  color: var(--btn-color);
}

.btn > span {
  display: inline-block;
  position: relative;
  transition: 0.2s;
}

.btn > span::after {
  content: var(--btn-icon) / "";
  position: absolute;
  inset-inline-end: -1rem;
  opacity: 0;
  transition: 0.2s;
}

.btn:hover > span,
.btn:focus-visible > span {
  padding-inline-end: var(--space-m);
}

.btn:hover > span::after,
.btn:focus-visible > span::after {
  opacity: 1;
  inset-inline-end: 0;
}

/* Variants */
.btn-alt {
  --btn-bg: var(--color-secondary);
  --btn-color: var(--color-text);
}

.btn-ghost {
  --btn-bg: var(--color-transparent);
  --btn-color: var(--color-text-revert);
  --btn-border: var(--color-text-revert);
 --shadow-hard: var(--shadow-subtle);
}

/* Icon directions */
.go-out {
  --btn-icon: "⯈";
}

.go-to-top {
  --btn-icon: "⯅";
}

}
    @layer components {
  .pro-logos {
    display: flex;   
    gap: var(--space-m);
    align-items: center;   
  }

  .contact-icon {
    position: relative;
     align-self: center; 
    flex-shrink: 0;   
    display: inline-block;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    margin-inline-end: var(--space-2xs);
    background: var(--color-secondary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .contact li {
    margin-inline: 0;
    padding-inline-start: 0;
  }

  .contact li::marker {
    content: none;
  }

  .contact main li {
    position: relative;
    inset-inline-start: -1.2rem;
    list-style-type: none;
  }

  .home .contact li a {
    color: var(--color-text-inverse);
  }

  .telephone-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2H18C18.5523 2 19 2.44772 19 3V21C19 21.5523 18.5523 22 18 22H6C5.44772 22 5 21.5523 5 21V0H7V2ZM7 9H17V4H7V9ZM7 11V20H17V11H7Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .email-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .website-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .home-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19.9997C21 20.552 20.5523 20.9997 20 20.9997H4C3.44772 20.9997 3 20.552 3 19.9997V9.48882C3 9.18023 3.14247 8.88893 3.38606 8.69947L11.3861 2.47725C11.7472 2.19639 12.2528 2.19639 12.6139 2.47725L20.6139 8.69947C20.8575 8.88893 21 9.18023 21 9.48882V19.9997ZM19 18.9997V9.97791L12 4.53346L5 9.97791V18.9997H19Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .map-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 23.7279L5.63604 17.364C2.12132 13.8492 2.12132 8.15076 5.63604 4.63604C9.15076 1.12132 14.8492 1.12132 18.364 4.63604C21.8787 8.15076 21.8787 13.8492 18.364 17.364L12 23.7279ZM16.9497 15.9497C19.6834 13.2161 19.6834 8.78392 16.9497 6.05025C14.2161 3.31658 9.78392 3.31658 7.05025 6.05025C4.31658 8.78392 4.31658 13.2161 7.05025 15.9497L12 20.8995L16.9497 15.9497ZM12 13C10.8954 13 10 12.1046 10 11C10 9.89543 10.8954 9 12 9C13.1046 9 14 9.89543 14 11C14 12.1046 13.1046 13 12 13Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .eat-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.2683 12.1466L13.4147 13.0002L20.4858 20.0712L19.0716 21.4854L12.0005 14.4144L4.92946 21.4854L3.51525 20.0712L12.854 10.7324C12.2664 9.27549 12.8738 7.17715 14.4754 5.57554C16.428 3.62292 19.119 3.14805 20.4858 4.51488C21.8526 5.88172 21.3778 8.57267 19.4251 10.5253C17.8235 12.1269 15.7252 12.7343 14.2683 12.1466ZM4.22235 3.80777L10.9399 10.5253L8.11144 13.3537L4.22235 9.46463C2.66026 7.90253 2.66026 5.36987 4.22235 3.80777ZM18.0109 9.11107C19.2682 7.85386 19.5274 6.38488 19.0716 5.92909C18.6158 5.47331 17.1468 5.73254 15.8896 6.98975C14.6324 8.24697 14.3732 9.71595 14.829 10.1717C15.2847 10.6275 16.7537 10.3683 18.0109 9.11107Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .stay-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 11V20H20V17H4V20H2V4H4V14H12V7H18C20.2091 7 22 8.79086 22 11ZM20 14V11C20 9.89543 19.1046 9 18 9H14V14H20ZM8 11C8.55228 11 9 10.5523 9 10C9 9.44772 8.55228 9 8 9C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11ZM8 13C6.34315 13 5 11.6569 5 10C5 8.34315 6.34315 7 8 7C9.65685 7 11 8.34315 11 10C11 11.6569 9.65685 13 8 13Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
  }
}
    
.theme-icon {
    inline-size:20px;
    block-size: 20px;
    transition: 0.3s;
}

.toggle {    
    inset-inline-end: 0;
    inset-block-start: 0;
    background: none;
    color: inherit;
    border: none;
    padding: var(--space-s);
    position: absolute;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.theme-icon:hover {
  transform: scale(1.2);
}

.hide-dark-img {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-icon:active {
    transform: rotate(-22deg);
  }
}
    @layer components {  
  [popover] {
  inline-size: 60%;
  block-size: 60%;
  /* inset: auto; */
  /* margin: var(--space-m); */
  
  padding: 0;
}

/* Style the open state */
[popover]:popover-open {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid
 color-mix(in srgb, var(--color-brand), transparent 80%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}

[popover]:popover-open::backdrop {
  background-color:color-mix(in srgb, var(--color-brand), transparent 20%);
  backdrop-filter: blur(2px); 
}

[popover] {
  /* Animate these properties */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
}

/* Set target styles when open */
[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* Define starting style for the entrance animation */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(10px);
  }
}


/* 1. Hide the popover content on old browsers */
@supports not selector(:popover-open) {
  [popover] {
    display: none;
  }
}

/* 2. Hide the trigger button on old browsers so users don't click a dead link */
@supports not selector(:popover-open) {
  button[popovertarget] {
    display: none;
  }
}

}
    @layer components {  
 

.faq-list details {
   border-block-end: 1px solid color-mix(in srgb, var(--color-brand), transparent 80%);
}

.faq-list details:last-child {
  border-block-end: 0;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-block: var(--space-s);
  padding-inline: var(--space-2xs) var(--space-m);
  font-size: var(--step-0);
  font-family: "DM Serif Display", var(--font-serif); 
  text-transform: capitalize; 
}

.faq-list summary:hover {
background-color: var(--color-surface);
}

.faq .faq-list summary:hover {
background-color: var(--color-brand);
color: var(--color-text-inverse);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  translate: 0 -50%;  
}

.faq-list summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.75rem;
  inset-block-start: 50%;
  inline-size: 1rem;
  block-size: 1rem;
  translate: 0 -50%;
  background:
    linear-gradient(var(--color-text-revert), var(--color-text-revert)) center / 100% 2px no-repeat,
    linear-gradient(var(--color-text-revert), var(--color-text-revert)) center / 2px 100% no-repeat;
  transition:
    rotate 220ms ease,
    opacity 180ms ease,
    background-color 180ms ease;
}

.faq-list details[open] summary {
  background: var(--color-surface);
}

.faq-list details[open] summary::after {
  background:
    linear-gradient(var(--color-brand), var(--color-brand)) center / 100% 2px no-repeat;
}

.faq-panel {
  padding-block: 0 1.25rem;
  padding-inline: 1.25rem;
  color: hsla(0, 0%, 12%, 0.82);
  font-size: var(--step--1);
}

@media (prefers-reduced-motion: no-preference) {
  .faq-list details {
    interpolate-size: allow-keywords;
  }

  .faq-list details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 260ms ease,
      opacity 220ms ease,
      content-visibility 260ms allow-discrete;
  }

  .faq-list details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* FAQ details animation + progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
  .faq-list details {
    interpolate-size: allow-keywords;
  }

  .faq-list details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 260ms ease,
      opacity 220ms ease,
      content-visibility 260ms allow-discrete;
  }

  .faq-list details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  .faq-list summary::after {
    transition:
      rotate 220ms ease,
      background-color 180ms ease,
      color 180ms ease;
  }

  .faq-list details[open] summary::after {
    rotate: 180deg;
  }
}
}
    @layer components {

    footer ul{   
    margin-block-start: 0;    
}

  footer{
    margin-block-start: var(--space-l);
    padding: var(--space-l);
    padding-block-end: var(--space-3xs);
    border-radius: var(--radius);   
  }

  @media (width > 60rem){
  footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-l); 
  }
}

 
  footer li {
    list-style-type: none;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}
  

  .foot-note {
    display: grid;
    grid-column: 1 / 5;
    justify-items: center;
  }
}
    @layer components {

  .form-wrapper {
    display: grid;
    justify-self: start;
    inline-size: min(60rem, 100% - 1rem);   
  }
 

  label {
    font-weight: bold;
    line-height: 0;
    font-size: var(--step--1);
    
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    display: inline-block;
    inline-size: 100%;
    margin-block:var(--space-2xs);
    padding: var(--space-xs);
    border: 0.15rem solid var(--color-accent);
    border-radius: var(--radius);
    font-family: "Karla", var(--font-sans);
  }

  textarea {
    block-size: var(--space-s);   
  }

  input[type="submit"]:hover {
    background-color: var(--color-accent);
  }

  textarea::placeholder,
  input::placeholder {
    font-size: var(--step-0);
  }

   form button{
    margin: 0;
   }

}
    @layer components {

    .getting-ad {
        display: grid;
        justify-items: center;
        padding: 0rem 2rem;     
    }

     .getting-ad >*{       
        place-items: center;               
    }

    @media (width > 60rem) {
        div.getting-ad {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: end;
        }
          .getting-ad >*{       
        place-items: unset;               
    }
    }


    @media (width < 60rem) {
        .getting-ad img {
            display: none;
        }
    }


    .getting-ad  img {
        width: clamp(5rem, 40vw, 100%);
        margin: 0 auto;
    }

}
    @layer components {

  header {
    display: grid;   
    place-content: center;   
    border-radius: var(--radius);
    padding: var(--space-s) 0 0; 
      }


  .logo {
    inline-size: 240px;
    display: block;
    padding-block: var(--space-s);
    justify-self: center;
  }

 

  .logo:hover {
    filter: brightness(.8) contrast(2);
  }

  [data-theme="dark"] {
    .logo {
      filter: invert(1) brightness(100);
    }
  }

  @media (width > 60rem) {
    header {      
      grid-template-columns: repeat(2, 1fr);
      justify-content: space-around;
      align-items: center;
    }

    .logo {
      justify-self: start;
    }
  }
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
}

.skip:focus {
  inset-inline-start: 50%;
  translate: -50% 0;
}
    @layer components {
  
  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    list-style-type: none;
    padding: 0;  
    margin: 0; 
  }

  nav li{
    padding-inline-start: 0;
    margin-inline-start: var(--space-2xs);
  }

  nav a{
    text-transform: uppercase;
    font-size: var(--step--1);
    position: relative;
  }

  nav a:hover:not(.open-menu) {
   color: var(--color-accent);
}

 .link-effect a:hover::after {
    transform: scale(1, 1);
}

.link-effect a::after {
        position:absolute;
        inset-block-end: 6px;       
        content: '';
        inline-size: 80%;
        inset-inline-start: 18%;
        block-size: 4px;
        border-radius: 999px;
        background-color: var(--color-accent);
        transform: scale(0,1);
        transform-origin: center top;
        transition-duration: 0.3s
    }


  .hamburger  {
    fill: var(--color-text);
    block-size: var(--step-1);  
}

 
  @media (width > 60rem) {
  nav ul{
    justify-content: flex-end;
  }
}

  nav a {
    margin-inline-start: var(--space-xs);
    text-decoration: none;
  }
}
    @layer components {
  @media (prefers-reduced-motion: no-preference) {
    dialog[open] {
      animation: show 0.3s ease normal;
    }

    @keyframes show {
      from {
        transform: translateY(-8%);
      }

      to {
        transform: translateY(0);
      }
    }
  }

  .open-menu,
  .close-menu {
    border: 0;
    cursor: pointer;
    padding: 0;
  }

  .open-menu {
    display: grid;
    position: relative;
    place-items: center;   
  }

  .open-menu:hover {
    background-color: var(--color-surface-border);
  }

  @media (width > 60rem) {

    .open-menu {
      margin-inline-start: var(--space-m);
    }
  }

  .open-menu span {
    font-size: var(--step--2);
    line-height: 1.6;
  }

  .close-menu {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    inline-size: 2rem;
    block-size: 2rem;
    color: #fff;
    background-color: red;
    text-align: center;
  }

  button.close-menu:hover {
    background-color: green;
  }

  .menu-modal {
    inline-size: 90%;
    max-inline-size: 1920px;
    z-index: 10;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--radius);
    background-color: var(--color-surface-border);
  }

  .menu-modal.open {
    display: block;
  }

  .menu-box {
    display: grid;   
    grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
    list-style: none;
    padding: var(--space-l);
    background-color: var(--color-bg);
  }

  .menu-box .menu-column {
    padding-inline: var(--space-2xs);
  }

  .menu-box ul {
    padding-inline-start: var(--space-2xs);
  }


  .menu-box li a {
    color: var(--color-text);
    text-decoration: none;
  }

  .menu-box li a:hover {
    color: var(--color-accent);
  }

  .menu-box li::marker {
    color: var(--color-secondary);
  }

   .menu-box img {
    border-radius: var(--radius);
   }
  .menu-box .menu-title {
    display: block;
    margin-block-end: 1rem;
    background-color: var(--color-surface-border);
    color: var(--color-text);
    font-weight: 900;
    text-align: center;
    border-radius:var(--radius) ;
  }

  .menu-text {
    margin-block-start: 1.6rem;
    color: var(--color-text);
  }
}

.menu-box li::marker {
  content: "➤ " /"";
  color: var(--color-secondary);
}
    @layer pages {

.home main p{
    max-inline-size: 60ch;
}


.home .highlight h2::after {
background-color: color-mix(in srgb, var(--color-surface), transparent 30%);
}



.home .highlight{
    padding-block-end:0 ;
}

@media (width < 60rem){

.home .getting-couples img{
    display: none;
}
}

.our-story picture {
   justify-self: end;
   align-self: end;
   
}

@media(width < 60rem){
.our-story aside{
padding-block-end: var(--space-2xs); 
}
.our-story picture {
   display: none;  
}
}

}
    @layer pages {

.about .max-col-grid {
display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
   gap: var(--space-s);
}


.about .max-col-grid article {
/* background-color:rgb(241, 241, 231); */
    display: grid;
    grid-template-rows: subgrid;
    grid-row: auto / span 3;    
    justify-items: center;   
}

.about .max-col-grid p {
font-size: var(--step--1);
line-height: 1.6;
 color: var(--color-text-revert); 
}

.about .max-col-grid h3 {
text-align: center;
font-size: var(--step-1);
 color: var(--color-text-revert); 
}

.about .max-col-grid .btn {
margin-block: 0;
}

.about .cols  {
font-size: var(--step--1);
}

#we-help-with {
display: block;
justify-self: center;
 margin-block: var(--space-3xl) var(--space-xl); 
 font-size: var(--step-4);
 max-inline-size:30rem;
}
}
    @layer pages {

  .contact-page {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contact-block {
    margin-block: var(--space-s);
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    padding: var(--space-m);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }

  .contact-block h2 {
    font-size: var(--step-2);
    text-align: center;
    margin-block-end: var(--space-m);
  }

  .contact-block ul {
    padding-block-start: var(--space-m);
    inline-size: min(22rem, 100%);
    margin: 0 auto;
    justify-content: center;
  }

  .contact-block li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
  }

  .contact-block li::marker {
    content: unset;
  }

  .contact-block a {
    color: var(--color-text-inverse);
    padding-block: var(--space-2xs);
    line-height: 1;
  }


  @media (width > 60rem) {
    .contact-page {
      grid-template-columns: 2fr 1fr;
      justify-items: start;
      gap: var(--space-2xl);
    }

    .contact-block {
      margin-block: var(--space-3xl);
    }
     .contact-page .form-wrapper {
    display: block;
    inline-size: 50vw;
  }
  }

 

}
    @layer pages {

    .now-online {
    font-size: var(--step--2);   
    text-transform: uppercase;    
    padding-inline: var(--space-s);
    border-radius: 999px;
    inline-size: max-content;
    border: .2em solid var(--color-punch);    
  }

  /*  */
 .getting blockquote {
    padding: var(--space-2xs) var(--space-s);    
    margin-block: var(--space-s);
    border-left: .2em solid;
    border-color: transparent;
    max-width: 65ch;
}

@media ( width > 60rem){
  .imago-quote {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-2xs);  
     
  }
  .imago-quote blockquote{   
    block-size: 14rem;
          
  }
  .imago-quote figure{   
    margin: var(--space-s);   
    place-items: center;    
  }
  }

 .getting figcaption {
    font-size: 1rem;
    margin: .5rem 0;
}

.getting img{
  border-radius: var(--radius);
}

.getting .enrol{
  justify-items: center;


}

.getting .enrol h2{
 display: block; 

}


.getting-testimonials{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));   
   gap: var(--space-xs);
}

.getting-testimonials blockquote{
  align-content: center;
  padding: var(--space-s);   
}

}
    @layer pages {

  /* Team Archive */

  .team {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    margin-block-end: var(--space-l);
  }

  .team-page h1 {
    text-align: center;
    margin-block-end: var(--space-l);
  }

  .team IMG {
    filter: grayscale(100%);
  }

  .team h2 {
    font-size: var(--step-1);
    text-align: center;
  }

  .team-page article:has(img:hover, h2 a:hover) {
    background-color: var(--color-brand);
    color: var(--color-secondary);
    transform: translateY(-4px);
    transition: all 0.4s ease-in-out;
  }
 
  .team-page article:has(img:hover, h2 a:hover) ul,
  .team-page article:has(img:hover, h2 a:hover) li::marker {
    color: var(--color-text-inverse);   
  }

   .team-page article:has(img:hover, h2 a:hover) h2 a  {
    color: var(--color-secondary);
    text-decoration: none;
  }

  .team-page article:has(img:hover, h2 a:hover) img {
    filter: grayscale(0%);
    transition: all 0.4s ease-in-out;
  }

  .team ul {
    display: grid;
    justify-self: center;
    max-inline-size: 18ch;
    margin: 0 auto;
  }

  .team li {
    font-size: var(--step--1);
    line-height: 1.2;
    padding-inline-start: var(--space-2xs);
  }

  .team li::marker {
    content: "☑ " /"";
  }
}

.team a img,
.team-bio img {
  border-radius: var(--radius);
}

::view-transition-group(* member) {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* team member pages */
.team-member-hero {
  place-items: center;
  display: grid;
  gap: var(--space-l);
  font-size: var(--step-0);
  justify-items: center;
  position: relative;
  animation: softFade 0.2s ease-in-out;
}

@media (width > 60rem) {
  .team-member-hero {
    grid-template-columns: 1fr 1fr;
  }
}

.team-member-hero h1 {
  color: var(--color-secondary);
}

.team-member-img {
  border: var(--space-2xs) solid var(--color-text-inverse);
}

.team-member-hero em {
  background-color: color-mix(in srgb, var(--color-surface), transparent 20%);
  padding: var(--space-2xs);
  color: var(--color-text-revert);
  border-radius: var(--radius);
  font-family: "DM-serif-display", var(--font-serif);
  display: inline-block;
}


/* Standard page load animation fallback */
@keyframes softFade {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.close>a {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  color: #fff;
  background-color: red;
  padding: 0;
  border-radius: 2px;
}

.close>a:hover {
  background-color: green;
}

.close svg {
  inline-size: 2rem;
  block-size: 2rem;
}
    @layer pages {

  /*  articles */  

  .single main article {
    margin-block-end: var(--space-xl);
  }

  /* author bio */
  .author-bio {
    padding-block-end: var(--space-s);
  }
}

.author-photo {
  border-radius: var(--radius-round);
  border: var(--space-2xs) solid var(--color-text-inverse);
  inline-size: min(30vw, 160px)
}

.author-bio h2 {
  color: var(--color-secondary);
  font-size: var(--step-2);
  justify-self: center;
}

.author-bio .pro-logos {
  inline-size: min(50vw, 160px);
  block-size: auto;

  & a {
    padding: 0;
  }
}

.author-wrapper {
  display: grid;
  place-items: center;
}

@media (width > 60rem) {
  .author-wrapper {
    display: grid;
    gap: var(--space-2xs);
    grid-template:
      "author-pix author-blurb"
      "author-creds author-creds"
      /
      1fr 2.5fr
    ;
  }

  .author-photo-wrapper {
    grid-area: author-pix;
  }

  .author-blurb {
    grid-area: author-blurb;
  }

  .author-creds {
    grid-area: author-creds;
  }

  .author-bio h2 {
    justify-self: unset;
  }

  .author-bio .pro-logos {
    justify-self: end;
  }

  /* post pagination */

  .pagination li {
    display: inline-block;   
  }

  .pagination a {
  font-size: var(--step--1);  
  }

  .links-nextprev {   
    display: flex;
    justify-content: space-between;
    gap: .5rem 1em;
    list-style: "";  
  }

  .links-nextprev li {
    font-size: var(--step--1);
  }

  .links-nextprev-prev {
    display: flex;
    flex-wrap: wrap;
    justify-self: start;
  }

  .links-nextprev-next {
    display: flex;
    justify-content: end;
  }

  .next-post {
    float: right;
  }


  @media (width < 60rem) {
    .links-nextprev {
      display: unset;
      justify-content: center;
    }

    .links-nextprev-prev {
      margin: 0;
    }

    .links-nextprev-next {
      justify-content: start;
      margin: 0;
    }

    .next-post {
      float: none;
    }
  }

}
    @layer pages {

.courses-page main img{

  margin-block-start: var(--space-s);
}

.courses-page .imago-img{
  max-inline-size: 600px;
 
}

.courses-page main section{
 padding: var(--space-xl);
 justify-items: center;
  }

  .courses-page main h2, .courses-page main h1{
    text-align: center;
     } 
     
  .courses-page main  h2{
      margin-block-end: var(--space-m);
     }

}
    @layer pages {

   .on-offline {
    justify-items: center;
    margin-block: var(--space-l);
  }

  #value .ram-grid article,
  #what-you-learn .ram-grid article,
  #why-imago .ram-grid article {
    background-color: var(--color-surface);
    color: var(--color-text-revert);
    border-radius: var(--radius);
    padding: var(--space-s);
    justify-items: center;
  }

  #what-you-learn .ram-grid article li::marker,
  #why-imago .ram-grid article li::marker,
  #pathway li::marker,
  #requirements li::marker
   {
    content: unset;
    color: var(--color-brand);
  } 

  #what-you-learn,
  #inclusion,
  #requirements {
    font-size: var(--step--1);    
  }

  .section-intro {
    margin-block-end: var(--space-m);
  }

  .stage-meta {
    font-weight: 700;
  }

  .imago-training img {
    border-radius: unset;
  }

/* Trainers section */
 
 .trainers {
    display: grid;
    justify-items: center;
  }
  @media (width > 60rem) {
    .trainers {
      display: grid;
      column-gap: var(--space-l);
      row-gap: var(--space-xl);
      grid-template:
        "th th th"
        "ti tp tj" 1fr "imago ts ukcp"
        / .8fr 2fr .8fr;
    }

    .trainer-head {
      grid-area: th;
      justify-items: center;
    }

    .trainer-pix {
      grid-area: tp;
      justify-items: center;

    }

    .trainer-ian {
      grid-area: ti;
    }

    .trainer-joanna {
      grid-area: tj;
    }

    .trainer-small {
      grid-area: ts;
    }


    .trainer-imago-logo {
      grid-area: imago;
      justify-self: start;
    }

    .trainer-ukcp-logo {
      grid-area: ukcp;
      justify-self: end;
    }

    .trainer-small {
      font-size: var(--step--2);
      line-height: 1.4;
      place-self: center;
      max-inline-size: 52ch;
    }

    .trainer-ukcp-logo {
      inline-size: 60%;
    }

    .trainer-imago-logo {
      inline-size: 50%;
    }

     .trainers-cta p {
    inline-size: 50ch;
  }
  }
  /* end of media query */

   .trainer-ukcp-logo {
    inline-size: 120px;
  }

  .trainer-imago-logo {
    inline-size: 120px;
  }
  .trainers p {
    font-size: var(--step--1);
  }

  .trainers-cta {
    display: grid;
    justify-items: center;
  }

 
/*  highlight the what is Imago FAQ */
  details:has(#imago:target) summary {
    background-color: var(--color-punch);
    color: white;
  }

  #imago {
    scroll-margin-top: 7rem;
  }

  /* Styles for all imago training pages */

  .imago-hero-img {
    display: grid;
    align-items: center;
    justify-self: center;
  }

  .lede {
    font-weight: 500;
    max-width: 65ch;
   text-wrap: pretty;
  }


  .pathway-icons {
    inline-size: 120px;
  }

  #pathway article {
    display: grid;
    justify-items: center;
    grid-template-rows: subgrid;
    grid-row: auto / span 6;
    row-gap: 0;
  }

  #pathway .ram-grid {
    row-gap: 0;
  }  

   @media (width > 60rem){
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-s);  
    margin-block-end: var(--space-xl); 
    }
  }
  
  .hero-actions {     
    margin-block-end: var(--space-xl); 
  }
   
  .hero-actions .btn {
    margin: var(--space-2xs);
    inline-size: fit-content;    
  }

  .imago-training-nav {
    justify-self: start;
    margin-block-end: var(--space-s);

    & li::marker {
      content: none
    }

    & ul {
      justify-content: start;
    }

    & li {
      margin-inline-start: 0;
      margin-inline-end: var(--space-s);
    }

    & a {
      margin-inline-start: 0;
      text-align: start;
      color:var(--color-text-revert);
    }

    .current-page {
      background-color: var(--color-secondary);
      color: var(--color-text-inverse);
      padding-inline: var(--space-s);     
      border-radius: 999px;
    }
  }

  .stage-label {
    border-radius: 999px;
    padding-inline: .8rem;
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: var(--step--2);
    text-transform: uppercase;
    inline-size: fit-content;
  }

  .imago-training .ram-grid article {
    justify-items: center;
  }

  /*
 * View transition - Only pages using this body class opt in.
 * Do not put this rule globally if other pages should not transition.
 */
body.imago-training {
  view-transition-name: none;
}

@view-transition {
  navigation: auto;
}

/* Give the hero its own named transition. */
body.imago-training .it-hero {
  view-transition-name: imago-training-hero;
}

/* Hero entering the destination page from the right. */
::view-transition-new(imago-training-hero) {
  animation: imago-hero-in 500ms cubic-bezier(.2, .8, .2, 1) both;
}

/* Optional: hero leaving the current page. */
::view-transition-old(imago-training-hero) {
  animation: imago-hero-out 300ms ease both;
}

@keyframes imago-hero-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes imago-hero-out {
  to {
    transform: translateX(-2rem);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(imago-training-hero),
  ::view-transition-old(imago-training-hero) {
    animation-duration: 1ms;
  }
}

  
}
    @layer overrides {

}