/* Home masthead and booking illustration. The offer element owns the campaign dates. */
.pf-site {
  --pf-mast: #edf0e5;
  --pf-mast-text: #16231e;
  --pf-mast-secondary: #425647;
  --pf-mast-rule: #bac6b6;
  --pf-mast-action: #1f442e;
  --pf-mast-action-text: #fff;
  --pf-lime: #deff75;
}

body:has(pm-launch-offer[data-phase="active"]) .pf-site {
  --pf-mast: #16231e;
  --pf-mast-text: #faf8ee;
  --pf-mast-secondary: #becbbe;
  --pf-mast-rule: #465749;
  --pf-mast-action: #deff75;
  --pf-mast-action-text: #16231e;
}

.pf-announcement {
  display: grid;
  place-items: center;
  min-height: 38px;
  background: #dce5d7;
  color: #18291f;
  font: 600 12px/1.35 Arial, sans-serif;
}

.pf-announcement .pf-edition-note,
.pf-brand .pf-edition-stamp { display: none; }

body:has(pm-launch-offer[data-phase="active"]) .pf-announcement { background: var(--pf-lime); }
body:has(pm-launch-offer[data-phase="active"]) .pf-evergreen-note { display: none; }

body:has(pm-launch-offer[data-phase="active"]) .pf-edition-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 38px;
}

.pf-edition-note b { text-transform: uppercase; letter-spacing: .09em; }
.pf-edition-note b::after { content: "/"; margin-left: 11px; color: #52632b; }
.pf-edition-note:hover span:first-of-type { text-decoration: underline; }

.pf-masthead,
.pf-hero-shell { background-color: var(--pf-mast); color: var(--pf-mast-text); }
.pf-masthead .pf-nav { height: 92px; border-color: var(--pf-mast-rule); }
.pf-masthead .pf-brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.pf-masthead .pf-brand img { width: 76px; height: 60px; }

body:has(pm-launch-offer[data-phase="active"]) .pf-brand img { filter: brightness(0) invert(1); }
body:has(pm-launch-offer[data-phase="active"]) .pf-brand .pf-edition-stamp {
  display: block;
  color: var(--pf-lime);
  border: 1px solid currentColor;
  font: 800 10px/.96 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .055em;
  padding: 5px 6px;
  transform: rotate(-7deg);
}

.pf-masthead .pf-nav nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pf-masthead .pf-nav-button { background: transparent; border-color: var(--pf-mast-rule); color: var(--pf-mast-text); }

.pf-hero-shell .pf-hero { padding: clamp(42px, 5vw, 82px) 0; grid-template-columns: 1.03fr 1fr; }
.pf-hero-copy .pf-kicker,
.pf-process .pf-kicker { text-transform: uppercase; letter-spacing: .13em; }
.pf-hero-copy .pf-dot { background: var(--pf-mast-action); }
.pf-hero-copy h1 { font-size: clamp(47px, 5.8vw, 88px); line-height: .98; font-weight: 600; margin: 24px 0; }
.pf-hero-copy h1 span {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  font-style: italic;
  letter-spacing: -.058em;
  color: var(--pf-mast-secondary);
}
.pf-hero-copy .pf-lead { color: var(--pf-mast-secondary); max-width: 420px; line-height: 1.6; }
.pf-hero-copy .pf-button-primary {
  border-radius: 3px;
  color: var(--pf-mast-action-text) !important;
  background: var(--pf-mast-action);
}
.pf-hero-copy .pf-button-primary:hover { filter: brightness(.92); }
.pf-hero-copy .pf-text-link { color: var(--pf-mast-text); border-color: var(--pf-mast-rule); }
.pf-hero-copy .pf-hero-foot { color: var(--pf-mast-secondary); max-width: 390px; }
.pf-hero-copy .pf-hero-foot a { text-decoration: underline; text-underline-offset: 2px; }
.pf-masthead a:focus-visible,
.pf-hero-shell a:focus-visible { outline: 3px solid #a3ba5a; outline-offset: 3px; }
.pf-workcard-time a:focus-visible { outline-color: #385b3b; }

.pf-demo-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 50px);
  border: 1px solid var(--pf-mast-rule);
  border-radius: 6px;
  background-image: radial-gradient(var(--pf-mast-rule) 1px, transparent 1.2px);
  background-size: 13px 13px;
}
.pf-workcard {
  position: relative;
  width: 100%;
  max-width: 465px;
  background: #f7f6ee;
  color: #17271d;
  border: 1px solid #68806b;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 4px 5px 0 #879b7d, 5px 6px 0 #24372b;
}
.pf-workcard-head,
.pf-workcard-time > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf-workcard-head { padding: 10px 18px; font: 700 13px/1.4 Arial,sans-serif; }
.pf-workcard-head small { font-size: 10px; font-weight: 500; color: #495b4a; }
.pf-workcard-head i {
  display: inline-block; height: 11px; width: 11px; margin-right: 4px;
  border: 2px solid currentColor; transform: rotate(45deg); vertical-align: -1px;
}

.pf-workcard-plate { position: relative; isolation: isolate; overflow: hidden; background: #283f33; color: #fafaf2; padding: clamp(16px, 2vw, 26px); }
.pf-workcard-plate > p,
.pf-workcard-time > div > span { font: 600 10px/1.35 Arial,sans-serif; text-transform: uppercase; letter-spacing: .13em; }
.pf-workcard-plate > p { color: #d9ebcb; }
.pf-workcard-plate h2 { position: relative; width: fit-content; font-size: clamp(23px, 2.55vw, 39px); margin: 21px 0 10px; z-index: 1; }
.pf-workcard-plate a,
.pf-workcard-time a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 30px; gap: 5px; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.pf-service-drawing { position: absolute; width: 44%; height: 86%; right: 1%; top: 7%; color: #d6e1c4; }
.pf-drawing-air { color: #c6ec91; }
.pf-workcard-time { padding: 16px clamp(16px, 2vw, 26px) 20px; color: #1c3324; }
.pf-workcard-time > div > span { color: #475f4a; }
.pf-workcard-time > p { font-size: 21px; font-weight: 600; letter-spacing: -.04em; margin: 4px 0 9px; }
.pf-workcard-time ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pf-workcard-time li { display: inline-block; padding: 5px 8px; border: 1px solid #b5c2ac; border-radius: 3px; color: #314432; font-size: 11px; }
.pf-workcard-time li:first-child { background: #dce8bd; border-color: #91a96f; }

.pf-process .pf-section-intro h2 { font-size: clamp(36px, 4.3vw, 62px); }
.pf-process .pf-section-intro .pf-kicker { color: #526950; }
.pf-process .pm-delivery-items { margin-top: clamp(24px, 3vw, 42px); }

@media (prefers-reduced-motion: no-preference) {
  .pf-workcard { animation: pf-present-card 780ms cubic-bezier(.2,.7,.25,1) both; }
  .pf-drawing-air path { stroke-dasharray: 1; animation: pf-draw-air 850ms ease-out 290ms both; }
  .pf-workcard-time li:first-child { animation: pf-choose-slot 450ms ease-out 900ms backwards; }
}
@keyframes pf-present-card { from { transform: translateY(10px) rotate(-1.4deg); } to { transform: none; } }
@keyframes pf-draw-air { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pf-choose-slot { from { background-color: transparent; } }

@media (max-width: 900px) {
  .pf-hero-shell .pf-hero { gap: 28px; }
  .pf-demo-stage { padding: 18px; }
}
@media (max-width: 760px) {
  .pf-masthead .pf-nav { height: 78px; }
  .pf-masthead .pf-brand { gap: 6px; }
  .pf-masthead .pf-brand img { width: 57px; height: 45px; }
  body:has(pm-launch-offer[data-phase="active"]) .pf-brand .pf-edition-stamp { font-size: 8px; padding: 4px; }
  .pf-hero-shell .pf-hero { grid-template-columns: 1fr; padding: 35px 0 28px; gap: 26px; }
  .pf-hero-copy h1 { font-size: clamp(40px, 10vw, 65px); margin: 15px 0; }
  .pf-hero-copy .pf-actions { margin-top: 20px; }
  .pf-demo-stage { width: min(100%, 540px); justify-self: center; }
  .pf-workcard-plate h2 { font-size: clamp(25px, 6.4vw, 37px); }
}
@media (max-width: 450px) {
  .pf-masthead .pf-nav nav { gap: 12px; }
  .pf-masthead .pf-nav a[href="#designmaler"] { display: none; }
  .pf-workcard-head { padding: 8px 13px; }
  .pf-workcard-time li { padding: 5px 6px; }
}

/* The public contact panel pairs Lars's invitation with his portrait from Om Naviqon. */
.pf-person { padding: 25px 0 clamp(40px, 6vw, 80px); }
.pf-person-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 22vw, 260px);
  align-items: center;
  gap: clamp(30px, 7vw, 100px);
  padding: clamp(30px, 5.1vw, 72px);
  background: #20372b;
  color: #faf8ed;
  border-radius: 10px;
}
.pf-person-label { display: flex; align-items: center; gap: 11px; color: #d8e8bd; font: 700 11px/1.4 Arial,sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.pf-person-label span { color: #91a782; }
.pf-person-copy h2 { margin: 18px 0; font-size: clamp(38px, 4.4vw, 69px); line-height: 1.03; }
.pf-person-copy h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #e2edcb; }
.pf-person-intro { max-width: 49ch; color: #e3e9dd; line-height: 1.55; }
.pf-person-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 23px; }
.pf-person a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.pf-person .pf-person-primary { gap: 18px; padding: 9px 16px; border-radius: 4px; background: #deff75; color: #203323; }
.pf-person .pf-person-primary:hover { background: #edffa9; }
.pf-person-phone, .pf-person-meeting, .pf-person-caption a { text-decoration: underline !important; text-underline-offset: .24em; text-decoration-thickness: 1px !important; }
.pf-person a:hover:not(.pf-person-primary) { text-decoration-thickness: 2px !important; }
.pf-person-copy .pf-person-meeting { margin-top: 3px; color: #dfebd5; gap: 6px; font-size: 13px; font-weight: 400; }
.pf-person-profile { position: relative; padding: 8px; background: #f2f2e5; color: #25392d; border-radius: 4px; }
.pf-person-profile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.pf-person-caption { padding: 12px 10px 1px; font-size: 13px; line-height: 1.4; }
.pf-person-name { font: 600 24px/1.2 Arial,sans-serif; letter-spacing: -.045em; }
.pf-person-caption a { gap: 5px; font-size: 13px; }
.pf-person a:focus-visible { outline: 3px solid #deff75; outline-offset: 4px; }
.pf-person-caption a:focus-visible { outline-color: #395335; outline-offset: 1px; }
@media (max-width: 700px) {
  .pf-person-panel { grid-template-columns: 1fr; gap: 22px; padding: 27px clamp(16px, 4.5vw, 28px); }
  .pf-person-copy h2 { font-size: clamp(33px, 7.3vw, 49px); }
  .pf-person-profile { display: flex; align-items: center; gap: 14px; }
  .pf-person-profile img { width: clamp(62px, 20vw, 96px); flex-shrink: 0; }
  .pf-person-caption { padding: 3px 0; }
  .pf-person-name { font-size: 20px; }
}