/* ---------------------------------------------------------------------------
   Local overrides — changes made after the site was captured from Squarespace.
   Loaded last, so anything here wins over site.css and custom.css.
   Nothing in this file came from the live site; delete a rule to revert to the
   original Squarespace styling.
   --------------------------------------------------------------------------- */

/* Medium-height sections run the full viewport height.
   Squarespace's site.css sets this to 66vh. */
.page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
  min-height: 100vh;
}



/* ---------------------------------------------------------------------------
   Schedule of areas — replaces the screenshot that used to sit in this block.
   --------------------------------------------------------------------------- */

.wig-areas-wrap {
  width: 100%;
  overflow-x: auto;              /* never forces the page to scroll sideways */
  -webkit-overflow-scrolling: touch;
}

table.wig-areas {
  width: 100%;
  border-collapse: collapse;
  /* match the site's body copy — --body-font-font-family resolves to Albert Sans,
     but custom.css sets paragraphs in avenir-lt-pro */
  font-family: "avenir-lt-pro", sans-serif;
  font-weight: 400;
  color: #3f4d3c;                                  /* content */
  /* Tracks the site's own paragraph scale exactly: 14.92px at 390px wide,
     14.272px at 1440px — so the table never reads as a different size to the
     body copy around it. */
  font-size: calc(15.16px - 0.0617vw);
  line-height: 1.3;
  text-align: left;
}

.wig-areas__caption {
  /* the section already carries a visible heading, so this is for screen readers */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wig-areas__col--floor { width: 46%; }
.wig-areas__col--num   { width: 27%; }

.wig-areas th,
.wig-areas td {
  text-align: left;
  font-weight: 400;
  padding: 0.5em 0.5em 0.5em 0;
  border-bottom: 1px solid #8d9389;                /* lines between */
}

/* keep the longest labels clear of the sq ft column */
.wig-areas tbody th[scope="row"] { padding-right: 1em; }

.wig-areas thead th {
  color: #d09d5b;                                  /* header */
  font-weight: 700;
  padding-top: 0;
  border-bottom: 2px solid #3f4d3c;                /* first line */
}

/* Sub total and Total rows: bold, closed with the dark rule */
.wig-areas__total th,
.wig-areas__total td {
  font-weight: 700;
  border-bottom: 2px solid #3f4d3c;
}

/* last line */
.wig-areas tbody tr:last-child th,
.wig-areas tbody tr:last-child td {
  border-bottom: 2px solid #3f4d3c;
}

@media screen and (max-width: 640px) {
  .wig-areas th,
  .wig-areas td { padding: 0.4em 0.35em 0.4em 0; }
  .wig-areas tbody th[scope="row"] { padding-right: 0.75em; }
  .wig-areas__col--floor { width: 50%; }
  .wig-areas__col--num   { width: 25%; }
}


/* ---------------------------------------------------------------------------
   "The highlights" — rebuilt as a real responsive grid.

   Previously 24 separately positioned fluid-engine blocks (an icon and a label
   each with its own hand-set grid-area). Because those blocks had fixed heights
   that didn't track their content, labels overlapped their icons at several
   widths and first lines never shared a baseline. This is one grid: a fixed
   icon box then the label, so every label in a row starts level by construction
   at any width.

   The wrapper keeps the same grid-area the 24 blocks collectively occupied, so
   the rest of the section is unaffected.
   --------------------------------------------------------------------------- */

.fe-block-wig-highlights { grid-area: 7/2/21/26; z-index: 20; }
@media (max-width: 767px) {
  .fe-block-wig-highlights { grid-area: 4/2/33/10; }
}

.wig-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: clamp(12px, 2.2vw, 40px);
  row-gap: clamp(30px, 4vw, 64px);
  align-items: start;      /* tiles hang from a shared top edge */
  align-content: center;   /* the pair of rows sits centred in the section */
  justify-items: center;
}

@media (max-width: 1023px) {
  .wig-highlights { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .wig-highlights { grid-template-columns: repeat(2, 1fr); }
}

.wig-highlight {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Fixed-height box: matches the original 139px desktop / 94px mobile icons and
   guarantees every label starts at the same height across a row. */
.wig-highlight__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(94px, 9.65vw, 139px);
  margin-bottom: clamp(10px, 1.4vw, 22px);
}

.wig-highlight__icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wig-highlight__label {
  margin: 0;
  color: #fff;
  font-family: "avenir-lt-pro", sans-serif;
  font-weight: 400;
  font-size: calc(15.16px - 0.0617vw);   /* the site's own paragraph scale */
  line-height: 1.4;
  text-align: center;
}