/* Branding showcase: a brand board for a made-up landscaper. The logo draws itself, the palette can be swapped. Behaviour in branding.js */
.show--branding { --e: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.2,1.45,.4,1); --gr: #8f897f;
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 40px 24px 100px; scroll-margin-top: 40px; }
.show--branding .sec-head { margin-bottom: 40px; }
.show--branding .sec-head__lead { max-width: 420px; }
.show--branding .bb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The colours of the brand: --b1 primary (dark), --b2 secondary, --b3 background (light), --b4 accent. branding.js swaps them */
.show--branding .bb { --b1: #1F3D2B; --b2: #8FAE8B; --b3: #F1E8D6; --b4: #D0683F;
  position: relative; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 34px; box-shadow: 0 40px 80px -40px rgba(17,17,17,.22); }
.show--branding .f1 { fill: var(--b1); } .show--branding .f2 { fill: var(--b2); } .show--branding .f3 { fill: var(--b3); } .show--branding .f4 { fill: var(--b4); }
.show--branding .s1 { stroke: var(--b1); } .show--branding .s2 { stroke: var(--b2); } .show--branding .s4 { stroke: var(--b4); }
.show--branding .f1, .show--branding .f2, .show--branding .f3, .show--branding .f4, .show--branding .s1, .show--branding .s2, .show--branding .s4 { transition: fill .6s, stroke .6s; }
.show--branding .bb-tx { font-family: var(--body); }
.show--branding .bb-td { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; }
.show--branding .bb-o { opacity: .72; }

/* Top bar: who it is for, and the palettes */
.show--branding .bb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 8px 10px 18px 8px; }
.show--branding .bb-id { display: flex; align-items: center; gap: 12px; }
.show--branding .bb-id__m { width: 42px; height: 42px; flex-shrink: 0; }
.show--branding .bb-id__t { display: flex; flex-direction: column; gap: 1px; }
.show--branding .bb-id__t b { font-size: 17px; }
.show--branding .bb-id__t small { font-size: 13px; color: var(--muted); }
.show--branding .bb-top .tag-eks { margin-right: auto; }
.show--branding .bb-pal { display: flex; align-items: center; gap: 8px; }
.show--branding .bb-pal__l { margin-right: 4px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.show--branding .bb-pb { position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: conic-gradient(from -45deg, var(--p1) 0 25%, var(--p2) 0 50%, var(--p3) 0 75%, var(--p4) 0); box-shadow: inset 0 0 0 1px rgba(17,17,17,.1); transition: transform .3s var(--spring), box-shadow .25s; }
.show--branding .bb-pb.is-on { box-shadow: inset 0 0 0 1px rgba(17,17,17,.1), 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.show--branding .bb-pb:active { transform: scale(.9); }
.show--branding .bb-pb:focus-visible, .show--branding .bb-again:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.motion .show--branding .bb.is-hint .bb-pb:not(.is-on) { animation: bbNudge 1.4s var(--e) 2; }
.motion .show--branding .bb.is-hint .bb-pb:nth-of-type(3) { animation-delay: .1s; }
.motion .show--branding .bb.is-hint .bb-pb:nth-of-type(4) { animation-delay: .2s; }
@keyframes bbNudge { 30% { transform: translateY(-5px) scale(1.08); } 60% { transform: none; } }

/* The board: logo tall on the left, colours and type on the right, the mockups under them */
.show--branding .bb-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "logo col" "logo type" "use use"; gap: 14px; }
.show--branding .bb-t { position: relative; overflow: hidden; padding: 20px 22px 22px; border-radius: 24px; transition: background-color .6s, color .6s; }
.show--branding .bb-th { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.show--branding .bb-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .62; }
.show--branding .bb-st { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* Logo tile */
.show--branding .bb-logo { grid-area: logo; display: flex; flex-direction: column; background: var(--b3); color: var(--b1); }
.show--branding .bb-lg { display: block; width: 100%; max-height: 410px; flex: 1 1 auto; margin: 10px 0 4px; }
.show--branding .bb-gr { opacity: .09; }
.show--branding .bb-cn { stroke: var(--gr); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .6s; }
.show--branding .bb-cn text { fill: var(--gr); stroke: none; font: 500 9px var(--body); letter-spacing: .04em; }
.show--branding .bb-sk path { stroke: #7d776d; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .85; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.show--branding .bb-sk, .show--branding .bb-lns { transition: opacity .6s; }
.show--branding .bb-lns > * { stroke: var(--b1); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.show--branding .bb-fl { opacity: 0; transform: scale(.94); transform-box: fill-box; transform-origin: center; transition: opacity .5s, transform .7s var(--spring); }
.show--branding .bb-wm path:not(.bb-dot) { stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.show--branding .bb-dot { transform: scale(0) rotate(-40deg); transform-box: fill-box; transform-origin: 0 100%; transition: transform .6s var(--spring) 1.05s; }
.show--branding .bb-tag { font: 700 12.5px var(--body); opacity: 0; transition: opacity .6s; }
.show--branding .bb-zone { opacity: 0; transition: opacity .4s; }
.show--branding .bb-zx rect { fill: var(--b4); fill-opacity: .22; }
.show--branding .bb-zt text { fill: var(--b4); font: 700 12px var(--body); }
.show--branding .bb-znt { font: 500 13px var(--body); }
.show--branding .bb-znt tspan { font-weight: 700; }
/* The states (classes set by branding.js): sketch, outlines, fill, wordmark, tagline, clear space */
.show--branding .is-sk .bb-cn { opacity: .75; }
.show--branding .is-sk .bb-sk path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45,.1,.3,1) var(--d, 0s); }
.show--branding .is-ln .bb-lns > * { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.45,.1,.3,1) var(--d, 0s); }
.show--branding .is-ln .bb-sk { opacity: .45; }
.show--branding .is-fill .bb-fl { opacity: 1; transform: none; }
.show--branding .is-fill .bb-lns, .show--branding .is-fill .bb-sk { opacity: 0; }
.show--branding .is-fill .bb-cn { opacity: .3; }
.show--branding .is-wm .bb-wm path:not(.bb-dot) { stroke-dashoffset: 0; transition: stroke-dashoffset .42s cubic-bezier(.5,.1,.3,1) var(--d, 0s); }
.show--branding .is-wm .bb-dot { transform: none; }
.show--branding .is-tag .bb-tag { opacity: 1; }
.show--branding .is-tag .bb-cn { opacity: 0; }
.show--branding .is-zone .bb-zone { opacity: 1; }
.show--branding .bb-lf { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.show--branding .bb-lseg button { padding: 9px 16px; }
.show--branding .bb-again { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px 0 13px; border: 1px solid rgba(17,17,17,.14); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--ink); font: 700 14px var(--body); cursor: pointer; transition: background .2s; }
.show--branding .bb-again svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.motion .show--branding .bb-again:active svg { transform: rotate(-200deg); transition: transform .4s; }

/* Colours */
.show--branding .bb-col { grid-area: col; border: 1px solid var(--line); background: var(--bg); }
.show--branding .bb-col .bb-st { background: #fff; border: 1px solid var(--line); }
.show--branding .bb-sws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.show--branding .bb-sw { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.show--branding .bb-sw i { display: block; height: 104px; margin-bottom: 8px; border-radius: 16px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(17,17,17,.08); transform-origin: 50% 100%; transition: background-color .6s; }
.show--branding .bb-sw b { font-size: 14.5px; }
.show--branding .bb-sw code { font: 500 12.5px var(--body); letter-spacing: .02em; color: var(--ink); }
.show--branding .bb-sw small { font-size: 12px; color: var(--muted); }
.motion .show--branding .bb:not(.is-in) .bb-sw { opacity: 0; transform: translateY(16px); }
.motion .show--branding .bb:not(.is-in) .bb-sw i { transform: scaleY(.2); }
.motion .show--branding .bb.is-in .bb-sw { transition: opacity .5s calc(.5s + var(--i) * .1s), transform .7s var(--e) calc(.5s + var(--i) * .1s); }
.motion .show--branding .bb.is-in .bb-sw i { transition: background-color .6s, transform .8s var(--spring) calc(.55s + var(--i) * .1s); }

/* Type */
.show--branding .bb-type { grid-area: type; background: var(--b1); color: var(--b3); }
.show--branding .bb-ty { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.show--branding .bb-aa { flex-shrink: 0; font: 800 108px/.92 var(--display); letter-spacing: -.055em; }
.show--branding .bb-fonts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.show--branding .bb-fonts p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.show--branding .bb-fonts small { font-size: 12px; opacity: .65; }
.show--branding .bb-fh { font: 800 22px/1.05 var(--display); letter-spacing: -.03em; }
.show--branding .bb-fb { font: 500 19px/1.1 var(--body); }
.show--branding .bb-smp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--b3) 22%, transparent); font-size: 14px; line-height: 1.45; }
.show--branding .bb-smp b { font: 800 19px/1.1 var(--display); letter-spacing: -.03em; color: var(--b4); transition: color .6s; }
.show--branding .bb-smp span { opacity: .8; }
.motion .show--branding .bb:not(.is-in) .bb-aa { opacity: 0; transform: translateY(20px) scale(.9); }
.motion .show--branding .bb:not(.is-in) .bb-fonts p, .motion .show--branding .bb:not(.is-in) .bb-smp { opacity: 0; transform: translateX(-12px); }
.motion .show--branding .bb.is-in .bb-aa { transition: opacity .6s .9s, transform .9s var(--spring) .9s; }
.motion .show--branding .bb.is-in .bb-fonts p { transition: opacity .5s 1.1s, transform .7s var(--e) 1.1s; }
.motion .show--branding .bb.is-in .bb-fonts p + p { transition-delay: 1.2s; }
.motion .show--branding .bb.is-in .bb-smp { transition: opacity .5s 1.35s, transform .7s var(--e) 1.35s; }

/* Mockups */
.show--branding .bb-use { grid-area: use; background: color-mix(in srgb, var(--b3) 42%, #fff); }
.show--branding .bb-uh { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.show--branding .bb-tabs button { padding: 9px 16px; }
.show--branding .bb-stage { position: relative; height: 440px; margin-top: 10px; transition: height .45s var(--e); }
.show--branding .bb-m { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.show--branding .bb-m.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.show--branding .bb-sv { display: block; width: 100%; height: 100%; overflow: visible; }
.show--branding .bb-sv [class*="bb-a"], .show--branding .bb-van, .show--branding .bb-wh { transform-box: fill-box; transform-origin: 50% 50%; }
.motion .show--branding .bb-m.is-on .bb-a1 { animation: bbRise .8s var(--e) both; }
.motion .show--branding [data-bb-m="visitkort"].is-on .bb-a1 { animation: bbCard1 .9s var(--spring) both; }
.motion .show--branding [data-bb-m="visitkort"].is-on .bb-a2 { animation: bbCard2 .9s var(--spring) .18s both; }
.motion .show--branding .bb-m.is-on .bb-a2 { animation: bbSide1 .8s var(--e) .25s both; }
.motion .show--branding .bb-m.is-on .bb-a3 { animation: bbSide2 .8s var(--e) .38s both; }
.motion .show--branding .bb-m.is-on .bb-a4, .motion .show--branding .bb-m.is-on .bb-a5, .motion .show--branding .bb-m.is-on .bb-a6, .motion .show--branding .bb-m.is-on .bb-a7, .motion .show--branding .bb-m.is-on .bb-a8, .motion .show--branding .bb-m.is-on .bb-a9 { animation: bbUp .7s var(--e) both; }
.motion .show--branding .bb-m.is-on .bb-a4 { animation-delay: .25s; }
.motion .show--branding .bb-m.is-on .bb-a5 { animation-delay: .32s; }
.motion .show--branding .bb-m.is-on .bb-a6 { animation-delay: .42s; }
.motion .show--branding .bb-m.is-on .bb-a7 { animation-delay: .5s; }
.motion .show--branding .bb-m.is-on .bb-a8 { animation: bbPop .9s var(--spring) .3s both; }
.motion .show--branding .bb-m.is-on .bb-a9 { animation-delay: .6s; }
.motion .show--branding .bb-m.is-on .bb-van { animation: bbDrive 1.6s cubic-bezier(.22,.7,.25,1) both; }
.motion .show--branding .bb-m.is-on .bb-wh { animation: bbSpin 1.6s cubic-bezier(.22,.7,.25,1) both; }
@keyframes bbRise { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes bbUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes bbPop { from { opacity: 0; transform: scale(.85) rotate(-3deg); } }
@keyframes bbCard1 { from { opacity: 0; transform: translate(-70px, 50px) rotate(-14deg); } }
@keyframes bbCard2 { from { opacity: 0; transform: translate(80px, -70px) rotate(16deg); } }
@keyframes bbSide1 { from { opacity: 0; transform: translate(60px, 20px) rotate(8deg); } }
@keyframes bbSide2 { from { opacity: 0; transform: translate(-60px, 20px) rotate(-8deg); } }
@keyframes bbDrive { 0% { transform: translateX(-780px); } 84% { transform: translateX(9px); } 100% { transform: none; } }
@keyframes bbSpin { from { transform: rotate(-1180deg); } }

@media (hover: hover) {
  .show--branding .bb-pb:not(.is-on):hover { transform: scale(1.1); }
  .show--branding .bb-again:hover { background: #fff; }
}

/* Tablets */
@media (max-width: 959px) {
  .show--branding .bb-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "col" "type" "use"; }
  .show--branding .bb-lg { max-height: 380px; }
  .show--branding .bb-stage { height: 400px; }
}
/* Phones */
@media (max-width: 759px) {
  .show--branding { padding: 32px 20px 72px; }
  .show--branding .sec-head { margin-bottom: 28px; }
  .show--branding .bb { padding: 10px; border-radius: 28px; }
  .show--branding .bb-top { padding: 6px 6px 14px; }
  .show--branding .bb-pal { width: 100%; }
  .show--branding .bb-pal__l { margin-right: auto; }
  .show--branding .bb-t { padding: 16px 14px 18px; border-radius: 20px; }
  .show--branding .bb-grid { gap: 10px; }
  .show--branding .bb-lg { margin: 6px 0 2px; }
    .show--branding .bb-lf { justify-content: center; }
  .show--branding .bb-lseg button { padding: 8px 13px; font-size: 13px; }
  .show--branding .bb-again { height: 38px; font-size: 13px; }
  .show--branding .bb-sws { gap: 8px; }
  .show--branding .bb-sw i { height: 76px; border-radius: 12px; }
  .show--branding .bb-sw b { font-size: 13px; }
  .show--branding .bb-sw code, .show--branding .bb-sw small { font-size: 11px; }
  .show--branding .bb-aa { font-size: 84px; }
  .show--branding .bb-fh { font-size: 19px; }
  .show--branding .bb-fb { font-size: 17px; }
  .show--branding .bb-uh { justify-content: center; }
  .show--branding .bb-uh .bb-k { width: 100%; }
  .show--branding .bb-tabs { width: 100%; justify-content: space-between; gap: 2px; padding: 3px; }
  .show--branding .bb-tabs button { flex: 1 1 auto; padding: 8px 6px; font-size: 12.5px; }
  .show--branding .bb-long { display: none; }
  .show--branding .bb-stage { height: 340px; }
}
/* Without motion: everything in place, nothing moves */
html:not(.motion) .show--branding *, html:not(.motion) .show--branding *::before, html:not(.motion) .show--branding *::after { transition: none !important; animation: none !important; }