/* ==========================================================================
   brand.css · every page, main website and /3d
   Brand headlines (styleguide 7.2) and underlined buttons.
   The build marks each section headline: hl-2 = two sentences, hl-1 = one.
   ========================================================================== */

/* --- Two sentences: line 1 large, sentence 2 on its own line, much smaller,
   white on the lila bar. ------------------------------------------------- */
body.qptr :is(h1, h2).hl-2 > span:first-child { display: block; }
body.qptr :is(h1, h2).hl-2 > span:last-child {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: .55em;
  padding: .32em .6em .34em;
  text-wrap: wrap;
  font-family: var(--font-secondary);
  font-weight: 300;
  font-size: .46em;
  line-height: 1.2;
  letter-spacing: -.005em;
  background: var(--lila) !important;
  color: var(--weiss) !important;
}
body.qptr :is(h1, h2).hl-2 > span:last-child :is(.lila-block, .mint-block, .ul-orange) {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* --- One sentence: no lila at all (the build unwraps the highlight; this
   catches anything rendered later). --------------------------------------- */
body.qptr :is(h1, h2).hl-1 .lila-block {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* --- Underlined buttons: always the orange brush, never mint. ------------ */
body.qptr .cta--secondary:not(:has(.ul-orange)),
body.qptr .cta--quiet {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2.4,9.1%20C22,6.2%2041,10.4%2063,7.9%20C86,5.2%20108,10.6%20131,8.2%20C152,6.0%20172,10.2%20197.4,6.9%20L197.8,10.4%20C171,13.9%20152,9.6%20131,11.8%20C108,14.1%2086,8.8%2063,11.5%20C41,14.0%2022,9.9%202.6,12.7%20Z' fill='%23ff5e1f'/%3E%3C/svg%3E") !important;
}

/* --- Spatial intelligence: the qentin film inside a laptop --------------- */
body.qptr .qf-laptop { max-width: 50rem; margin: clamp(2rem, 5vw, 3.5rem) auto 0; background: none; }
body.qptr .qf-laptop__screen {
  position: relative;
  padding: 2.2% 2.2% 3%;
  background: #0b1717;
  border-radius: 1.1rem 1.1rem .35rem .35rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(11,23,23,.45);
}
body.qptr .qf-laptop__screen::before {
  content: ""; position: absolute; top: .9%; left: 50%; width: .4rem; height: .4rem;
  border-radius: 50%; background: #2a3a3a; transform: translateX(-50%);
}
body.qptr .qf-laptop__screen video { width: 100%; height: auto; display: block; border-radius: .2rem; }
body.qptr .qf-laptop__base {
  position: relative;
  width: 112%; margin-left: -6%; height: clamp(.7rem, 1.6vw, 1.1rem);
  background: linear-gradient(#d9dede, #b9c1c1 70%, #9aa4a4);
  border-radius: 0 0 1.4rem 1.4rem / 0 0 .9rem .9rem;
  box-shadow: 0 18px 30px -18px rgba(11,23,23,.5);
}
body.qptr .qf-laptop__base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 40%;
  transform: translateX(-50%); background: #a9b2b2; border-radius: 0 0 .5rem .5rem;
}
body.qptr .qf-laptop + .qf-video__caption, body.qptr #quentin .qf-video__caption { text-align: center; }

/* --- Company: location photo with credit ---------------------------------- */
body.qptr .place__photo { margin: 0; align-self: center; }
body.qptr .place__photo img { display: block; width: 100%; height: auto; border-radius: .25rem; }
body.qptr .place__credit { margin-top: .6rem; opacity: .65; }

/* --- One reference only: the card does not stretch over two columns ------ */
body.qptr .two--single { grid-template-columns: minmax(0, 1fr) !important; }
body.qptr .two--single > div { max-width: 34rem; }
body.qptr .refcard div.refcard__link { cursor: default; }

/* --- Homepage 09: IKEA logo ----------------------------------------------- */
body.qptr .credit__logo--ikea { height: 2.6rem; }
@media (min-width: 48rem) { body.qptr .two--place:has(.place__photo) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(2rem, 5vw, 5rem); } }

/* --- Footer: compact, one row of columns on desktop ----------------------- */
body.qptr .site-footer { padding-top: clamp(2.5rem, 5vw, 3.5rem) !important; padding-bottom: 1.5rem !important; }
body.qptr .site-footer__top { padding-bottom: 1.25rem !important; align-items: center; }
body.qptr .site-footer__brand .logo { --logo-w: 8.5rem !important; }
body.qptr .site-footer__claim { font-size: 1rem !important; }
body.qptr .site-footer__grid { padding-block: 1.5rem !important; row-gap: 1.5rem !important; }
body.qptr .site-footer__title { margin-bottom: .5rem !important; }
body.qptr .site-footer__col ul { gap: 0 !important; }
body.qptr .site-footer__col li { line-height: 1.35; }
body.qptr .site-footer__col .site-footer__link { padding-block: .12rem !important; }
body.qptr .site-footer__contact, body.qptr .site-footer__social { margin-top: 0 !important; }
body.qptr .site-footer__social { margin-top: .6rem !important; }
body.qptr .site-footer__bottom { padding-top: 1rem !important; }
@media (min-width: 60rem) {
  body.qptr .site-footer__grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; column-gap: 1.25rem !important; }
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  body.qptr .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* --- Homepage 07: three reasons in one row -------------------------------- */
@media (min-width: 48rem) { body.qptr .reasons--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 60rem) { body.qptr .site-footer__claim { white-space: nowrap; } }

/* --- Success stories: project archive as a light table -------------------- */
body.qptr .archive { margin-top: clamp(1.5rem, 3vw, 2.5rem); overflow-x: auto; }
body.qptr .archive__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small, .9375rem); }
body.qptr .archive__table th { text-align: left; font-family: var(--font-secondary); font-weight: 400; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; opacity: .6; padding: 0 1rem .75rem 0; border-bottom: 1px solid currentColor; }
body.qptr .archive__table td { padding: .9rem 1rem .9rem 0; vertical-align: top; border-bottom: 1px solid rgba(11, 23, 23, .12); }
body.qptr .archive__table td:first-child { font-weight: 500; }
body.qptr .archive__table td:last-child, body.qptr .archive__table th:last-child { white-space: nowrap; padding-right: 0; }
@media (max-width: 47.99rem) {
  body.qptr .archive__table thead { display: none; }
  body.qptr .archive__table tr { display: block; padding: .9rem 0; border-bottom: 1px solid rgba(11, 23, 23, .12); }
  body.qptr .archive__table td { display: block; padding: .1rem 0; border: 0; }
  body.qptr .archive__table td:not(:first-child) { opacity: .75; }
}

/* --- qentin page ---------------------------------------------------------- */
/* The live demo is the chat from the homepage; its intro and outro belong to
   the homepage, the qentin page has its own copy around it. */
body.qptr.page-qentin .qentin-demo { padding-block: 0 clamp(2rem, 5vw, 4rem); }
body.qptr.page-qentin .qentin-demo__note { margin: 0 0 1rem; opacity: .7; }
body.qptr.page-qentin .qentin-demo .quentin-intro,
body.qptr.page-qentin .qentin-demo .quentin-outro { display: none !important; }
body.qptr .grid--two { display: grid !important; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important; }
body.qptr .qentin-more { margin-top: 1rem; text-align: center; }
/* The point cloud behind the closing button belongs to the homepage only. */
body.qptr:not(.page-home) .dt-capture-layer { display: none !important; }

/* qentin: questions you can ask, as chat bubbles like in the qentin film.
   Each message slides in while it scrolls into view (--fill, start.js). */
body.qptr .qq { display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.4rem); max-width: 56rem; margin: clamp(1.5rem, 4vw, 3rem) auto clamp(1.5rem, 3vw, 2.5rem); }
body.qptr .qq__msg {
  --fill: 0;
  display: flex; flex-direction: column; align-items: flex-end; align-self: flex-end; max-width: min(100%, 40rem);
  opacity: calc(.08 + var(--fill) * .92);
  transform: translateY(calc((1 - var(--fill)) * 1.5rem)) scale(calc(.96 + var(--fill) * .04));
  transform-origin: right bottom;
}
body.qptr .qq__msg:nth-child(odd) { margin-right: clamp(0rem, 6vw, 5rem); }
body.qptr .qq__msg--bot { align-items: flex-start; align-self: flex-start; transform-origin: left bottom; margin-right: 0 !important; }
body.qptr .qq__role { font-family: var(--font-secondary); font-size: .8rem; opacity: .6; margin: 0 .9rem .3rem; }
body.qptr .qq__bubble {
  position: relative; margin: 0; padding: .7em 1.05em .75em;
  font-family: var(--font-secondary); font-size: clamp(1.15rem, 2.4vw, 1.9rem); line-height: 1.25;
  background: #e4e7e7; color: var(--schwarz, #0b1717); border-radius: 1.2em 1.2em .35em 1.2em;
  box-shadow: 0 10px 24px -18px rgba(11, 23, 23, .45);
}
body.qptr .qq__msg--bot .qq__bubble { background: var(--mint, #44feb2); border-radius: 1.2em 1.2em 1.2em .35em; }
body.qptr .qq__lead { max-width: 42rem; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
@media (prefers-reduced-motion: reduce) { body.qptr .qq__msg { --fill: 1; } }
/* Note on sensitive client data: a calm box with a lock, no rule. */
body.qptr .qentin-secret {
  display: flex; gap: .8rem; align-items: flex-start;
  max-width: 40rem; margin: 1.5rem auto 0; padding: 1rem 1.25rem;
  border: 0; border-radius: .9rem; background: rgba(89, 109, 255, .08); text-align: left; line-height: 1.45;
}
body.qptr .qentin-secret::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem;
  background: var(--lila, #596dff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10H7zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10H7zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Requirements: what qentin needs (check) and what it does not (cross). */
body.qptr .qentin-req { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48rem) { body.qptr .qentin-req { grid-template-columns: 1fr 1fr; } }
body.qptr .qentin-req__col { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 0; background: rgba(68, 254, 178, .14); }
body.qptr .qentin-req__col--no { background: rgba(11, 23, 23, .04); }
body.qptr .qentin-req__title { margin: 0 0 1rem; }
body.qptr .qentin-req__list { list-style: none; margin: 0; padding: 0; }
body.qptr .qentin-req__list li { position: relative; padding-left: 2rem; margin-bottom: .75rem; line-height: 1.45; }
body.qptr .qentin-req__list li::before {
  content: ""; position: absolute; left: 0; top: .1rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--schwarz, #0b1717) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344feb2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat;
}
body.qptr .qentin-req__col--no .qentin-req__list li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5e1f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 80% no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(255, 94, 31, .5);
}

/* qentin: no rule between the lead headline and the steps. */
body.qptr.page-qentin #so-funktionierts .steps { border-top: 0 !important; }
/* Functions (qentin, spatial intelligence): no thin rules between the cards. */
body.qptr .funcs > .func { border: 0 !important; }

/* --- Careers: job list links and the application form --------------------- */
body.qptr .person__link { display: block; color: inherit; text-decoration: none; }
body.qptr .person__link:hover .person__name, body.qptr .person__link:focus-visible .person__name { text-decoration: underline; text-underline-offset: .2em; }
body.qptr .apply-form { max-width: 52rem; }
body.qptr .apply-form__group { border: 0; padding: 0; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
body.qptr .apply-form__group legend { padding: 0; margin-bottom: 1rem; }
body.qptr .apply-form .form__grid { display: grid; gap: 1rem 1.25rem; }
@media (min-width: 40rem) { body.qptr .apply-form .form__grid { grid-template-columns: 1fr 1fr; } body.qptr .apply-form .field--wide { grid-column: 1 / -1; } }
body.qptr .apply-form .field { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
body.qptr .apply-form .field__input { width: 100%; font: inherit; padding: .75rem .9rem; border: 1px solid rgba(11, 23, 23, .25); background: #fff; color: var(--schwarz, #0b1717); border-radius: 0; }
body.qptr .apply-form .field__input:focus { outline: 2px solid var(--lila, #596dff); outline-offset: 1px; }
body.qptr .apply-form .field__file { padding: .55rem .6rem; background: rgba(89, 109, 255, .05); }
body.qptr .apply-form__hint { margin: -.4rem 0 1rem; opacity: .7; }
body.qptr .apply-form__consent { display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 1.5rem; max-width: 44rem; line-height: 1.45; }
body.qptr .apply-form__consent input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--lila, #596dff); }
body.qptr .apply-form__consent a { color: inherit; text-decoration: underline; }
body.qptr .apply-form__error { padding: .9rem 1.1rem; margin: 0 0 1.5rem; background: rgba(255, 94, 31, .1); color: var(--schwarz, #0b1717); }
body.qptr .apply-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
body.qptr .apply-form .form__submit { cursor: pointer; }
body.qptr .apply-form .form__submit { border: 0; font-family: inherit; cursor: pointer; }
/* No newsletter anywhere (the markup is removed by the build; this is the safety net). */
body.qptr .site-footer__news { display: none !important; }

/* Button groups built outside Astro (careers pages): same spacing as the site's own. */
body.qptr .cta-group:not([data-astro-cid-4zgmmfpt]) { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.25rem, 3vw, 2rem); }

/* Careers: photo gallery and the photo on each job page. */
body.qptr .gal { display: grid; gap: clamp(.5rem, 1.2vw, 1rem); margin-top: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 22vw, 15rem); grid-auto-flow: dense; }
@media (min-width: 60rem) { body.qptr .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.qptr .gal__item { margin: 0; overflow: hidden; background: rgba(11, 23, 23, .05); }
body.qptr .gal__item--wide { grid-column: span 2; }
body.qptr .gal__item--tall { grid-row: span 2; }
body.qptr .gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
body.qptr .gal__item:hover img { transform: scale(1.03); }
body.qptr .job-photo { padding-block: 0 !important; }
body.qptr .job-photo__figure { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; }
body.qptr .job-photo__figure img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center 35%); display: block; }

/* Announcement banner (BIM specification sheet): lila on subpages, so it
   stands apart from the dark menu; the homepage keeps it black. */
body.qptr:not(.page-home) .announce { background: var(--lila, #596dff) !important; color: var(--weiss, #fff) !important; border-color: transparent !important; }
body.qptr:not(.page-home) .announce a,
body.qptr:not(.page-home) .announce * { color: var(--weiss, #fff) !important; }

/* --- Section headlines: one size everywhere ---------------------------------
   The film sections (path, lifecycle, spatial intelligence / qentin) and the
   closing call brought their own, larger headline sizes. All section
   headlines now use the size of the regular sections (t-h1). */
body.qptr .dt h2.hl,
body.qptr .path-section.is-pinned .path-intro h2.hl,
body.qptr .closing__title--big {
  font-size: var(--fs-h1, clamp(2rem, 3.6vw, 3.5rem)) !important;
  line-height: var(--lh-h1, 1.08) !important;
  letter-spacing: var(--tracking-h1, -0.02em) !important;
}