main {
    container: main / inline-size;
  }

  .grid-auto-fit {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));

    container: grid-auto-fit / inline-size;
  }

  /* ---------- Subgrid: cards in a row share header / body / footer lines ----------
     Only once there are two or more columns – on phones each card keeps its own rows. */
  @container grid-auto-fit (inline-size > calc(30ch * 2 + 1rem)) {
    .card {
      grid-row: span 3;                       /* header, body, footer */
      grid-template-rows: subgrid;
    }
  }

  .card:has(> img) {
    border: 2px solid var(--clr-blue);
    grid-template-rows: auto auto 1fr auto;     /* image on top: image, header, body, footer */

    > .card-header { margin-block-start: 0; }  /* the image sits above it */

    @container grid-auto-fit (inline-size > calc(30ch * 2 + 1rem)) {
      grid-column: span 2;

      display: grid;
      grid-template-columns: subgrid;
      grid-row: span 3;
      grid-template-rows: subgrid;              /* image beside: shares the row lines */
      column-gap: 0;

      > .card-header { margin-block-start: 1rem; }

      > img {
        grid-column: 2;
        grid-row: 1 / 4;
        contain: size;                          /* the text sets the height, the photo fills it */
      }
    }

    @container grid-auto-fit (inline-size > calc(30ch * 4 + 3rem)) {
      grid-column: span 2;
      grid-row: span 6;                         /* two rows of cards tall */
      grid-template-rows: 1fr auto auto auto;   /* image on top takes whatever height is left */

      > .card-header { margin-block-start: 0; }

      > :not(img) {
        grid-column: 1 / -1;
      }

      > img {
        grid-column: 1 / -1;
        grid-row: 1;
        min-block-size: 12rem;
      }
    }
  }

  @layer general-styling {
    html {
      color-scheme: light;
      font-family: 'open sans', system-ui;
      line-height: 1.6;
      color: var(--clr-text);
      background-color: var(--clr-page);
    }

    body {
      font-size: 1.25rem;
      margin: 0;
    }

    img {
      max-width: 100%;
      display: block;
    }

    h1,
    h2,
    h3 {
      font-family: "Playfair Display", serif;
      font-optical-sizing: auto;
      /*     font-style: italic; */
      text-transform: uppercase;
      font-weight: 400;
      color: var(--clr-indigo);
    }

    h1 {
      font-size: 4rem;
      /*     font-size: round(up, clamp(2rem, 5cqi + .5rem, 5rem), 2rem); */
      line-height: 1.1;
    }

    /* Fluid headings: scale with the content area (cqi = 1% of the container's width),
       never smaller than the first value or larger than the last */
    h2 {
      font-size: clamp(1.75rem, 1.25rem + 3cqi, 2.5rem);
    }

    h3 {
      font-size: clamp(1.25rem, 1rem + 1cqi, 1.5rem);
    }

    a:not([class]) {
      justify-self: start;
      color: var(--clr-indigo);
      /*     text-decoration: none; */
      text-underline-offset: 4px;

      transition: background-size 325ms ease, text-decoration 325ms;

      &:hover,
      &:focus-visible {
        text-decoration-color: var(--clr-blue);
        background-size: 100% 1px;
      }
    }

    section {
      padding-block: clamp(2rem, 5vb, 6rem);
    }

    .btn {
      display: inline flex;
      padding: 1rem 2rem;
      text-decoration: none;
      cursor: pointer;
      background-color: var(--clr-button);
      color: var(--clr-indigo);   /* dark text: white on #7fb4b7 is too faint to read */

      &:hover,
      &:focus-visible {
        background-color: var(--clr-button-hover);
      }
    }
  }

  @layer card-styling-not-specific {
    .card {
      --icon-size: 48px;

      display: grid;
      grid-template-rows: auto 1fr auto;       /* header, body (takes spare height), footer */
      row-gap: 1rem;                           /* all spacing inside a card comes from here */
      background: var(--clr-surface);
      border: 1px solid var(--clr-border);
      overflow: hidden;
      border-radius: 0.25rem;

      h2,
      h3 {
        color: var(--clr-indigo);
      }

      > img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }

      > :not(img) {
        margin: 0 1rem;
      }

      > .card-header { margin-block-start: 1rem; }
      > .card-footer { margin-block-end: 1rem; }
    }

    /* Header: optional icon + title, same height with or without an icon */
    .card-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-block-size: var(--icon-size);
      align-self: start;                       /* single-line titles stay level with two-line ones */

      h3 { margin: 0; }
    }

    .card-icon {
      flex: none;                              /* never squashed by a long title */
      inline-size: var(--icon-size);
      block-size: var(--icon-size);
      background-color: var(--clr-indigo);     /* icon colour for every card */
      -webkit-mask: var(--icon) center / contain no-repeat;
      mask: var(--icon) center / contain no-repeat;
    }

    .card-body {
      display: grid;
      gap: 0.75rem;

      > * { margin: 0; }
    }
  }

  @layer theme {
    :root {
      /* i-labeling brand colours */
      --clr-blue:   #019fe3;
      --clr-green:  #95c21f;
      --clr-indigo: #2b2e83;
      --clr-button: #7fb4b7;
      --clr-button-hover: #6aa3a6;
      --clr-text:   rgb(68, 68, 68);

      /* Neutrals */
      --clr-page:    #ffffff;
      --clr-surface: #f5f7fa;
      --clr-border:  #e3e6ee;
    }
  }

  @layer layout {
    .primary-layout {
      display: grid;
      grid-template-columns:
        [full-width] minmax(2rem, 1fr) [content-start] min(1600px, 100% - 4rem)
        [content-end] minmax(2rem, 1fr);

      & > * {
        grid-column: 2 / -2;
      }
    }
  }

  @layer components {
    /* ---------- How we work ---------- */
    .how-we-work .section-intro {
      max-width: 50ch;
      margin-block: 0 2.5rem;
    }

    .steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 1.5rem;
      counter-reset: step;
    }

    @container main (inline-size > 60rem) {
      .steps {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .step {
      --accent: var(--clr-blue);

      counter-increment: step;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 2.5rem 2rem 2rem;
      background: var(--clr-page);
      border: 1px solid var(--clr-border);
      border-block-start: 4px solid var(--accent);
      border-radius: 0.5rem;
      box-shadow: 0 10px 30px rgb(0 0 0 / 0.05);

      /* Large watermark number, top right */
      &::before {
        content: counter(step);
        position: absolute;
        inset-block-start: -0.1em;
        inset-inline-end: 0.15em;
        z-index: -1;
        font-size: 8rem;
        font-weight: 900;
        line-height: 1;
        color: var(--accent);
        opacity: var(--watermark-opacity, 0.18);
        pointer-events: none;
      }

      h3 {
        margin: 0 0 0.75rem;
      }

      p {
        margin: 0;
        font-size: 1rem;
      }

      /* Keep text clear of the watermark number */
      > * {
        padding-inline-end: 4.5rem;
      }
    }

    .step:nth-child(2) { --accent: var(--clr-green); --watermark-opacity: 0.3; } /* green is lighter, so needs a stronger watermark */
    .step:nth-child(3) { --accent: var(--clr-indigo); }
  }

  @layer components {
    /* ---------- Footer ---------- */
    .site-footer {
      grid-column: 1 / -1;            /* full width background */
      display: grid;
      grid-template-columns: subgrid; /* content lines up with the page */
      margin-block-start: clamp(2rem, 5vb, 4rem);
      padding-block: 2.5rem;
      background: var(--clr-blue);
      border-block-start: 4px solid var(--clr-green);
      color: #fff;
      font-size: 1.25rem;
      font-weight: 700;
    }
 
    .footer-inner {
      grid-column: 2 / -2;
      display: grid;
      gap: 1.5rem 3rem;
      grid-template-columns: 1fr;
    }
 
    @media (min-width: 48rem) {
      .footer-inner {
        grid-template-columns: 1fr auto;
        align-items: start;
      }
      .footer-contact { text-align: end; }
    }
 
    .site-footer p { margin: 0; }
 
    .site-footer .footer-name {
            text-transform: uppercase;
      font-size: 1.5rem;
      margin-block-end: 0.25rem;
    }
 
    .footer-contact {
      font-style: normal;
      display: grid;
      gap: 0.25rem;
    }
 
    .site-footer a {
      color: #fff;
      text-decoration: none;
 
      &:hover,
      &:focus-visible {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
      }
    }
 
    .footer-legal {
      grid-column: 1 / -1;
      padding-block-start: 1.5rem;
      border-block-start: 1px solid rgb(255 255 255 / 0.4);
      font-size: 1rem;
    }
  }