/* ============================================================================
   HOME — Welcome, Divisions, 100th Anniversary, Historical logos
   ============================================================================ */

/* Mobile-only Kaemmerlen logo that fills the dead space to the right of the
   hero title. Hidden by default; shown on mobile via responsive.css. */
.kae-hero__mobile-logo { display: none; }

/* --- Welcome block: 2x2 grid. Left col has photo (row 1) + 100 logo (row 2).
       Right col has testimonial centered vertically with the photo (row 1) and
       the body+CTA group aligned with the 100 logo (row 2).                   --- */
.kae-welcome {
  background: var(--kae-surface-alt);
  display: grid;
  grid-template-columns: minmax(0, 629px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.0625rem);
  row-gap: clamp(1.5rem, 0.75rem + 2.5vw, 3rem);
  padding: 0 var(--kae-pad-x) var(--kae-section-y);       /* photo flush to top of gray section */
}
/* Flatten the semantic wrappers so children become direct grid items. */
.kae-welcome__left,
.kae-welcome__right { display: contents; }

.kae-welcome__photo {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 629 / 400;
}
.kae-welcome__photo img { width: 100%; height: 100%; object-fit: cover; }

.kae-welcome__logo {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;                    /* right-align to photo's right edge */
  align-self: start;
  max-width: min(22.81vw, 438px);
}
.kae-welcome__logo img { width: 100%; height: auto; }

.kae-welcome__testimonial {
  grid-column: 2;
  grid-row: 1;
  align-self: center;                   /* vertically center with Bob's photo */
  font-family: var(--kae-ff-display);
  font-weight: 200;                                       /* Figma: ExtraLight */
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);      /* Figma: 36px */
  line-height: 1.278;                                     /* Figma: 46px / 36px */
  color: var(--kae-black, #000);
  max-width: min(56.3vw, 1081px);
  margin: 0;
}
/* Attribution "– Bob Kaemmerlen" is smaller (30px) per Figma */
.kae-welcome__attribution {
  font-size: clamp(1.25rem, 0.95rem + 0.95vw, 1.875rem);  /* Figma: 30px */
  font-weight: 300;                                       /* Figma: Light for the dash */
}
.kae-welcome__attribution strong { font-weight: 700; }    /* Figma: Bold for the name */

.kae-welcome__body-group {
  grid-column: 2;
  grid-row: 2;
  align-self: start;                    /* starts at same y as 100 logo */
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.25rem + 1vw, 1.25rem);
}
.kae-welcome__body {
  font-family: var(--kae-ff-body);
  font-size: var(--kae-fs-body-lg);
  line-height: 1.545;
  color: var(--kae-black, #000);
  max-width: min(56.3vw, 1081px);
  margin: 0;
}
.kae-welcome__cta {
  font-family: var(--kae-ff-body);
  font-size: var(--kae-fs-body-lg);
  line-height: 1.545;
  margin: 0;
}
/* CTA link — Figma uses Inter Medium Italic navy. We add an underline + arrow
   so visitors can tell it's clickable; arrow animates on hover. */
.kae-welcome__cta a {
  color: var(--kae-navy);
  font-weight: 500;
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.kae-welcome__cta a::after {
  content: " \2192";                                                    /* → arrow */
  display: inline-block;
  font-style: normal;
  margin-left: 0.25em;
  transition: transform 160ms ease;
}
.kae-welcome__cta a:hover           { color: var(--kae-blue); }
.kae-welcome__cta a:hover::after    { transform: translateX(0.25em); }
.kae-welcome__cta a em              { font-style: italic; font-weight: 500; }

/* --- Divisions (3 colored circles with icons) ---
   Figma: title at y=1874, row of circles at y=1954 (essentially flush, ~0-30px
   from title baseline). Top of section to title ≈ 44px. User wants top and
   bottom padding equal — using one clamp value for both. */
.kae-div {
  background: var(--kae-surface);
  padding: clamp(1.5rem, 1rem + 1vw, 2.75rem) var(--kae-pad-x);    /* equal top/bottom */
}
.kae-div__title {
  font-family: var(--kae-ff-display);
  font-weight: 200;
  font-size: var(--kae-fs-page);
  line-height: 1;                                                     /* tight — matches Figma cap-height; no half-leading below */
  color: var(--kae-blue);
  margin-bottom: 0;                                                   /* Figma: row top ~ title bottom (overlap in Figma metadata) */
}
/* Figma: 1920 canvas, side padding 327, column-gap 59, text col 382, circle 157. */
.kae-div__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 3.7rem);  /* 16-59px */
  padding: 0 min(17.03vw, 327px);
}
.kae-div__item   { text-align: center; display: flex; flex-direction: column; align-items: center; }
.kae-home .kae-div__circle,
.kae-div__circle {
  position: relative;
  width: min(8.18vw, 157px);                         /* Figma: 157px */
  height: min(8.18vw, 157px);
  border-radius: 50%;
  margin: 0 auto clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);   /* tight bond between circle and name (8-12px) */
  overflow: hidden;
  display: block;
  /* thicker white ring + soft drop shadow */
  box-shadow:
    0 0 0 10px #ffffff,
    0 14px 28px rgba(15, 35, 47, 0.12);
}
/* Figma colors at exact opacities: gold 59%, blue 50%, lime 42% */
.kae-div__circle--electric { background: rgba(231, 200, 97, 0.59); }
.kae-div__circle--comms    { background: rgba(157, 217, 220, 0.50); }
.kae-div__circle--service  { background: rgba(199, 224, 74, 0.42); }

/* Icons inside circles: per-icon sizing matches Figma exactly.
   Per Figma (157px circle):
     Electric (hard hat) — 135×152 (~86%×97%), positioned ~5px from top
     Comms (cast)        — 105.7×111 (~67%×71%), centered
     Service (pliers)    — 119.33×113.92 (~76%×73%), centered */
.kae-div__circle figure,
.kae-div__circle .wp-block-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.kae-div__circle .wp-block-image img,
.kae-div__circle img {
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  display: block;
}
/* Per-icon dimensions — slightly smaller than Figma so they don't fill the
   circle as aggressively. */
.kae-div__circle--electric img { max-width: 70%; max-height: 80%; }
.kae-div__circle--comms img    { max-width: 55%; max-height: 58%; }
.kae-div__circle--service img  { max-width: 62%; max-height: 60%; }
/* Electric icon — centered in its circle (no special top-anchor). */
.kae-div__circle--electric figure,
.kae-div__circle--electric .wp-block-image {
  align-items: center;
  padding-top: 0;
}
.kae-home .kae-div__name,
.kae-div__name {
  font-family: var(--kae-ff-body);
  font-weight: 300;                                   /* Figma: Inter Light */
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);    /* up to 36px (Figma) */
  line-height: 0.83;                                  /* Figma: 30px / 36px */
  color: var(--kae-black, #000);
  margin-bottom: clamp(1rem, 0.75rem + 0.5vw, 1.5rem); /* clear separation from description (16-24px) */
}
.kae-home .kae-div__desc,
.kae-div__desc {
  font-family: var(--kae-ff-body);
  font-weight: 300;                                   /* Figma: Inter Light */
  font-size: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);   /* up to 24px (Figma) */
  line-height: 1.25;                                  /* Figma: 30px / 24px */
  color: var(--kae-black, #000);
  max-width: min(19.9vw, 382px);                      /* Figma: w-[382px] */
  margin: 0 auto;
}

/* --- 100th Anniversary + Awards sidebar ---
   Figma: gray section starts y=2413, dark blue Awards box at x=1215, y=2413
   (flush with section top) running 705x696 down to y=3109. The body content
   on the left has its own padding; the Awards box reaches edge-to-edge of
   its column. No negative-margin hacks. */
.kae-anniv {
  background: var(--kae-surface-alt);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(36.72vw, 705px));
  gap: 0;                                                                 /* Awards box reaches its column edge */
  padding: 0;                                                              /* container has no padding — children handle it */
}
.kae-anniv__main {
  padding: var(--kae-section-y) clamp(1rem, 0.5rem + 1.5vw, 3rem) clamp(2rem, 1.5rem + 2vw, 3.625rem) var(--kae-pad-x);
}
.kae-anniv__title {
  font-family: var(--kae-ff-display);
  font-weight: 200;
  font-size: var(--kae-fs-page);
  line-height: 1.15;
  color: var(--kae-blue);
  margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5625rem);
}
.kae-anniv__body {
  font-family: var(--kae-ff-body);
  font-size: var(--kae-fs-body-lg);                              /* Figma: 22px */
  line-height: 1.545;                                            /* Figma: 34px / 22px */
  color: var(--wp--preset--color--deep-teal);
  max-width: min(56.04vw, 1076px);
  margin-bottom: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);       /* Figma: mb-20 */
}
.kae-anniv__body strong { font-weight: 700; }
/* Figma: navy box flush to gray section top + bottom, 56px content padding */
.kae-awards {
  background: var(--kae-navy);
  color: var(--kae-surface);
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-self: stretch;                                                    /* fills full grid row height */
}
.kae-awards p,
.kae-awards li {
  font-family: var(--kae-ff-body);
  font-size: var(--kae-fs-body-lg);                                /* Figma: 22px */
  line-height: 1.545;                                               /* Figma: 34/22 */
  color: var(--kae-surface);
  margin: 0;
}
/* Figma: Inter Light 35px, line-height 34px, mb-30, white */
.kae-awards .kae-awards__title {
  font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.1875rem);               /* Figma: 35px */
  line-height: 0.97;                                                /* Figma: 34/35 */
  margin-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.875rem);            /* Figma: 30px */
  color: var(--kae-surface);
}
/* Figma: Inter Bold 22-24px, gold #ecd895, mb-5 above each list */
.kae-awards p.kae-awards__year {
  font-weight: 700;
  color: var(--kae-gold-soft);                                      /* #ecd895 */
  margin-top: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
  margin-bottom: clamp(0.25rem, 0.15rem + 0.2vw, 0.5rem);          /* Figma: mb-5 */
}
.kae-awards p.kae-awards__year:first-of-type {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);                /* Figma: first one is 24px */
}
/* Figma: bullet list with 33px ms (margin-start) */
.kae-awards ul {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);            /* Figma: mb-20 between sections */
}
.kae-awards li {
  position: relative;
  padding-left: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
  margin-bottom: clamp(0.25rem, 0.15rem + 0.15vw, 0.4rem);
}
.kae-awards li::before {
  content: '•';
  color: var(--kae-surface);
  position: absolute;
  left: 0;
  font-weight: 400;
}
.kae-awards a { color: var(--kae-surface); text-decoration: underline; }

/* --- Historical logos strip — continues the SAME gray bg as anniv (Figma 2080:132
   covers both anniv and historical). Images at Figma natural sizes, vertically
   centered. */
.kae-historical {
  background: var(--kae-surface-alt);
  padding: clamp(2rem, 1.5rem + 2.5vw, 4.625rem) min(5.21vw, 100px) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.kae-historical__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(1rem, 0.75rem + 1vw, 2.125rem);
  border-bottom: 1px solid var(--kae-black, #000);
}
.kae-historical__row figure {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cap each image at Figma's natural max-height, preserve aspect ratio. */
.kae-historical__row img {
  width: auto;
  height: auto;
  max-height: min(8.23vw, 158px);                                       /* Figma: tallest image (shield) is 158px */
  object-fit: contain;
}
/* Figma: Inter Medium Italic 22px, line-height 30px */
.kae-historical__caption {
  font-family: var(--kae-ff-body);
  font-weight: 500;
  font-style: italic;
  font-size: var(--kae-fs-body-lg);                                /* 22px Figma */
  line-height: 1.36;                                               /* 30px / 22px */
  color: var(--kae-black, #000);
  margin-top: clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
}