@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* The shared site stylesheet uses hidden horizontal overflow, which traps sticky. */
html, body { overflow-x: clip; }

/* The hero inherits the exact header, overlay, buttons and labels of the main prototype. */
.concept-hero-scroll { position: relative; }
.concept-hero { height: 100svh; min-height: 680px; }
.concept-hero__picture { position: absolute; inset: 0; z-index: -4; }
.concept-hero__picture .hero-image { z-index: auto; animation: none; transform: none; }
.concept-hero__canvas { position: absolute; inset: 0; z-index: -4; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; opacity: 0; }
.concept-hero__canvas.is-ready { opacity: 1; }
.concept-hero-scroll[data-motion="enabled"] { height: calc(100svh + clamp(240px, 32svh, 360px)); }
.concept-hero-scroll[data-motion="enabled"] .concept-hero { position: sticky; top: 0; }
.concept-hero .illustration-label { top: 126px; right: 24px; }
.concept-hero .hero-content { position: relative; z-index: 1; }
.concept-hero .hero-bottom { position: relative; z-index: 1; }
.concept-hero h1 { font-weight: 400; letter-spacing: -.045em; line-height: 1.04; }
.concept-hero .lead { font-weight: 400; }
.concept-hero .eyebrow, .concept-hero .nav-links a, .concept-hero .hero-actions .btn, .concept-hero .hero-value, .concept-hero .project-card__label, .concept-hero .project-card__title { font-weight: 600; }
.concept-hero .brand { font-weight: 700; }
.concept-hero .qualifier { font-weight: 400; }

/* The first two sections continue the real project's before/after story. */
.concept-case { position: relative; z-index: 1; padding: 0 0 clamp(72px,7vw,116px) !important; background: #efefe9; }
.concept-case__metrics { color: #f7f6ef; background: #142d26; }
.concept-case__metrics-inner { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; align-items: end; gap: 20px 30px; padding-block: clamp(34px,4vw,58px) 28px; }
.concept-case__metrics-label { grid-column: 1 / -1; margin: 0; color: #bed0c2; font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.concept-case__metrics-label span { padding-inline: 8px; color: #d7ba83; }
.concept-case__facts { display: contents; }
.concept-case__facts span { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 13px; border-top: 1px solid #a5b7a350; color: #d5e1d7; font-size: .78rem; font-weight: 400; line-height: 1.4; }
.concept-case__facts strong { color: #fff; font-size: clamp(1.65rem,2.5vw,2.8rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.12; white-space: nowrap; }
.concept-case__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; min-height: 54px; padding: 0 18px; border: 1px solid #f2f0e594; border-radius: var(--pill); color: #f6f5ec; background: #ffffff0b; font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.concept-case__link:hover, .concept-case__link:focus-visible { color: #142d26; background: #f6f5ec; }
.concept-case__metrics-note { grid-column: 1 / -1; margin: 0; color: #c5d2c7; font-size: .76rem; }
.concept-case__body { padding-top: clamp(68px,6.8vw,112px); }
.concept-case__intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.65fr); align-items: end; gap: 42px; margin-bottom: clamp(28px,3.3vw,52px); }
.concept-case__intro h2 { max-width: 850px; margin: 0; color: #142d26; font-size: clamp(2.6rem,4.7vw,5.5rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.02; text-wrap: balance; }
.concept-case__intro h2 span, .intro-copy h2 span { color: #ad8a55; }
.concept-case__intro > p { max-width: 440px; margin: 0 0 6px; color: #45584f; font-size: clamp(1rem,1.16vw,1.25rem); line-height: 1.55; }
.concept-case__collage { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(265px,.82fr); grid-template-rows: minmax(0,1fr); gap: 15px; align-items: stretch; height: clamp(480px,44vw,620px); }
.concept-case__result { position: relative; min-width: 0; min-height: 0; height: 100%; margin: 0; overflow: hidden; border-radius: 16px; background: #d8ded7; }
.concept-case__result img { width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.concept-case__result figcaption { position: absolute; inset: auto 18px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 17px; border: 1px solid #ffffff56; border-radius: 12px; color: white; background: #11251ddc; }
.concept-case__result figcaption span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.concept-case__result figcaption strong { font-size: .92rem; font-weight: 600; }
.concept-case__papers { min-width: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 15px; }
.concept-case__paper { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #d1d8cd; border-radius: 14px; background: #e6e9e2; }
.concept-case__paper img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .3s ease; }
.concept-case__paper:hover img { transform: scale(1.04); }
.concept-case__paper--drawing img { object-fit: contain; object-position: center top; background: white; }
.concept-case__paper span { position: absolute; right: 10px; bottom: 10px; left: 10px; width: fit-content; max-width: calc(100% - 20px); padding: 8px 11px; border-radius: 6px; color: white; background: #19372cdf; font-size: .64rem; font-weight: 600; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }

.intro-section { padding: clamp(74px,7vw,120px) 0 !important; color: #142d26; background: #e4e9e2; }
.intro-section > .wrap { width: min(1480px, calc(100% - 96px)); }
.intro-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.65fr); align-items: end; gap: 42px; margin-bottom: clamp(28px,3.3vw,52px); }
.intro-heading h2 { max-width: 850px; margin: 0; color: #142d26; font-size: clamp(2.6rem,4.7vw,5.5rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.02; }
.intro-heading .intro-lead { max-width: 440px; margin: 0 0 6px; color: #45584f; font-size: clamp(1rem,1.16vw,1.25rem); line-height: 1.55; }
.intro-section .consultation-grid { grid-template-columns: minmax(0,1.22fr) minmax(350px,.78fr); align-items: start; gap: clamp(22px,3.2vw,52px); }
.intro-section .intro-copy { min-width: 0; }
.intro-section .intro-photo { height: clamp(420px,37vw,540px); border: 1px solid #c5d2c4; border-radius: 16px; background: #314f3f; }
.intro-section .intro-photo img { object-position: center 54%; }
.intro-section .intro-photo figcaption { right: 16px; bottom: 16px; left: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid #ffffff56; border-radius: 11px; background: #11251ddc; font-weight: 600; }
.intro-section .intro-photo figcaption span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.intro-section .intro-photo figcaption strong { font-size: .9rem; font-weight: 600; }
.intro-section .weather-list { gap: 9px; margin: 18px 0 0; }
.intro-section .weather-list span { padding: 8px 13px; border: 1px solid #b8c9b9; color: #285143; background: #ffffff57; font-size: .74rem; font-weight: 600; }
.intro-section .chat-card { border-color: #c8d6c9; border-radius: 16px; box-shadow: 0 20px 48px #1a3d2a1c; }

/* Wide screens need readable supporting copy, not only a larger headline. */
@media (min-width: 1440px) {
  .concept-hero .hero-content { max-width: 1080px; }
  .concept-hero h1 { max-width: 1050px; }
  .concept-hero .eyebrow { font-size: clamp(.95rem, 1vw, 1.12rem); text-shadow: 0 2px 12px rgba(0,0,0,.65); }
  .concept-hero .lead { max-width: 800px; font-size: clamp(1.3rem, 1.3vw, 1.62rem); font-weight: 400; line-height: 1.48; text-shadow: 0 2px 15px rgba(0,0,0,.72); }
  .concept-hero .hero-actions { margin-top: 34px; gap: 16px; }
  .concept-hero .hero-actions .btn { min-height: 62px; padding-inline: 30px; font-size: clamp(.98rem, .96vw, 1.14rem); }
  .concept-hero .hero-actions .btn.ghost { border-color: rgba(255,255,255,.72); background: rgba(12,21,17,.48); }
  .concept-hero .qualifier { max-width: 800px; font-size: clamp(1rem, 1.05vw, 1.2rem); color: rgba(255,255,255,.9); text-shadow: 0 2px 12px rgba(0,0,0,.75); }
  .concept-hero .nav-links a { min-height: 52px; padding-inline: 22px; font-size: clamp(.9rem, .92vw, 1.06rem); }
  .concept-hero .nav-links { background: rgba(20,23,21,.82); backdrop-filter: none; }
  .concept-hero .brand small { font-size: .76rem; }
  .concept-hero .phone { min-width: 185px; min-height: 58px; font-size: 1.2rem; }
  .concept-hero .illustration-label { padding: 8px 12px; font-size: .94rem; font-weight: 700; }
  .concept-hero .hero-value { min-height: 51px; font-size: .88rem; }
  .concept-hero .project-card { grid-template-columns: 108px minmax(0,1fr) 48px; width: 400px; min-height: 124px; }
  .concept-hero .project-card__image { width: 108px; height: 100px; }
  .concept-hero .project-card__label { color: rgba(255,255,255,.85); font-size: .81rem; }
  .concept-hero .project-card__title { font-size: 1.13rem; line-height: 1.13; }
  .concept-case > .wrap, .concept-case__metrics > .wrap { width: min(1480px, calc(100% - 96px)); }
  .concept-case__intro > p { max-width: 530px; font-size: clamp(1.15rem, 1.15vw, 1.38rem); line-height: 1.55; }
  .concept-case .eyebrow { font-size: .94rem; }
  .concept-case__result figcaption span, .concept-case__paper span { font-size: .82rem; }
  .concept-case__result figcaption strong { font-size: 1rem; }
  .concept-case__facts span { font-size: .88rem; }
  .concept-case__facts strong { font-size: clamp(2.15rem, 2.5vw, 2.8rem); }
  .concept-case__link { min-height: 56px; font-size: .9rem; }
  .concept-case__metrics-note { font-size: .82rem; }
}

/* Keep the moving window panels unobstructed on desktop. */
@media (min-width: 981px) {
  .concept-hero::before {
    background:
      linear-gradient(90deg, rgba(4,10,8,.79) 0%, rgba(4,10,8,.51) 30%, rgba(4,10,8,.09) 61%, rgba(4,10,8,.16) 100%),
      linear-gradient(180deg, rgba(4,10,8,.46) 0%, transparent 31%, transparent 66%, rgba(4,10,8,.64) 100%);
  }
  .concept-hero .hero-content {
    align-self: start;
    width: min(570px, 40vw);
    max-width: none;
    margin: clamp(150px, 18vh, 220px) 0 0 clamp(28px, 3.5vw, 70px);
    text-align: left;
  }
  .concept-hero h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(3.15rem, 3.7vw, 4.8rem);
  }
  .concept-hero .lead { max-width: 100%; margin: 22px 0 0; text-wrap: pretty; }
  .concept-hero .hero-actions { justify-content: flex-start; }
  .concept-hero .qualifier { margin: 20px 0 0; }
}

@media (max-width: 980px) {
  .concept-hero-scroll[data-motion="enabled"] { height: auto; }
  .concept-hero-scroll .concept-hero { position: relative !important; height: auto; min-height: max(780px, 100svh); }
  .concept-hero__canvas { display: none; }
  .concept-hero .illustration-label { top: 86px; right: 16px; }
  .concept-case__intro { grid-template-columns: 1fr; gap: 16px; }
  .concept-case__intro > p { max-width: 680px; }
  .concept-case__collage { grid-template-columns: minmax(0,1.5fr) minmax(230px,.8fr); }
  .concept-case__result { min-height: 0; }
  .concept-case__metrics-inner { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .concept-case__link { justify-self: start; }
  .intro-section > .wrap { width: var(--wrap); }
  .intro-heading { grid-template-columns: 1fr; gap: 16px; }
  .intro-heading .intro-lead { max-width: 680px; }
  .intro-section .consultation-grid { grid-template-columns: 1fr; gap: 36px; }
  .intro-section .chat-column { width: min(100%,680px); }
}

@media (max-width: 640px) {
  .concept-hero-scroll .concept-hero { min-height: max(690px, 100svh); }
  .concept-hero h1, .concept-case__intro h2 { font-weight: 600; }
  .concept-hero__picture .hero-image { object-position: 53% center; }
  .concept-hero .illustration-label { top: 86px; font-size: 10px; }
  .concept-case { padding: 0 0 72px !important; }
  .concept-case__metrics-inner { gap: 18px 14px; padding-block: 32px 27px; }
  .concept-case__metrics-label { font-size: .61rem; line-height: 1.5; }
  .concept-case__facts span { font-size: .7rem; }
  .concept-case__facts strong { font-size: clamp(1.55rem,7vw,2rem); }
  .concept-case__facts span:nth-child(3) { grid-column: 1 / -1; }
  .concept-case__link { grid-column: 1 / -1; justify-self: stretch; min-height: 48px; margin-top: 2px; }
  .concept-case__metrics-note { font-size: .67rem; }
  .concept-case__body { padding-top: 64px; }
  .concept-case__intro { margin-bottom: 25px; }
  .concept-case__intro h2 { font-size: clamp(2.25rem, 9.5vw, 3.25rem); }
  .concept-case__intro > p { font-size: .96rem; }
  .concept-case__collage { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 10px; height: auto; }
  .concept-case__result { min-height: 0; aspect-ratio: 1.45; border-radius: 13px; }
  .concept-case__result figcaption { inset: auto 9px 9px; padding: 8px 10px; gap: 3px; }
  .concept-case__result figcaption span { font-size: .54rem; }
  .concept-case__result figcaption strong { font-size: .7rem; }
  .concept-case__papers { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px; }
  .concept-case__paper { aspect-ratio: 1.05; border-radius: 10px; }
  .concept-case__paper span { right: 5px; bottom: 5px; left: 5px; max-width: calc(100% - 10px); padding: 6px; font-size: .52rem; }
  .intro-section { padding: 70px 0 78px !important; }
  .intro-heading { margin-bottom: 25px; }
  .intro-heading h2 { font-size: clamp(2.25rem,9.5vw,3.25rem); font-weight: 600; }
  .intro-heading .intro-lead { font-size: .96rem; }
  .intro-section .weather-list { margin-top: 16px; }
  .intro-section .intro-photo { height: auto; aspect-ratio: 1.35; border-radius: 13px; }
  .intro-section .intro-photo figcaption { right: 9px; bottom: 9px; left: 9px; padding: 8px 10px; flex-wrap: wrap; gap: 3px; }
  .intro-section .intro-photo figcaption span { font-size: .55rem; }
  .intro-section .intro-photo figcaption strong { font-size: .7rem; }
  .intro-section .consultation-grid { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-hero-scroll[data-motion="enabled"] { height: auto; }
  .concept-hero-scroll .concept-hero { position: relative !important; }
  .concept-hero__canvas { display: none; }
  .concept-case__paper img { transition: none; }
}


/* Desktop header sizing requested by the owner: keep compact layouts intact. */
@media (min-width: 981px) {
  .concept-hero .nav {
    width: min(1370px, calc(100% - 48px));
    min-height: 124px;
    gap: clamp(16px, 1.6vw, 24px);
  }
  .concept-hero .brand {
    max-width: none;
    font-size: clamp(2.15rem, 3vw, 3.25rem);
    white-space: nowrap;
  }
  .concept-hero .brand small { margin-top: 9px; font-size: .78rem; }
  .concept-hero .phone {
    min-width: clamp(210px, 16vw, 270px);
    min-height: 76px;
    padding-inline: 34px;
    font-size: clamp(1.3rem, 1.55vw, 1.65rem);
  }
}