/*
 * CLARIFIED enterprise layout layer
 *
 * Loaded last on the public (non-IT) site. This file owns layout geometry only:
 * the established colour, typography and component behaviour remain in the
 * page-specific stylesheets.
 */

:root {
  --enterprise-max: 1840px;
  --enterprise-gutter: clamp(20px, 2.5vw, 48px);
  --enterprise-section-space: clamp(52px, 3.6vw, 80px);
  --enterprise-reading-width: 70ch;
  --enterprise-grid-gap: clamp(16px, 1.6vw, 30px);
}

body,
main,
header,
footer,
section,
article,
nav,
aside,
form,
figure,
div {
  min-width: 0;
}

img,
video,
iframe,
svg {
  max-inline-size: 100%;
}

/* One fluid alignment line shared by the established page systems. */
.container,
.wrap {
  width: min(var(--enterprise-max), calc(100% - (var(--enterprise-gutter) * 2))) !important;
  max-width: none !important;
  margin-inline: auto;
}

main p {
  max-inline-size: var(--enterprise-reading-width);
}

.section-head,
.about-section-head {
  max-width: min(100%, 78ch);
}

.section-head p,
.section-lead,
.widget-lead,
.hero-redesign .lead,
.detail-hero .lead,
.service-hero .hero-copy p,
.about-brand-copy .lead,
.about-story-grid > div > p,
.cta-band p,
.knowledge-author p {
  max-inline-size: var(--enterprise-reading-width);
}

/* Header geometry: spacious at wide sizes, compact before it can collide. */
.topbar-redesign .container {
  gap: clamp(18px, 2vw, 38px);
}

.nav-redesign .container {
  gap: clamp(16px, 1.7vw, 32px);
}

.nav-redesign .nav-menu {
  min-width: 0;
  gap: clamp(13px, 1.25vw, 26px);
}

.nav-redesign .nav-menu > li,
.nav-redesign .nav-menu a,
.nav-redesign .nav-menu button,
.lite-links a {
  white-space: nowrap;
}

.lite-nav {
  gap: clamp(14px, 1.5vw, 28px);
}

.lite-links {
  min-width: 0;
  justify-content: center;
  gap: clamp(13px, 1.25vw, 25px);
}

/* Primary teal actions retain a WCAG AA foreground across legacy cascades. */
.nav-redesign .nav-cta,
.detail-hero .cta-primary,
.detail-page-main .cta-primary {
  color: #fff !important;
}

/* Heroes use the additional canvas without turning headings into billboards. */
.hero-redesign h1 {
  max-inline-size: 17ch;
  font-size: clamp(2.6rem, 3.5vw, 4.45rem) !important;
}

.detail-hero h1 {
  max-inline-size: 17ch;
  font-size: clamp(2.55rem, 3.8vw, 4.8rem);
}

.service-hero .hero-copy {
  max-width: 880px;
}

.service-hero .hero-copy h1 {
  max-inline-size: 18ch;
  font-size: clamp(2.45rem, 3.55vw, 4.55rem);
}

.about-brand-copy h1 {
  max-inline-size: 18ch;
  font-size: clamp(2.7rem, 4vw, 4.65rem);
}

.blog-hero-content {
  max-width: min(100%, 980px);
}

.blog-hero h1 {
  max-inline-size: 18ch;
  font-size: clamp(2.55rem, 3.8vw, 4.75rem);
}

/* Proportional vertical rhythm across home, detail and resource templates. */
.redesign-home section,
.redesign-home .brand-architecture,
.redesign-home .funnel-map,
.redesign-home .project-integration,
.detail-section,
.section,
.about-brand-section {
  padding-block: var(--enterprise-section-space) !important;
}

.detail-section.compact {
  padding-block-start: clamp(38px, 3vw, 58px) !important;
}

.about-brand-hero {
  padding-block: clamp(56px, 4.4vw, 84px);
}

.contact-section,
.site-widget-section,
.blog-tools {
  padding-block: clamp(48px, 3.8vw, 76px) !important;
}

/* Honour consent state without reserving the map's 400px iframe box. */
.map-section iframe[hidden] {
  display: none !important;
}

.contact-grid {
  align-items: start;
}

.contact-form form {
  height: auto;
}

/* Fluid grids keep useful card widths rather than scaling a fixed 1200px row. */
.cards,
.detail-grid,
.knowledge-category-grid,
.knowledge-resource-grid,
.case-services-grid,
.solar-pillar-grid,
.solar-related-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--enterprise-grid-gap);
}

.process-grid,
.route-grid,
.solar-process-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--enterprise-grid-gap);
}

.about-proof-grid,
.about-collaboration-grid,
.case-signals,
.steps {
  gap: var(--enterprise-grid-gap);
}

.service-insight-grid,
.contact-grid,
.about-brand-hero-grid,
.about-story-grid,
.about-interactive,
.brand-architecture-grid,
.integration-hero,
.premium-panel,
.widget,
.it-case-card,
.it-mini-widget,
.solar-case,
.integrator-config {
  gap: clamp(24px, 3vw, 56px);
}

.service-media-card img,
.service-video video,
.post-thumb img,
.knowledge-resource-card img,
.card img {
  width: 100%;
  height: auto;
}

/* The media figure follows its image instead of stretching with the copy card. */
.service-insight-grid > .service-media-card {
  align-self: start;
  height: fit-content;
}

.detail-card,
.card,
.knowledge-category,
.knowledge-resource-card,
.funnel-card,
.vertical-card,
.about-vertical-card,
.about-proof-grid article,
.about-collaboration-grid article,
.about-trust-grid article {
  container-type: inline-size;
}

/* Article and case-study prose deliberately remains a reading column. */
.knowledge-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(30px, 4vw, 72px);
}

.knowledge-main,
.knowledge-summary,
.knowledge-body,
.case-narrative,
.case-result,
.customs-post,
.blog-main-list {
  min-width: 0;
}

.knowledge-summary,
.knowledge-body,
.case-narrative > *,
.case-result > *,
.customs-post > p,
.customs-post > ul,
.customs-post > ol {
  max-inline-size: 78ch;
}

.blog-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 24%);
  gap: clamp(28px, 3vw, 56px);
}

.case-study-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(24px, 3vw, 52px);
}

/*
 * Short editorial groups keep a useful card measure on large screens. The
 * page container remains wide; only the individual tracks stop stretching.
 */
@media (min-width: 981px) {
  .cards:not(.case-hub-grid),
  .detail-grid,
  .case-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
  }

  .knowledge-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
  }

  .case-hub-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 560px));
    justify-content: start;
  }

  .case-hub-grid.single-case {
    max-width: 560px;
  }

  .about-vertical-grid {
    grid-template-columns: repeat(2, minmax(0, 720px));
    justify-content: start;
  }

  .about-proof-grid,
  .about-collaboration-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
  }

  .about-trust-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 680px));
    justify-content: start;
  }

  .section .steps,
  .case-signals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: start;
  }
}

@media (min-width: 1600px) {
  .cards:not(.case-hub-grid),
  .detail-grid,
  .case-services-grid,
  .knowledge-resource-grid {
    grid-template-columns: repeat(3, minmax(0, 520px));
  }

  .about-proof-grid,
  .about-collaboration-grid {
    grid-template-columns: repeat(3, minmax(0, 540px));
  }

  .section .steps,
  .case-signals {
    grid-template-columns: repeat(3, minmax(0, 500px));
  }
}

/* The standalone promo page participates in the same desktop alignment. */
body > .nav {
  min-height: 78px;
  height: auto;
  padding-inline: max(var(--enterprise-gutter), calc((100% - var(--enterprise-max)) / 2));
  gap: 24px;
}

.hero > .hero-copy {
  width: min(760px, calc(100% - (var(--enterprise-gutter) * 2)));
  margin-inline-start: max(var(--enterprise-gutter), calc((100vw - var(--enterprise-max)) / 2));
}

.trust-strip,
.intro,
.service-grid,
.process,
.packages,
body > main > .contact {
  width: min(var(--enterprise-max), calc(100% - (var(--enterprise-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
}

.intro,
.service-grid,
.process,
.packages {
  padding-inline: 0;
}

body > main > .contact {
  box-sizing: border-box;
}

@media (min-width: 1500px) {
  .redesign-home .pillars,
  .redesign-home .projects-grid,
  .redesign-home .blog-grid,
  .case-services-grid,
  .knowledge-resource-grid {
    gap: clamp(22px, 1.55vw, 34px);
  }

  .detail-card,
  .card,
  .funnel-card,
  .vertical-card,
  .about-vertical-card {
    padding: clamp(24px, 1.65vw, 32px);
  }

  .service-insight-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(420px, 680px);
    justify-content: space-between;
    gap: clamp(40px, 4vw, 76px);
  }

  .footer-grid,
  .detail-footer .footer-grid,
  .lite-footer .footer-grid,
  .site-footer-redesign .footer-grid {
    gap: clamp(28px, 3vw, 58px);
  }
}

@media (max-width: 1499px) and (min-width: 981px) {
  .nav-redesign .container {
    gap: 10px;
  }

  .nav-redesign .brand img {
    width: clamp(158px, 12vw, 180px);
  }

  .nav-redesign .nav-menu {
    flex: 0 1 auto;
    margin-inline: 0 auto;
    gap: clamp(8px, .75vw, 11px);
    font-size: clamp(.76rem, .9vw, .84rem);
  }

  .nav-redesign .nav-menu > li {
    flex: 0 0 auto;
  }

  .nav-redesign .nav-actions {
    gap: 6px;
  }

  .nav-redesign .it-cta,
  .nav-redesign .nav-cta {
    padding-inline: 9px;
    font-size: .74rem;
  }

  .nav-redesign .language-toggle,
  .nav-redesign .language-selector {
    width: 38px;
    height: 38px;
  }
}

/* The lightweight resource header collapses before its links can wrap/clip. */
@media (max-width: 1080px) {
  .lite-nav {
    min-height: 64px;
    flex-wrap: wrap;
    padding-block: 9px;
  }

  .lite-brand img {
    width: 156px;
  }

  .lite-header .menu-btn {
    display: block;
    margin-left: auto;
  }

  .lite-header .lite-links {
    display: none;
    width: 100%;
    order: 5;
    margin: 0;
    padding: 10px 0 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .lite-header.open .lite-links {
    display: flex;
  }

  .lite-header .lite-links a {
    width: 100%;
    padding: 7px 2px;
    white-space: normal;
  }

  .lite-actions {
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  .knowledge-layout,
  .blog-layout,
  .case-study-layout {
    grid-template-columns: 1fr;
  }

  .knowledge-aside {
    position: static;
  }

  .nav-redesign .nav-menu a,
  .nav-redesign .nav-menu button {
    white-space: normal;
  }

  .service-insight-grid,
  .contact-grid,
  .about-brand-hero-grid,
  .about-story-grid,
  .about-interactive,
  .brand-architecture-grid,
  .integration-hero,
  .premium-panel,
  .widget,
  .it-case-card,
  .it-mini-widget,
  .solar-case,
  .integrator-config {
    gap: clamp(20px, 4vw, 34px);
  }
}

@media (max-width: 768px) {
  :root {
    --enterprise-section-space: clamp(50px, 14vw, 68px);
  }

  .container,
  .wrap {
    width: min(var(--enterprise-max), calc(100% - (var(--enterprise-gutter) * 2))) !important;
  }

  .hero-redesign h1,
  .detail-hero h1,
  .service-hero .hero-copy h1,
  .about-brand-copy h1,
  .blog-hero h1 {
    max-inline-size: 14ch;
    font-size: clamp(2.15rem, 10vw, 3.1rem) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere;
  }

  .redesign-home section,
  .redesign-home .brand-architecture,
  .redesign-home .funnel-map,
  .redesign-home .project-integration,
  .detail-section,
  .section,
  .about-brand-section,
  .contact-section,
  .site-widget-section,
  .blog-tools {
    padding-block: var(--enterprise-section-space) !important;
  }

  .cards,
  .detail-grid,
  .process-grid,
  .route-grid,
  .knowledge-category-grid,
  .knowledge-resource-grid,
  .case-services-grid,
  .solar-pillar-grid,
  .solar-related-grid,
  .solar-process-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .project-teaser-actions {
    gap: 10px;
  }

  .hero-actions > a,
  .hero-actions > button {
    max-width: 100%;
  }

  main .cta,
  main .primary-link,
  main .ghost-link,
  main .card-link {
    max-width: 100%;
    min-width: 0;
    padding-inline: 16px;
    white-space: normal !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .day4-funnel-rail-inner {
    max-width: 100%;
    padding-inline: 0;
  }

  body > .nav {
    padding: 14px var(--enterprise-gutter);
  }

  .hero > .hero-copy {
    margin-inline-start: var(--enterprise-gutter);
  }

  body > main > .contact {
    width: calc(100% - (var(--enterprise-gutter) * 2)) !important;
    max-width: none !important;
    padding: 26px 20px !important;
  }
}

@media (max-width: 420px) {
  .nav-redesign .container {
    width: calc(100% - (var(--enterprise-gutter) * 2)) !important;
  }

  /* Clarified IT is also present in the controlled mobile panel. */
  .redesign-home .nav-actions > .it-cta {
    display: none !important;
  }

  .lite-actions .lite-cta {
    display: none;
  }

  .detail-card,
  .card,
  .knowledge-summary,
  .about-vertical-card,
  .about-interactive,
  .cta-band,
  .premium-panel,
  .service-widget-card {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Static equivalent of the customs motion scene for reduced-motion users. */
  .redesign-home .hero-redesign {
    background-color: #071c22 !important;
    background-image: url("img/hero-customs-simple.webp") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}