@charset "UTF-8";
/* Refactor micro reset (homepage only)
   - Safe because this CSS file only loads on page-home_2026.php
   - Keeps legacy reset untouched
*/
/* kill common browser defaults */
h2, h3, h4, h5, h6,
p,
ul, ol,
figure {
  margin: 0;
}

ul {
  list-style: none;
}

/* media defaults */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

div, section {
  margin: 0;
}

/* ==========================================================================
   Layout utilities
   - Opt-in primitives that don’t impose padding/margins globally
   ========================================================================== */
/* ==========================================================================
   Variables / Design Tokens
   Keep values explicit and close to the design.
   ========================================================================== */
/* ---- Paths / misc ------------------------------------------------------- */
/* Compiled CSS lives in theme root (style.css), so assets resolve from there */
/* ---- Baseline & rhythm -------------------------------------------------- */
/* Architecture portfolio: calm editorial rhythm. 24px baseline is a great default. */
/* Semantic vertical rhythm (multiples of baseline)
   Use for typography spacing and consistent vertical flow.
*/
/* ---- Breakpoints -------------------------------------------------------- */
/* Use px here to match design and avoid mental conversion. */
/* ---- Layout ------------------------------------------------------------- */
/* ---- Spacing scale ------------------------------------------------------ */
/* Generic spacing (useful for grids/components). */
/* ---- Typography --------------------------------------------------------- */
/* Keep these as “defaults”; your actual type system can evolve later. */
/* Basic type sizes (placeholder) — refine later */
/* ---- Colors ------------------------------------------------------------- */
/* Neutral placeholders; replace with your actual palette. */
/* ---- Borders / radii / shadows ---------------------------------------- */
/* Keep shadows as tokens, but minimal for now */
/* ---- Motion ------------------------------------------------------------- */
/* ---- Z-index ------------------------------------------------------------ */
/* Keep as named layers to avoid “z-index wars”. */
/* --------------------------------------------------------------------------
   Stack: vertical spacing between direct children
   Usage:
	 <div class="stack stack--md">...</div>
   Notes:
   - Only affects direct children.
   - Respects components that set their own margins (you can override if needed).
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
}

/* default: medium rhythm */
.stack > * + * {
  margin-top: 24px;
}

.stack--xs > * + * {
  margin-top: calc(24px / 3);
}

.stack--sm > * + * {
  margin-top: calc(24px / 2);
}

.stack--md > * + * {
  margin-top: 24px;
}

.stack--lg > * + * {
  margin-top: calc(24px * 1.5);
}

.stack--xl > * + * {
  margin-top: calc(24px * 2);
}

.stack--xxl > * + * {
  margin-top: calc(24px * 3);
}

/* Variant: tighter paragraph-like rhythm (useful for compact blocks) */
.stack--tight > * + * {
  margin-top: calc(24px / 2);
}

/* --------------------------------------------------------------------------
   Grid: layout only (no padding)
   Usage:
	 <div class="grid grid--cols-3 grid--gap-md">...</div>
	 <div class="cell">...</div>
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
}

/* Gaps (use rhythm tokens) */
.grid--gap-xs {
  gap: calc(24px / 3);
}

.grid--gap-sm {
  gap: calc(24px / 2);
}

.grid--gap-md {
  gap: 24px;
}

.grid--gap-lg {
  gap: calc(24px * 1.5);
}

.grid--gap-xl {
  gap: calc(24px * 2);
}

/* Columns */
.grid--cols-1 {
  grid-template-columns: 1fr;
}

.grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive helpers (based on your breakpoint map) */
@media (max-width: 748px) {
  .grid--md-cols-1 {
    grid-template-columns: 1fr;
  }
  .grid--md-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .grid--sm-cols-1 {
    grid-template-columns: 1fr;
  }
}
/* --------------------------------------------------------------------------
   Cells: padded containers (use inside grids)
   - Grid stays “pure”; padding belongs to the content wrapper.
   -------------------------------------------------------------------------- */
.cell {
  padding: 24px;
}

.cell--sm {
  padding: 16px;
}

.cell--md {
  padding: 24px;
}

.cell--lg {
  padding: 32px;
}

/* Optional: card styling (kept minimal) */
.card {
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
}

/* ==========================================================================
   Container utility
   - Gives you a consistent page frame
   - No vertical spacing (that’s .section)
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Optional size variants */
.container--narrow {
  max-width: 960px;
}

.container--wide {
  max-width: 1440px;
}

/* Responsive gutter tweaks (optional, safe defaults) */
@media (max-width: 480px) {
  .container {
    padding-inline: 16px;
  }
}
@media (min-width: 1280px) {
  .container {
    padding-inline: 28px;
  }
}
/* ==========================================================================
   Typography (scoped)
   - Refactor-global typography baseline (scope is handled by enqueueing refactor CSS)
   - Uses self-hosted Roboto Variable (WOFF2) from /assets/fonts/web/
   - Brand headlines: Collier (applied via specific class hook, 300, 600)
   ========================================================================== */
/* --------------------------------------------------------------------------
   Self-hosted font faces (WOFF2)
   Note: refactor-*.css is compiled into THEME ROOT, so URLs are:
   assets/fonts/web/...
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Base defaults
   -------------------------------------------------------------------------- */
body {
  /* Keep 1rem = 16px unless you intentionally change it */
  font-size: 16px;
  /* Nicer rendering on macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Base type */
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #333;
  background: #fff;
}

/* Headings: no margins (rhythm lives in .prose) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.c-section__title {
  font-family: "Collier", sans-serif;
  font-weight: 600;
  line-height: 1;
  color: #333;
  font-size: 18px;
  text-wrap: balance;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: -0.025em;
}
@media (min-width: 748px) {
  .c-section__title {
    font-size: 20px;
  }
}
@media (min-width: 1024px) {
  .c-section__title {
    font-size: 20px;
  }
}

.c-card__title {
  color: #333;
  font-family: "Collier", sans-serif;
  text-align: center;
  font-size: 16px;
}
@media (min-width: 748px) {
  .c-card__title {
    font-size: 18px;
  }
}

.c-card__text {
  color: #333;
  text-align: center;
  font-size: 12px;
}

/* Brand headline hook (your homepage splash H1 uses .home__headline) */
.home__headline {
  font-family: "Collier", sans-serif;
  color: #333;
  font-size: 36px;
  text-transform: none;
  font-variant: normal;
  font-weight: 300;
  font-style: italic;
  text-wrap: balance;
  line-height: 1;
}
@media (min-width: 748px) {
  .home__headline {
    font-size: 40px;
    line-height: 1;
  }
}
@media (min-width: 1024px) {
  .home__headline {
    line-height: 1.2;
    font-size: 48px;
  }
}

.home__purpose > p {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: #333;
  text-wrap: balance;
  text-transform: lowercase;
  font-variant: all-small-caps;
  letter-spacing: 0.025em;
}
@media (min-width: 748px) {
  .home__purpose > p {
    font-size: 18px;
    font-weight: 500;
  }
}
.c-section__lead {
  text-align: center;
}
.c-section__lead p {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 400;
  color: #333;
  text-wrap: balance;
}
@media (min-width: 748px) {
  .c-section__lead {
    max-width: 640px;
    margin: auto !important;
  }
  .c-section__lead p {
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .c-section__lead {
    max-width: 800px;
  }
  .c-section__lead p {
    font-size: 15px;
  }
}

.c-services__card-title {
  font-family: "Collier", sans-serif;
  text-align: center;
  font-size: 15px;
  color: #333;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .c-services__card-title {
    font-size: 18px;
  }
}

.c-cta__title {
  text-transform: none;
  font-variant: normal;
  font-size: 28px;
  line-height: 1.2;
}
@media (min-width: 748px) {
  .c-cta__title {
    font-size: 32px;
  }
}
@media (min-width: 1024px) {
  .c-cta__title {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 0;
  }
}

/* Inline semantics */
strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* Links: keep readable defaults */
a {
  color: inherit;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   Prose rhythm (opt-in)
   Use this on rich-text blocks / editor content:
   <article class="prose">...</article>
   -------------------------------------------------------------------------- */
.prose {
  /* Paragraph spacing: smaller within same block */
}
.prose p + p {
  margin-top: calc(24px / 2); /* 12px */
}
.prose {
  /* Headings: hierarchical spacing before/after */
}
.prose h1 {
  margin-top: calc(24px * 2); /* 48px */
  margin-bottom: calc(24px * 1.5); /* 36px */
}
.prose h2 {
  margin-top: calc(24px * 1.5); /* 36px */
  margin-bottom: 24px; /* 24px */
}
.prose h3,
.prose h4 {
  margin-top: 24px; /* 24px */
  margin-bottom: calc(24px / 2); /* 12px */
}
.prose h5,
.prose h6 {
  margin-top: calc(24px / 2); /* 12px */
  margin-bottom: calc(24px / 3); /* 8px */
}
.prose {
  /* Avoid top-gap when the first element is a heading/paragraph/etc. */
}
.prose > :first-child {
  margin-top: 0 !important;
}
.prose {
  /* Lists: opt-in indentation and rhythm */
}
.prose ul,
.prose ol {
  margin-top: calc(24px / 2);
  margin-bottom: calc(24px / 2);
  padding-left: 1.25em;
}
.prose li + li {
  margin-top: calc(24px / 3);
}
.prose {
  /* Figures/images in text flow */
}
.prose figure,
.prose img,
.prose picture {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Reduced motion: keep scroll behavior neutral */
@media (prefers-reduced-motion: reduce) {
  body {
    scroll-behavior: auto;
  }
}
/* sass/base/_fonts.scss */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("assets/fonts/web/roboto-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
header#header_main .mainNav {
  position: fixed;
  display: grid;
  width: 100%;
  top: 50px;
  right: -100%;
  left: unset;
  bottom: 0;
  background-color: white;
  box-sizing: border-box;
  margin: 0;
  padding-top: 20%;
  padding-bottom: 40%;
  transition: all 400ms ease-in-out;
}
header#header_main .mainNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
header#header_main .mainNav li {
  position: relative;
  display: block;
  grid-column: span 1;
  grid-row: span 1;
  margin: 0;
}
header#header_main .mainNav li a {
  position: relative;
  display: block;
  padding: 20px;
  text-align: center;
  font-size: 24px;
  color: #0e301a;
  font-weight: 400;
}
header#header_main .mainNav li.current-menu-item a, header#header_main .mainNav li.current-page-ancestor a {
  font-weight: 600;
}
header#header_main .mainNav.active {
  right: 0;
  transition: all 400ms ease-in-out;
}
@media screen and (min-width: 748px) {
  header#header_main .mainNav {
    position: relative;
    display: block;
    display: grid;
    grid-column: 1/3;
    grid-row: 1/2;
    margin-right: auto;
    margin-left: auto;
    right: unset;
    left: unset;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
    top: 2px !important;
    background-color: transparent;
    width: fit-content;
  }
  header#header_main .mainNav ul {
    display: grid;
    grid-auto-flow: column;
    gap: 0;
  }
  header#header_main .mainNav li {
    position: relative;
    display: block;
    grid-column: span 1;
    grid-row: 1/2;
    margin: 0;
  }
  header#header_main .mainNav li a {
    position: relative;
    display: block;
    padding: 2px 10px;
    margin: 0;
    font-size: 12px;
    text-align: center;
  }
  header#header_main .mainNav li a:hover {
    background-color: #969875;
    border-radius: 3px;
    color: white;
    transition: all 400ms ease-in-out;
  }
}
@media screen and (min-width: 1448px) {
  header#header_main .mainNav li a {
    font-size: 14px;
  }
}

/* ==========================================================================
   Video
   - Responsive Vimeo iframe wrapper
   - Default: normal 16:9
   - Optional: crop baked-in top/bottom letterbox WITHOUT cutting left/right
   ========================================================================== */
.c-video {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  /* Prevent "white flash" behind the iframe on cold cache */
  background: #000;
  /* Default container ratio */
  --c-video-frame-ar: 1.7777778; /* 16/9 */
  aspect-ratio: calc(var(--c-video-frame-ar) / 1);
}
.c-video iframe,
.c-video video {
  position: absolute;
  left: 0;
  top: 0;
  /* Vimeo SDK can inject inline width/height; we must win those */
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  background: #000;
  /* Ensure crop modifiers can override transform cleanly */
  transform: none;
}

/* --------------------------------------------------------------------------
   Optional: fade-in ONLY when you add .c-video--fade
   (prevents breaking default behavior if JS isn't marking loaded)
   -------------------------------------------------------------------------- */
.c-video--fade iframe,
.c-video--fade video {
  opacity: 0;
  transition: opacity 200ms ease;
}
.c-video--fade.is-loaded iframe,
.c-video--fade.is-loaded video {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Crop baked-in letterbox (top/bottom) without cropping left/right
   How it works:
   - Keep iframe width at 100%
   - Compute iframe height from frame-ar vs source-ar
   - Center vertically and clip overflow
   -------------------------------------------------------------------------- */
.c-video--crop-letterbox {
  /* Source ratio = actual encoded frame ratio (most likely 16/9) */
  --c-video-source-ar: 1.7777778; /* 16/9 */
  /* Frame ratio = what you want to SHOW (content-only ratio) */
  /* Default to cinema; override via modifier below */
  --c-video-frame-ar: 2.39;
}

.c-video--crop-letterbox iframe,
.c-video--crop-letterbox video {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100% !important;
  /*
    iframe height = container height * (frame-ar / source-ar)
    If frame-ar > source-ar -> iframe becomes taller -> we crop top/bottom.
  */
  height: calc(100% * var(--c-video-frame-ar) / var(--c-video-source-ar)) !important;
}

/* Content ratio presets (pick the one that matches your footage) */
.c-video--crop-239 {
  --c-video-frame-ar: 2.39;
} /* common scope */
.c-video--crop-235 {
  --c-video-frame-ar: 2.35;
}

.c-video--crop-21x9 {
  --c-video-frame-ar: 2.3333333;
}

.c-video--crop-2x1 {
  --c-video-frame-ar: 2;
}

.c-section {
  position: relative;
  display: block;
  width: 100%;
  background-color: hsl(42, 33%, 97%);
  /* Mobile-first section padding */
  padding-top: calc(24px / 2);
  padding-bottom: calc(24px * 1.5);
}
@media (min-width: 748px) {
  .c-section {
    padding-top: 24px;
    padding-bottom: calc(24px * 2);
  }
}
.c-section--page-content {
  padding-bottom: calc(24px / 2);
}
@media (min-width: 748px) {
  .c-section--page-content {
    padding-top: calc(24px / 2);
    padding-bottom: 32px;
  }
}
@media (min-width: 1024px) {
  .c-section--page-content {
    padding-bottom: 48px;
  }
}

.c-section__header {
  padding-top: calc(24px / 2);
  padding-bottom: 0;
}
@media (min-width: 748px) {
  .c-section__header {
    padding-top: 32px;
  }
}
@media (min-width: 1024px) {
  .c-section__header {
    padding-top: 40px;
  }
}

.c-section__title {
  position: relative;
  display: block;
  padding-bottom: 8px;
  padding-top: 4px;
}
@media (min-width: 748px) {
  .c-section__title {
    margin: 0;
  }
}
@media (min-width: 1024px) {
  .c-section__title {
    padding-bottom: 8px;
    padding-top: 4px;
  }
}

.c-section__lead {
  padding-left: 0;
  padding-right: 0;
  padding-top: 28px;
  padding-bottom: 20px;
}

section.c-section--service-content {
  margin: 0;
}

.c-list {
  width: 100%;
  display: block;
}

.c-list__item {
  width: 100%;
  display: block;
}

.c-card {
  width: 100%;
  display: block;
  height: 100%;
  padding: 0;
  border-radius: 3px;
  background: radial-gradient(140% 110% at 50% -10%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FBF6EE 0%, #E2D3BE 100%), radial-gradient(120% 120% at 50% 50%, rgba(65, 77, 64, 0) 72%, rgba(65, 77, 64, 0.06) 88%, rgba(65, 77, 64, 0.16) 100%);
}

.c-card__body {
  padding: 12px 12px 14px;
}

.c-card__link {
  display: block;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
}
.c-card__link:hover {
  box-shadow: 0 0 0 1px rgba(65, 77, 64, 0.12) inset, 0 3px 8px rgba(65, 77, 64, 0.5);
}
@media (min-width: 748px) {
  .c-card__link {
    margin: 0;
  }
}

.c-card__media {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 3/2;
}
.c-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-card__title {
  margin: 0 0 2px;
}

/* ==========================================================================
   Authority (component)
   Hook: .c-authority (used on a .c-section)
   Elements:
   - .c-authority__panel
   - .c-authority__header
   - .c-authority__read-more-link
   - .c-authority__entities
   - .c-authority__entity-card
   ========================================================================== */
/* Make the Authority component carry the homepage look everywhere */
.c-section--authority.c-authority,
.c-section--proof.c-authority {
  background-color: hsl(42, 33%, 97%); /* same sand as homepage */
}

/* Panel layout: allow visual re-ordering (logos first, then headline/copy) */
.c-authority__panel {
  display: grid;
  grid-template-areas: "entities" "header";
  padding-left: 24px;
  padding-right: 24px;
}

.c-authority__header {
  grid-area: header;
  text-align: center;
  padding-bottom: calc(24px * 1.5);
  /* Keep homepage typography decision global (component-bound) */
}
.c-authority__header .c-section__title {
  font-style: italic;
  text-transform: none;
  font-variant: normal;
  font-size: 24px;
  line-height: 1.2;
}
@media (min-width: 748px) {
  .c-authority__header .c-section__title {
    font-size: 30px;
    line0height: 1;
  }
}

/* Fix “Read more” button globally (don’t depend on the element type) */
.c-authority__read-more-link {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  background-color: rgba(65, 77, 64, 0.8);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  margin-top: 24px;
  margin-bottom: 32px;
  color: white;
  transition: box-shadow 350ms ease-in-out;
}
.c-authority__read-more-link:hover {
  box-shadow: 0 0 5px rgba(65, 77, 64, 0.5);
}
@media (min-width: 1024px) {
  .c-authority__read-more-link {
    font-size: 14px;
  }
}

/* Entities list (logos) — match homepage sizing + place BEFORE header */
.c-authority__entities {
  grid-area: entities;
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: calc(24px / 2);
  padding-top: calc(24px / 2);
  padding-bottom: 16px;
  max-width: 400px;
  margin: auto;
}
.c-authority__entities > li {
  flex: 1 1 0;
}
@media (min-width: 748px) {
  .c-authority__entities {
    max-width: 520px; /* same as your homepage override */
    padding-bottom: calc(24px / 2);
  }
}

/*
  IMPORTANT:
  On the authority page your entity template may wrap the item in .c-card__link.
  That triggers global card shadow/background.
  We neutralize it INSIDE the entities block only — so logos stay “plain”.
*/
.c-authority__entities .c-card__link {
  box-shadow: none;
  background: transparent;
  display: block;
  grid-template-rows: none;
  padding: 0;
  margin: 0;
}

.c-authority__entities .c-card__link:hover {
  box-shadow: none;
}

/* Entity item look (already “plain” style like homepage) */
.c-authority__entity-card {
  text-align: center;
  transition: all 350ms ease-in-out;
}
.c-authority__entity-card .entity-media {
  margin-bottom: calc(24px / 2);
}
.c-authority__entity-card .entity-media img {
  width: 100%;
  max-width: 56px;
  height: auto;
  display: block;
  margin: auto;
  transition: all 350ms ease-in-out;
}
@media (min-width: 748px) {
  .c-authority__entity-card .entity-media img {
    max-width: 64px;
  }
}
@media (min-width: 1024px) {
  .c-authority__entity-card .entity-media img {
    max-width: 80px;
  }
}
.c-authority__entity-card .entity-media:hover {
  filter: drop-shadow(0 0 5px #333);
}
.c-authority__entity-card .entity-title {
  font-size: 14px;
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: 500;
  color: #333;
}
@media (min-width: 748px) {
  .c-authority__entity-card .entity-title {
    font-size: 16px;
  }
}

/* ==========================================================================
   Awards / Proof strip (Authority proof)
   Goal: match the homepage proof strip everywhere.
   ========================================================================== */
/*
  IMPORTANT:
  We do NOT rely on a gradient panel background here.
  Homepage look is:
  - Sticky header on surface
  - Lead on sand
  - List on surface
*/
/* Header: sticky like homepage */
.c-authority__proof-header {
  position: sticky;
  top: 48px;
  background-color: hsl(42, 33%, 97%);
  box-shadow: 0 2px 3px rgba(65, 77, 64, 0.5);
  padding-bottom: 0;
  padding-top: 4px;
  padding-left: 0;
  padding-right: 0;
  z-index: 1000;
  text-align: center;
}
@media (min-width: 748px) {
  .c-authority__proof-header {
    top: 48px;
  }
}

/* Lead text block: sand background like homepage */
.c-authority__proof-lead {
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 48px;
  padding-top: 48px;
  background-color: hsl(42, 33%, 97%);
}
.c-authority__proof-lead p {
  color: #333;
}
@media (min-width: 748px) {
  .c-authority__proof-lead {
    padding-top: 56px;
    padding-bottom: 64px;
  }
}

/* List wrapper: surface background + padding like homepage */
.c-authority__proof-list {
  margin: auto;
  padding-top: 48px;
  padding-bottom: 56px;
  background-color: hsl(42, 33%, 97%);
  /* Keep your existing responsive layout behavior */
  list-style: none;
  padding-left: 16px;
  padding-right: 16px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 748px) {
  .c-authority__proof-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .c-authority__proof-list > li {
    flex: 0 0 calc((100% - 12px) / 5); /* 4 per row */
  }
}
@media (min-width: 1024px) {
  .c-authority__proof-list > li {
    flex: 0 0 calc((100% - 12px) / 6); /* 5 per row */
  }
}

/* Proof card: keep “logo wall” (no tiles) */
.c-authority__proof-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
}

/* Make proof links NOT look like generic cards */
.c-authority__proof-card .c-card__link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  min-height: auto;
  padding: 6px 6px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  background: transparent;
  filter: drop-shadow(0 2px 2px rgba(65, 77, 64, 0.2)) drop-shadow(0 5px 5px rgba(65, 77, 64, 0.2));
  transition: filter 350ms ease-in-out;
}

.c-authority__proof-card .c-card__link:hover {
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.12));
}

/* Media/logo */
.c-authority__proof-card .c-card__media {
  display: grid;
  place-items: center;
  margin-bottom: 0;
  aspect-ratio: unset;
}
.c-authority__proof-card .c-card__media img {
  display: block;
  width: auto;
  height: auto;
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
}

/* Title + year */
.c-authority__proof-card .c-card__title {
  margin: auto 0 0 0;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
  color: #333;
  text-wrap: pretty;
  font-family: Roboto, sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 748px) {
  .c-authority__proof-card .c-card__title {
    font-size: 10px;
  }
}
@media (min-width: 1024px) {
  .c-authority__proof-card .c-card__title {
    font-size: 12px;
  }
}

.c-authority__proof-card .c-card__meta {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.85;
}
@media (min-width: 748px) {
  .c-authority__proof-card .c-card__meta {
    font-size: 10px;
  }
}
@media (min-width: 1024px) {
  .c-authority__proof-card .c-card__meta {
    font-size: 12px;
  }
}

/* ==========================================================================
   Services module
   - Reusable list + card grid
   - Mobile: full-width cards
   - Card internals use CSS grid areas (swap order without DOM changes)
   ========================================================================== */
.c-services {
  position: relative;
  box-shadow: 0 -8px 8px rgba(65, 77, 64, 0.5);
  padding-bottom: 0;
}

.c-services__header {
  text-align: center;
  padding-top: calc(24px * 2);
  padding-bottom: calc(24px * 1.5);
  padding-left: 28px;
  padding-right: 28px;
  /* Typography is defined in components/_section.scss via:
   .c-section__title and .c-section__lead */
}

/* Services list layout */
.c-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(24px / 2);
  grid-template-columns: 1fr;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: calc(24px * 1.5);
}

@media (min-width: 748px) {
  .c-services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .c-services__list > li {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
@media (min-width: 1024px) {
  .c-services__list > li {
    flex: 0 0 calc((100% - 24px) / 3);
  }
}
@media (min-width: 1448px) {
  .c-services__list {
    padding-left: calc((100dvw - 1448px) / 2);
    padding-right: calc((100dvw - 1448px) / 2);
  }
}
@media (min-width: 1024px) {
  .c-services__list {
    /* switch from grid to flex */
    display: flex;
    flex-wrap: wrap;
    /* same spacing as your grid gap */
    gap: calc(24px / 2);
    /* center rows with leftover items */
    justify-content: center;
  }
  /* same width as a 3-column grid with 2 gaps */
  .c-services__item {
    flex: 0 0 calc((100% - 2 * calc(24px / 2)) / 3);
  }
}
/* Card internal layout
   Important: we put the grid on the link wrapper so it works whether
   the card is linked or not (see fallback below). */
.c-services__link {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  grid-template-areas: "media" "title" "body";
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  margin: 0;
  color: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 350ms ease-in-out;
}
.c-services__link:hover, .c-services__link:focus-visible {
  box-shadow: 0 0 0 1px rgba(65, 77, 64, 0.12) inset, 0 3px 8px rgba(65, 77, 64, 0.5);
}

.c-services__card {
  background: hsl(42, 33%, 97%);
}

/* If the card is NOT linked, apply the same grid to the card itself */
.c-services__card:not(:has(.c-services__link)) {
  /* modern selector; safe fallback below */
}

/* Fallback for browsers without :has(): the .c-services__card rule above already grids it. */
/* But when linked, the .c-services__link grid will control layout. */
.c-services__card-title {
  position: relative;
  grid-area: title;
  margin: 0;
  padding: 0;
}

.c-services__media {
  grid-area: media;
}

.c-services__body {
  grid-area: body;
  text-align: center;
  padding-top: 0;
}
.c-services__body > p {
  font-size: 12px;
  line-height: 1.4;
  text-wrap: pretty;
}
@media (min-width: 748px) {
  .c-services__body > p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Safari/Chrome */
    line-clamp: 2;
  }
}
@media (min-width: 1024px) {
  .c-services__body > p {
    font-size: 12.5px;
  }
}

/* Media */
.c-services__media {
  overflow: hidden;
}
.c-services__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   CTA module
   - Reusable call-to-action block
   - Keeps visuals neutral; homepage can override via .home__cta*
   ========================================================================== */
.c-cta__panel {
  /* Keep spacing aligned with your rhythm tokens */
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0;
  padding-bottom: 40px;
  background-color: hsl(42, 33%, 97%);
  text-align: center;
}

.c-cta__header {
  margin-bottom: calc(24px / 2);
  font-style: italic;
}
@media (min-width: 748px) {
  .c-cta__header {
    font-size: 24px;
  }
}

.c-cta__lead {
  /* Let typography-scope do most of the work; keep it light */
  margin-top: 0;
}
.c-cta__lead > p {
  color: #333;
  font-size: 14px;
  line-height: 1.2;
  text-wrap: balance;
  text-align: center;
  font-weight: 600;
}
@media (min-width: 748px) {
  .c-cta__lead > p {
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .c-cta__lead > p {
    font-size: 18px;
  }
}

a.c-cta__btn {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  background-color: rgba(65, 77, 64, 0.8);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 24px;
  margin-bottom: 24px;
  color: white;
  transition: box-shadow 350ms ease-in-out;
}
a.c-cta__btn:hover {
  box-shadow: 0 0 5px rgba(65, 77, 64, 0.5);
}
@media (min-width: 748px) {
  a.c-cta__btn {
    font-size: 14px;
  }
}

.c-cta__microcopy {
  margin-top: calc(24px / 2);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  font-size: 12px;
}
@media (min-width: 748px) {
  .c-cta__microcopy {
    font-size: 14px;
  }
}

/* ==========================================================================
   Updates module
   - Matches Services base design (header spacing + grid list + gradient cards)
   - Mobile: full-width cards
   - Card internals use CSS grid areas (swap order without DOM changes)
   ========================================================================== */
.c-updates {
  position: relative;
  background: hsl(42, 33%, 97%);
  box-shadow: 0 -5px 10px rgba(65, 77, 64, 0.5); /* matches .c-services */
}

.c-updates__header {
  text-align: center;
  padding-bottom: 24px;
  padding-left: 28px;
  padding-right: 28px;
  /* Typography comes from components/_section.scss via .c-section__title */
}

/* Updates list layout */
.c-updates__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(24px / 2);
  grid-template-columns: 1fr;
  background-color: rgb(237, 229, 216);
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: calc(24px * 1.5);
}

@media (min-width: 748px) {
  .c-updates__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .c-updates__list > li {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
@media (min-width: 1024px) {
  .c-updates__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Card internal layout
   Put the grid on the link wrapper so it works whether linked or not. */
.c-updates__link {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
  grid-template-areas: "media" "title" "meta" "body";
}

/* The card base design: same “look” as Services */
.c-updates__card {
  border: 1px #ccc solid;
  border-radius: 3px;
  heoght: 100%;
  background: hsl(42, 33%, 97%);
  height: 100%;
}

/* If the card is NOT linked, apply the same grid to the card itself.
   (So the layout stays consistent.) */
.c-updates__card:not(:has(.c-updates__link)) {
  display: grid;
  gap: calc(24px / 2);
  grid-template-columns: 1fr;
  grid-template-areas: "meta" "media" "title" "body";
}

/* List item shadow matches Services */
/* Title */
.c-updates__card-title {
  grid-area: title;
  text-align: center;
  grid-row: 3/4;
  margin: 0;
  font-size: 14px;
  color: #333;
  padding-top: 8px;
  font-weight: 700 !important;
  line-height: 1.2;
  font-family: roboto, sans_serif;
}
@media (min-width: 748px) {
  .c-updates__card-title {
    font-size: 14px;
    font-weight: 700 !important;
  }
}

/* Media */
.c-updates__media {
  grid-area: media;
  overflow: hidden;
  grid-row: 2/3;
  aspect-ratio: 3/2;
  background-color: rgb(237, 229, 216);
  background-image: linear-gradient(0deg, rgb(237, 229, 216) 0%, rgb(248, 246, 241) 50%, rgb(237, 229, 216) 100%);
}
.c-updates__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Meta row */
.c-updates__meta {
  grid-area: meta;
  display: flex;
  gap: calc(24px / 3);
  justify-content: right;
  align-items: right;
  text-align: right;
  font-size: 11px !important;
  text-align: left;
  font-weight: 700;
  padding-right: 12px;
  padding-top: 8px;
  grid-row: 1/2;
  color: #333;
}

/* Body */
.c-updates__body {
  grid-area: body;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding-bottom: 24px;
  padding-top: 0;
}
.c-updates__body > p {
  font-size: 12px;
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 300;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Make the link wrapper behave like a normal card container */
.c-updates__link {
  text-decoration: none;
  color: inherit;
  margin: 0;
}

.c-slideshow__viewport {
  position: relative;
  display: block;
}

.c-slideshow__slides {
  position: relative;
  display: grid;
  align-content: center;
  justify-content: center;
}

.c-slideshow__slide {
  aspect-ratio: 3/2;
  overflow: hidden;
  grid-row: 1/2;
  grid-column: 1/2;
  opacity: 0;
  transition: opacity 750ms ease-in-out;
  background-color: hsl(42, 33%, 97%);
}
.c-slideshow__slide img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.c-slideshow__slide--visible {
  opacity: 1;
}

.c-slideshow__btn {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 100;
  background: transparent;
  border: 0;
}

.c-slideshow__btn--prev {
  left: 0;
}
.c-slideshow__btn--prev:hover {
  cursor: url("assets/images/icon_prev.png"), auto;
}

.c-slideshow__btn--next {
  left: 50%;
}
.c-slideshow__btn--next:hover {
  cursor: url("assets/images/icon_next.png"), auto;
}

.c-slideshow__nav {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  left: 0px;
  bottom: 16px;
  z-index: 200;
}

.c-slideshow__dot {
  border-radius: 0;
  border: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 0 5px #333;
  transition: background-color 450ms ease-in-out;
  width: 8px;
  height: 8px;
  margin-right: 8px;
}
.c-slideshow__dot--active {
  background-color: #999;
}

/* ==========================================================================
   Standard page
   - Uses shared components: c-section, c-section__title, c-section__lead, c-card, c-list
   - Adds page-specific layout and spacing via .page__*
   ========================================================================== */
.page {
  position: relative;
  display: block;
  width: 100%;
  background-color: rgb(237, 229, 216);
}
.page__content {
  background: hsl(42, 33%, 97%);
}

.page__header {
  position: relative;
  display: block;
  padding-top: 30px;
}
.page__header-content {
  position: relative;
  display: block;
  padding-left: 28px;
  padding-right: 28px;
  text-align: center;
  background-color: rgb(237, 229, 216);
  background: hsl(42, 33%, 97%);
  box-shadow: 0 -2px 3px rgba(65, 77, 64, 0.5);
  z-index: 50;
}

.page__breadcrumb {
  position: fixed;
  display: block;
  top: 50px;
  left: 0;
  width: 100%;
  padding-left: 16px;
  padding-right: 28px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: rgb(237, 229, 216);
  box-shadow: 0 1px 5px rgba(65, 77, 64, 0.5);
  text-align: left;
  z-index: 100;
}
@media (min-width: 748px) {
  .page__breadcrumb {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 4px;
  }
}
@media (min-width: 1024px) {
  .page__breadcrumb {
    top: 42px;
  }
}
.page__breadcrumb-list {
  position: relative;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 748px) {
  .page__breadcrumb-list {
    font-size: 12px;
  }
}
.page__breadcrumb-item, .page__breadcrumb-kicker {
  position: relative;
  display: inline-block;
  margin: 0;
  color: rgba(65, 77, 64, 0.5);
}
.page__breadcrumb-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: #333;
  margin: 0;
}
.page__breadcrumb-link:hover, .page__breadcrumb-link:focus-visible {
  text-decoration: underline;
}

.page__lead {
  position: sticky;
  display: block;
  top: 80px;
  width: 100%;
  margin: 0;
  aspect-ratio: 3/2;
  z-index: 1;
}
.page__lead img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .page__lead {
    max-height: calc(100dvh - 150px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 2vw, 40px);
    background: radial-gradient(120% 90% at 50% 26%, hsla(95, 10%, 92%, 0.16), hsla(95, 10%, 92%, 0) 62%), radial-gradient(120% 110% at 50% 120%, hsla(95, 14%, 8%, 0.14), hsla(95, 14%, 8%, 0) 60%), linear-gradient(180deg, hsla(95, 18%, 86%, 0.08), hsla(95, 14%, 10%, 0.1)), hsl(96, 9%, 28%);
  }
  .page__lead img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 150px - clamp(36px, 4vw, 80px));
    background: hsl(0, 0%, 100%);
    outline: 1px solid hsla(0, 0%, 100%, 0.1);
    /* LESS GLOW:
    - remove light halo
    - use tighter, darker shadow */
    box-shadow: 0 2px 8px rgba(65, 77, 64, 0.5), 0 14px 34px rgba(65, 77, 64, 0.5);
  }
}

/* --------------------------------------------------------------------------
   Main text
   -------------------------------------------------------------------------- */
.page__text {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
  text-align: center;
}
.page__text p {
  margin-top: 0;
  margin-bottom: calc(24px / 2);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #333;
}
@media (min-width: 1024px) {
  .page__text p {
    font-size: 15px;
  }
}
.page__text h2,
.page__text h3,
.page__text h4 {
  margin-top: 24px;
  margin-bottom: calc(24px / 2);
}
.page__text ul,
.page__text ol {
  margin-top: 0;
  margin-bottom: calc(24px / 2);
  padding-left: 1.2em;
}

/* ==========================================================================
   Services overview page (page-services.php)
   - Light page-level layout
   - Reuses existing service project card styles via service__project-*
   ========================================================================== */
.display-none {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.service-overview {
  --anchor-offset: 88px;
}

/* --------------------------------------------------------------------------
   Service groups
   -------------------------------------------------------------------------- */
.service-overview__inpage-nav {
  position: sticky;
  margin: 0;
  top: 0;
  margin-top: -48px;
  z-index: 2000;
  padding-bottom: 4px;
  background-color: hsl(42, 33%, 97%);
  width: 100%;
}
@media (min-width: 748px) {
  .service-overview__inpage-nav {
    margin-top: 0;
    top: 50px;
    padding-top: 4px;
    padding-bottom: 8px;
  }
}
.service-overview__inpage-nav .service-overview__inpage-nav-list {
  display: flex;
  justify-content: center;
  margin: 0;
  flex-wrap: wrap;
  gap: 4px;
}
.service-overview__inpage-nav .service-overview__inpage-nav-list .service-overview__inpage-nav-item {
  position: relative;
  display: block;
}
.service-overview__inpage-nav .service-overview__inpage-nav-list .service-overview__inpage-nav-item a {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  transition: box-shadow 350ms ease-in-out;
}
.service-overview__inpage-nav .service-overview__inpage-nav-list .service-overview__inpage-nav-item a:hover {
  text-decoration: underline;
}
.service-overview__inpage-nav .service-overview__inpage-nav-list .service-overview__inpage-nav-item a.service-overview__inpage-nav-link--active {
  font-weight: 600;
}

.service-overview__group {
  padding-bottom: 16px;
  padding-top: 0px;
  position: sticky;
  top: 24px;
  box-shadow: 0 -4px 8px #333;
  scroll-margin-top: var(--anchor-offset);
}
@media (min-width: 748px) {
  .service-overview__group {
    top: 88px;
    padding-bottom: 0;
  }
  .service-overview__group:nth-of-type(even) .service-overview__service {
    grid-template-columns: 5fr 3fr;
  }
  .service-overview__group:nth-of-type(even) .service-overview__values {
    grid-column: 1/2;
  }
  .service-overview__group:nth-of-type(even) .service-overview__service-text {
    grid-column: 2/3;
  }
}
@media (min-width: 1024px) {
  .service-overview__group {
    top: 92px;
  }
}
@media (min-width: 1280px) {
  .service-overview__group {
    top: 92px;
  }
}
@media (min-width: 1448px) {
  .service-overview__group {
    top: 96px;
  }
}

.service-overview__service {
  background: hsl(42, 33%, 97%);
}
@media (min-width: 748px) {
  .service-overview__service {
    display: grid;
    grid-template-columns: 3fr 5fr;
  }
}

.service-overview__service-header {
  position: sticky;
  top: 48px;
  background: hsl(42, 33%, 97%);
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 0;
  text-align: center;
  z-index: 1000;
}
@media (min-width: 748px) {
  .service-overview__service-header {
    top: 88px;
    grid-column: 1/3;
    grid-row: 1/2;
  }
}
@media (min-width: 1024px) {
  .service-overview__service-header {
    top: 90px;
    padding-top: 2px;
  }
}

.service-overview__service-title {
  font-size: 18px;
  padding-bottom: 8px;
  padding-top: 8px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
@media (min-width: 1024px) {
  .service-overview__service-title {
    font-size: 20px;
  }
}
@media (min-width: 1448px) {
  .service-overview__service-title {
    padding-bottom: 8px;
    padding-top: 8px;
  }
}

@media (min-width: 748px) {
  .service-overview__values {
    grid-column: 2/3;
    grid-row: 2/3;
    height: fit-content;
    align-self: center;
  }
}

.service-overview__service-text {
  display: block;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-bottom: 8px;
  padding-left: 28px;
  padding-right: 28px;
  margin-top: 0px;
}
@media (min-width: 748px) {
  .service-overview__service-text {
    margin-top: unset;
    grid-column: 1/2;
    grid-row: 2/3;
    text-align: left;
    padding-top: 56px;
    padding-bottom: 48px;
    height: fit-content;
    align-self: center;
  }
}
@media (min-width: 1024px) {
  .service-overview__service-text {
    padding-top: 16px;
    padding-bottom: 20px;
    height: fit-content;
    align-self: center;
  }
}
@media (min-width: 1448px) {
  .service-overview__service-text {
    max-width: 720px;
    padding-top: 24px;
    padding-bottom: 32px;
  }
}
.service-overview__service-text p {
  margin-top: 0;
  margin-bottom: calc(24px / 2);
  font-size: 14px;
  line-height: 1.4;
  text-wrap: balance;
}
.service-overview__service-text h2,
.service-overview__service-text h3,
.service-overview__service-text h4 {
  margin-top: 24px;
  margin-bottom: calc(24px / 2);
}
.service-overview__service-text ul,
.service-overview__service-text ol {
  margin-top: 0;
  margin-bottom: calc(24px / 2);
  padding-left: 1.2em;
}

.service__project-list {
  position: relative;
  z-index: 100;
  background: hsl(42, 33%, 97%);
}

.service-overview__anchor {
  display: block;
  height: 0;
  scroll-margin-top: var(--anchor-offset);
}

/* --------------------------------------------------------------------------
   Note:
   The actual project grid/card styling is already handled by .service__project-*
   in pages/_service.scss (same DOM/classes), so we don't duplicate it here.
   -------------------------------------------------------------------------- */
/* Pull in shared project-card styling (.service__project-*) */
/* ==========================================================================
   Service — Related projects
   - Layout + sticky header
   - Scoped card styling for service project cards
   ========================================================================== */
.service__header-title {
  position: fixed;
  display: block;
  padding-bottom: 4px;
  padding-top: 8px;
  text-align: center;
  top: 82px;
  z-index: 50;
  width: 100%;
  background: hsl(42, 33%, 97%);
}
@media (min-width: 1024px) {
  .service__header-title {
    top: 80px;
  }
}

.page__service-content {
  top: 20px;
}
.page__service-content .c-section__lead {
  padding-bottom: 0;
}

.service__projects {
  margin-top: 0;
  padding-bottom: calc(24px * 1.5);
}

.service__project-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 20px;
  padding-bottom: 40px;
  max-width: 1448px;
  margin: auto;
}
@media (min-width: 748px) {
  .service__project-list {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 64px;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .service__project-list > li {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}
@media (min-width: 1024px) {
  .service__project-list > li {
    flex: 0 0 calc((100% - 24px * 2) / 3);
  }
}
@media (min-width: 1448px) {
  .service__project-list {
    padding-top: 12px;
    padding-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  .service__project-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* --------------------------------------------------------------------------
   Project cards (scoped)
   DOM:
   li.service__project--card > article.service__project-card.c-card--project
   -> a.service__project-link.c-card__link
   -> .service__project-media.c-card__media
   -> .service__project-body.c-card__body
   -------------------------------------------------------------------------- */
.service__project--card {
  border-radius: 3px;
  overflow: hidden;
}
.service__project--card .service__project-card {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
}
.service__project--card .service__project-media {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 3/2;
  background: transparent;
  background-color: rgb(237, 229, 216);
  background-image: linear-gradient(0deg, rgb(237, 229, 216) 0%, rgb(248, 246, 241) 50%, rgb(237, 229, 216) 100%);
}
.service__project--card .service__project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.service__project--card .service__project-body {
  padding: 16px 12px 14px;
  padding-bottom: 20px;
  padding-left: 0;
}
.service__project--card .service__project-title {
  font-size: 15px;
  padding-bottom: 4px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  margin-bottom: 0;
}
.service__project--card .service__project-text {
  margin: 0;
}
.service__project--card .service__project-text p {
  font-size: 14px;
  line-height: 1.2;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-width: 90%;
  margin: auto;
  word-break: break-word;
}

/*# sourceMappingURL=refactor-services.css.map */