/* Rayli shared type, controls, media and hero layouts. Page CSS owns content layouts. */
#main h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  word-break: normal;
}
#main h2 { line-height: 1.08; overflow-wrap: break-word; word-break: normal; }
#main h3 {
  font-family: var(--font-body);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-transform: none;
  overflow-wrap: break-word;
}
#main :is(h1, h2) em { font-style: normal; }
#main h2 em { color: var(--color-action); }
#main :is(.section-heading--on-dark, [class*="cta"]:has(.eyebrow--light)) h2 em { color: var(--color-accent-soft); }
#main p:where(:not(.eyebrow):not(.hero__statement):not([class*="caption"]):not([class*="note"]):not([class*="meta"]):not([class*="label"]):not([class*="index"]):not([class*="disclosure"]):not([class*="error"]):not([class*="number"]):not([class*="category"]):not([class*="kicker"]):not([class*="code"]):not([class*="status"]):not([class*="tag"]):not([class*="todo"])) {
  font-size: var(--type-copy);
  line-height: 1.7;
}
#main :is(.section-heading, .contact-section-heading, .project-section-heading,
  .rayli-product-section, .products-section, .why-rayli, .final-cta, .direct-contact-cta) h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 600;
  letter-spacing: -0.025em;
}
#main :is(.section-heading, .contact-section-heading, .project-section-heading) {
  margin-bottom: var(--space-heading);
}
#main :is(.section, .products-section, .rayli-product-section) { padding-block: var(--section-space); }
#main :is(summary, [class*="faq"] h3, [class*="faq"] button) {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
#main :is(.contact-field, .form-field, .solution-field) label { font-size: 17px; line-height: 1.5; }
#main :is(.rayli-product-prose, .article-content, .article-body) :is(li, dt, dd),
#main .rayli-product-spec-table { font-size: var(--type-copy); line-height: 1.65; }
#main :is(.rayli-product-gallery__note, .rayli-product-hero__note, .contact-form__required-note) {
  font-size: var(--type-small);
  line-height: 1.6;
}
#main :is(.contact-path__copy, .contact-form-help, .contact-info-item) h3 { font-size: 22px; }
#main .contact-path__copy p { color: #526b7e; }
#main .hero__statement { line-height: 1.3; }
.site-footer__tagline { line-height: 1.35; }

/* Controls retain a common shape, weight, hit area and visible focus. */
.button {
  min-height: 54px;
  padding: 14px 22px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.button--accent, .button--header, .primary-nav__mobile-cta { background-color: var(--color-accent-dark); }
.button--accent:hover, .button--header:hover { background-color: #065d36; }
.button--outline-dark { color: var(--color-primary); border-color: #aab9b1; background: transparent; }
.button--outline-dark:hover { border-color: var(--color-primary); background: #eaf0ec; }
.button__arrow { flex: 0 0 auto; }
#main input:not([type="checkbox"]):not([type="radio"]), #main select, #main textarea {
  min-height: 52px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
.breadcrumb { font-family: var(--font-body); font-size: var(--type-label); line-height: 1.6; letter-spacing: normal; }

/* Packshots and scenes have distinct media roles, with a shared caption style. */
#main .rayli-card { border-color: var(--color-border); border-radius: var(--radius-control); }
#main .rayli-card :is(.solution-card__body, .products-card__body, .rayli-catalog-card__body) { padding: var(--space-card); }
#main .rayli-card h3 { font-size: var(--type-h3); }
#main :is(.solution-card__body, .products-card__body, .rayli-catalog-card__body) .text-link { font-size: 16px; line-height: 1.5; }
#main :is(.products-card__image, .solution-card__visual) { aspect-ratio: var(--media-ratio-scene); }
#main .rayli-catalog-card__image { aspect-ratio: var(--media-ratio-product); }
#main .featured-insight--compact .featured-insight__image {
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: start;
  aspect-ratio: var(--media-ratio-scene);
}
#main .service-photo--installation { width: 100%; min-height: 0; aspect-ratio: var(--media-ratio-scene); }
#main .service-photo--installation img { object-fit: contain; }
#main :is(.ai-image-label, .insight-image-label, .article-image-label) {
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 6px 9px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-control);
  background: rgba(18, 57, 88,0.84);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  white-space: normal;
  text-transform: none;
  backdrop-filter: none;
}
#main figcaption :is(.ai-image-label, .insight-image-label, .article-image-label) {
  padding: 0;
  color: var(--color-action);
  border: 0;
  background: transparent;
}
#main figcaption { font-family: var(--font-body); font-size: var(--type-label); line-height: 1.55; }
#main .rayli-catalog-card__category { font-size: var(--type-label); line-height: 1.5; letter-spacing: 0.04em; }
#main .rayli-catalog__categories h3 { font-size: 21px; }

/* Cover heroes share a measured content width and normal-flow disclosures. */
#main .rayli-hero--cover { display: block; min-height: 0; padding: 0; }
#main .rayli-hero--cover .rayli-hero__inner {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding-top: calc(var(--header-height) + 28px);
  padding-bottom: 32px;
}
#main .rayli-hero .breadcrumb { margin: 0 0 36px; }
#main .rayli-hero .rayli-hero__copy { max-width: 720px; margin: 0; padding: 0; }
#main .rayli-hero--cover .rayli-hero__copy { width: min(100%, 720px); }
#main .rayli-hero h1 { max-width: 720px; margin: 0 0 22px; }
#main .rayli-hero .eyebrow { margin-bottom: 20px; }
#main .rayli-hero :is(h1, h2) em { color: var(--color-accent-soft); }
#main .rayli-hero--detail :is(h1, h2) em { color: var(--color-action); }
#main .rayli-hero p:where([class$="__lead"], [class$="__summary"], [class$="__description"], [class$="__intro"]) {
  max-width: 610px;
  font-size: var(--type-intro);
  line-height: 1.6;
}
#main :is(.rayli-hero--cover, .rayli-hero--split, .rayli-hero--home, .rayli-hero--editorial)
  p:where([class$="__lead"], [class$="__description"], [class$="__intro"]) { color: rgba(255,255,255,0.9); }
#main .rayli-hero .rayli-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
#main .rayli-hero .rayli-hero__note {
  position: static;
  inset: auto;
  display: block;
  width: auto;
  max-width: 720px;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 6px 10px;
  margin: 28px 0 0;
  padding: 0;
  color: rgba(255,255,255,0.82);
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
  backdrop-filter: none;
}
#main .rayli-hero .insights-hero__meta { margin-top: 24px; flex-wrap: wrap; }
#main .rayli-hero .rayli-hero__note::before { flex: 0 0 auto; }
#main .rayli-hero__note .asset-dot { display: inline-block; margin-right: 8px; vertical-align: middle; }

/* Company and detail pages share columns; DOM content comes before the visual. */
#main :is(.rayli-hero--split, .rayli-hero--detail, .rayli-hero--editorial) {
  min-height: 0;
  padding: calc(var(--header-height) + 28px) 0 64px;
}
#main :is(.rayli-hero--split, .rayli-hero--detail, .rayli-hero--editorial) h1 { font-size: var(--type-h1-compact); }
#main :is(.rayli-hero--split, .rayli-hero--detail, .rayli-hero--editorial) > .container { padding-block: 0; }
#main .rayli-hero .rayli-hero__layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 48px;
  padding: 0;
}
#main .rayli-hero--detail .rayli-hero__copy { grid-column: 2; grid-row: 1; }
#main .rayli-hero--detail .rayli-hero__visual { grid-column: 1; grid-row: 1; }
#main .rayli-hero--split .rayli-hero__copy { --type-intro: 20px; }
#main .rayli-hero--split :is(.factory-photo--hero, .service-photo--hero) { min-height: 0; aspect-ratio: var(--media-ratio-scene); }
#main .rayli-hero--detail .project-photo-slot--hero { min-height: 0; aspect-ratio: var(--media-ratio-scene); }
#main .rayli-product-hero .rayli-product-gallery__stage {
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--media-ratio-product);
  padding: 16px;
}
#main .rayli-product-hero .rayli-product-gallery__stage img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
#main .rayli-product-hero .rayli-product-gallery__thumbs button { flex-basis: 80px; height: 64px; }
#main .rayli-product-hero .rayli-product-hero__note { margin-top: 18px; }

/* The homepage keeps its larger display size while allowing content to grow. */
#main .rayli-hero--home { min-height: 0; }
#main .rayli-hero--home h1 { font-size: var(--type-h1-home); }
#main .rayli-hero--home .hero__content-wrap { padding-top: calc(var(--header-height) + 80px); padding-bottom: 32px; }
#main .rayli-hero--home .hero__content { max-width: 740px; }
#main .rayli-hero--home .rayli-hero__note-wrap { padding-bottom: 24px; }
#main .rayli-hero--home .rayli-hero__note { margin-top: 0; max-width: none; }
#main .rayli-hero--home .hero__trust-wrap { position: static; inset: auto; transform: none; }

@media (max-width: 920px) {
  #main .rayli-hero .rayli-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #main .rayli-hero--detail :is(.rayli-hero__copy, .rayli-hero__visual) { grid-column: auto; grid-row: auto; }
  #main .rayli-hero :is(.rayli-hero__copy, .rayli-hero__visual) { order: 0; }
  #main .rayli-hero--split .rayli-hero__visual { max-width: 720px; }
  body:has(.rayli-hero) .site-header:not(.is-scrolled):not(.is-menu-open) {
    color: var(--color-primary);
    background: var(--color-white);
    border-bottom-color: var(--color-border);
  }
}
@media (max-width: 680px) {
  :root {
    --type-h1: clamp(44px, 12vw, 52px);
    --type-h1-compact: var(--type-h1);
    --type-h1-home: clamp(48px, 12.5vw, 56px);
    --type-h2: clamp(34px, 8.7vw, 40px);
    --type-h3: 22px;
    --text-body: 17px;
    --type-copy: 17px;
    --type-intro: 19px;
    --type-small: 14px;
    --space-card: 20px;
    --space-heading: 30px;
    --section-space: 64px;
  }
  #main h1 { line-height: 1.04; }
  #main h3 { line-height: 1.35; }
  #main .rayli-hero .breadcrumb { margin-bottom: 28px; }
  #main .rayli-hero--cover .rayli-hero__inner { padding-top: calc(var(--header-height) + 24px); padding-bottom: 28px; }
  #main :is(.rayli-hero--split, .rayli-hero--detail, .rayli-hero--editorial) { padding-top: calc(var(--header-height) + 24px); padding-bottom: 40px; }
  #main .rayli-hero .rayli-hero__layout { gap: 28px; }
  #main .rayli-hero--split .rayli-hero__copy { --type-intro: 19px; }
  #main .rayli-hero .rayli-hero__actions { align-items: stretch; flex-direction: column; }
  #main .rayli-hero .rayli-hero__actions .button { width: 100%; justify-content: space-between; }
  #main .rayli-hero .rayli-hero__note { margin-top: 24px; }
  #main .rayli-hero--home .hero__content-wrap { padding-top: calc(var(--header-height) + 48px); padding-bottom: 24px; }
  #main .rayli-hero--home .hero__trust { padding-block: 18px; }
  #main .rayli-hero--home .hero__visual-caption-note { margin-left: 0; padding-left: 0; border-left: 0; }
  #main .contact-hero .contact-hero__visual { display: none; }
  #main .rayli-product-hero .rayli-product-gallery__stage { aspect-ratio: var(--media-ratio-scene); padding: 12px; }
  #main .rayli-product-hero .rayli-product-gallery__thumbs button { flex-basis: 70px; height: 56px; }
  #main .rayli-hero dl[class$="-material-facts"] > div { padding-inline: 10px; }
  #main .rayli-hero dl[class$="-material-facts"] > div:first-child { padding-left: 0; }
  #main .rayli-hero dl[class$="-material-facts"] > div:last-child { padding-right: 0; }
  #main .rayli-hero dl[class$="-material-facts"] dt {
    font-size: var(--type-label);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-transform: none;
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Logo-led palette: blue actions, green recycling accents, navy foundations. */
.button--accent, .button--header, .primary-nav__mobile-cta {
  color: var(--color-white);
  border-color: var(--color-action);
  background-color: var(--color-action);
}
.button--accent:hover, .button--header:hover, .primary-nav__mobile-cta:hover {
  border-color: var(--color-action-hover);
  background-color: var(--color-action-hover);
}
.text-link, .dry-text-link, .insight-read-link, .article-body a, .rayli-product-prose a {
  color: var(--color-action);
}
.text-link:hover, .dry-text-link:hover, .article-body a:hover, .rayli-product-prose a:hover {
  color: var(--color-action-hover);
}
.text-link > span, .button--outline-dark .button__arrow { color: var(--color-action); }
.site-header.is-scrolled .primary-nav__link:is(:hover, .is-active),
.site-header.is-menu-open .primary-nav__link:is(:hover, .is-active),
.nav-dropdown__panel a:hover { color: var(--color-action); }
#main .rayli-hero--home h1 em { color: var(--color-blue-soft); }
#main .rayli-hero--cover .eyebrow { color: rgba(255,255,255,.9); }
#process .process-tab[aria-selected="true"] {
  color: var(--color-white);
  border-color: var(--color-action);
  background-color: var(--color-action);
}
#process .process-step--flow { border-top: 3px solid var(--color-brand-green); }
.site-footer {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--color-brand-blue) 0 70%, var(--color-brand-green) 70% 100%) 1;
}
.footer-column h2 { color: var(--color-blue-soft); }
.footer-column a:hover, .site-footer__bottom a:hover { color: var(--color-blue-soft); }
:focus-visible { outline-color: var(--color-action); }
:where(.hero, .rayli-hero--cover, .site-footer) :focus-visible { outline-color: var(--color-blue-soft); }

#main .insight-card__link .insight-read-link { color: var(--color-action); }
#main .insight-filter.is-active, #main .insight-pagination button[aria-current="page"] {
  color: var(--color-white); background-color: var(--color-action); border-color: var(--color-action);
}
#main .rayli-catalog__categories a:is(:hover, [aria-current="page"]) { color: var(--color-action); background: var(--color-blue-pale); }
#main .contact-upload__browse { background: var(--color-action); }