/* Page changes (for example from a detail sheet to its full example page) crossfade where supported. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* The finder is the first section, with direct links to independent examples. Its stage sky (the palette of
   the closing contact card) is set in industry-gallery.css. */
.agency-home .nav-shell{width:min(1180px,calc(100% - 48px));max-width:none}
.agency-home .header nav{gap:25px}
.finder-hero{position:relative;isolation:isolate;overflow:hidden;padding:145px 0 100px;background:#07090c}
.finder-heading{text-align:center;position:relative;z-index:2;scroll-margin-top:100px}
.finder-heading>p:first-child{font-size:14px;color:#b9b8bd;margin-bottom:20px}
.finder-heading h1{font-size:clamp(48px,6vw,80px);line-height:1.08;letter-spacing:-.065em}
.finder-heading .finder-description{font-size:17px;line-height:1.6;color:#bcbcc1;margin:25px auto 48px}
.industry-grid{--max:1180px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;z-index:2}
.industry-card{grid-column:span 2;display:block;background:#ffffff09;border:1px solid #ffffff19;border-radius:15px;padding:7px;backdrop-filter:blur(24px);box-shadow:inset 0 1px #ffffff0c,0 20px 50px #0003;transition:transform .25s,border-color .25s,background .25s}
@media(hover:hover) and (pointer:fine){.industry-card:hover{transform:translateY(-6px);border-color:#ffffff55;background:#ffffff12}}
.industry-picture{height:225px;border-radius:9px;position:relative;overflow:hidden;isolation:isolate}
.industry-picture img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
@media(hover:hover) and (pointer:fine){.industry-card:hover img{transform:scale(1.04)}}
.industry-picture strong{position:absolute;z-index:2}
.industry-caption{padding:19px 17px 21px}
.industry-caption h2{font-size:19px;letter-spacing:-.5px;line-height:1.3;margin-bottom:7px}
.industry-caption>span{display:block;color:#999aa2;font-size:12px;line-height:1.5}
.industry-smash .industry-picture{background:#141414}
.industry-smash img{object-position:50% 57%;opacity:.8}
.industry-smash strong{font:italic 700 58px/.9 Georgia,serif;letter-spacing:-5px;left:23px;top:22px;color:#f6bb77;transform:rotate(-7deg);text-shadow:0 3px 18px #000}
.industry-werk .industry-picture{background-color:#e9eae2;background-image:linear-gradient(#4e5b4712 1px,transparent 1px),linear-gradient(90deg,#4e5b4712 1px,transparent 1px);background-size:22px 22px}
.industry-werk img{width:58%;height:80%;object-fit:contain;position:absolute;right:6%;bottom:-3%}
.industry-werk strong{font-size:30px;letter-spacing:-2px;top:21px;left:23px;color:#293d33;font-weight:500}
.industry-after .industry-picture{background:#b8aadf}
.industry-after img{width:66%;height:95%;position:absolute;right:-4%;top:18%;transform:rotate(12deg)}
.industry-after strong{left:20px;top:23px;color:#efff96;font:900 58px/.86 Arial,sans-serif;letter-spacing:-4px;transform:rotate(-5deg);text-shadow:1px 1px #291e3b}
.industry-still{grid-column:2 / span 2}
.industry-still .industry-picture{background:#eae6ef}
.industry-still img{width:50%;height:96%;right:10%;top:20%;position:absolute;transform:rotate(-8deg);object-position:50% 60%;border:5px solid #fff9ed}
.industry-still strong{left:20px;top:25px;color:#4b3f54;font:95px/.8 Georgia,serif;letter-spacing:-8px}
.industry-zest .industry-picture{background:#1649e7}
.industry-zest strong{font:800 48px/.9 Bricolage,Arial,sans-serif;left:22px;top:22px;transform:rotate(-7deg);letter-spacing:-3px;color:#efff8d}
.zest-card-word{position:absolute;right:5%;bottom:9%;font:800 64px/.78 Bricolage,Arial,sans-serif;letter-spacing:-5px;color:#efff8d;transform:rotate(5deg);text-align:right}
.finder-other{position:relative;z-index:2;text-align:center;color:#93959e;font-size:13px;margin-top:34px}
.finder-other button{background:none;border-bottom:1px solid #7a7d8b;padding:0 0 2px;margin-left:5px;color:#dfdfe5}
.agency-home .intro{padding-top:110px;padding-bottom:60px}
.agency-home #team{padding-top:30px}
@media(min-width:1500px){.industry-picture{height:240px}}
@media(max-width:850px){.agency-home .header nav{gap:18px}.agency-home .nav-cta{display:none}.industry-grid{grid-template-columns:repeat(2,1fr);gap:15px}.industry-card{grid-column:auto}.industry-still{grid-column:auto}.industry-zest{grid-column:1 / -1}.industry-zest .industry-picture{height:180px}.industry-zest .zest-card-word{font-size:100px}.industry-picture{height:210px}.finder-hero{padding-top:115px}}
@media(max-width:560px){.finder-heading .finder-description{font-size:14px;margin-bottom:32px}.industry-grid{width:calc(100% - 32px);gap:12px}.industry-card{padding:5px;border-radius:11px}.industry-picture{height:160px}.industry-caption{padding:14px 9px}.industry-caption h2{font-size:15px;letter-spacing:-.4px}.industry-caption>span{font-size:10px}.industry-smash strong{font-size:39px;left:13px;top:20px;letter-spacing:-3px}.industry-werk strong{font-size:21px;left:12px;top:20px;letter-spacing:-1.5px}.industry-werk img{width:80%}.industry-after strong{font-size:38px;left:13px;letter-spacing:-2px}.industry-still strong{font-size:62px;left:11px;letter-spacing:-5px}.industry-zest .industry-picture{height:135px}.industry-zest .zest-card-word{font-size:61px;bottom:12%;letter-spacing:-4px}.finder-other{font-size:12px;line-height:1.9}.finder-other button{display:block;margin:0 auto}.finder-hero{padding-bottom:80px}.agency-home .intro-copy p{font-size:24px}.agency-home .nav-shell{width:calc(100% - 32px)}}
@media(prefers-reduced-motion:reduce){.industry-card,.industry-picture img{transition:none}@media(hover:hover) and (pointer:fine){.industry-card:hover{transform:none}}}

/* Collaboration: a photographic sequence with generous editorial spacing. */
.process-section{padding:115px 0 90px;position:relative}
.process-heading{display:grid;grid-template-columns:1.35fr 1fr;column-gap:90px;align-items:end;margin-bottom:68px}
.process-eyebrow{grid-column:1/-1;font-size:13px;line-height:1.5;color:#a5a1a0;margin-bottom:22px}
.process-heading h2{font-size:clamp(43px,5.2vw,65px);line-height:1.08;letter-spacing:-.055em}
.process-heading h2>span{color:#93908e}
.process-intro{font-size:16px;line-height:1.7;color:#afaaa7;max-width:340px;padding-bottom:4px}
.process-sequence{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:80px 58px;padding:0;margin:0}
.process-step{min-width:0;position:relative}
.process-lead{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:75px;align-items:center}
.process-image{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.5;margin:0;background:#1b1e20;border:1px solid #ffffff1c;border-radius:12px;box-shadow:0 25px 50px #0004}
.process-image:after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 1px #ffffff30;pointer-events:none}
.process-image img{width:100%;height:100%;object-fit:cover;display:block}
.process-lead .process-image{aspect-ratio:1.27}
.process-lead img{object-position:48% 50%}
.process-copy{position:relative;padding-top:30px}
.process-lead .process-copy{padding:0 8px 0 0}
.process-number{display:block;color:#a4b5be;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em;line-height:1;margin-bottom:21px}
.process-copy h3{font-size:clamp(24px,2.5vw,32px);letter-spacing:-.045em;line-height:1.25;margin:0 0 18px}
.process-copy>p{font-size:15px;line-height:1.8;color:#a8a3a0;max-width:420px}

.process-design{margin-top:46px}
.process-design .process-image{aspect-ratio:1.45;background:#b6bdc0}
.process-design img{object-position:50% 52%;filter:saturate(.76)}
.process-launch .process-image{aspect-ratio:1.3;background:#111b1d}
.process-launch img{object-position:50% 90%}
@media(min-width:1200px){.process-lead .process-image{min-height:410px}}
@media(max-width:950px){.process-heading{column-gap:45px;margin-bottom:52px}.process-heading h2{font-size:49px}.process-intro{font-size:14px}.process-lead{grid-template-columns:1.12fr 1fr;gap:40px}.process-lead .process-image{aspect-ratio:1.12}.process-sequence{gap:60px 34px}.process-copy h3{font-size:27px}.process-copy>p{font-size:14px}.process-design{margin-top:30px}}
@media(max-width:700px){.process-section{padding:65px 0 55px}.process-heading{display:block;margin-bottom:38px}.process-heading h2{font-size:44px}.process-eyebrow{font-size:12px;margin-bottom:18px}.process-intro{margin-top:24px;max-width:340px;font-size:14px}.process-sequence{display:block}.process-step{margin:0 0 50px}.process-step:last-child{margin-bottom:0}.process-lead{display:block}.process-lead .process-image{aspect-ratio:1.4;min-height:0}.process-image{border-radius:10px}.process-copy,.process-lead .process-copy{padding:26px 4px 0}.process-number{font-size:11px;margin-bottom:14px}.process-copy h3{font-size:27px;margin-bottom:14px}.process-copy>p{font-size:14px;max-width:100%}.process-design .process-image{aspect-ratio:1.5}.process-launch .process-image{aspect-ratio:1.45}}
@media(max-width:370px){.process-heading h2{font-size:40px}.process-copy h3{font-size:25px}}

/* Continuous sky: the finder's backdrop carries on under every section. The finder's floor edge, exit fade
   and hero-fade blend into --home-sky (FLOOR_FS in industry-gallery.js holds it too), keep them in step.
   The accent tiles are clear at their edges, so the seam under the finder stays plain --home-sky. */
.agency-home{--home-sky:#0e1218;background:var(--home-sky)}
.home-sky{position:absolute;left:0;right:0;top:0;height:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(64% 640px at 4% 62%,#34464d45,transparent),radial-gradient(58% 560px at 94% 30%,#4a4b5638,transparent),radial-gradient(42% 480px at 80% 72%,#52535e24,transparent);background-size:100% 1700px,100% 2300px,100% 2900px;background-repeat:repeat-y}
.home-sky .light-orbit,.home-sky .light-plane{left:0;top:0}
.home-sky .light-plane{-webkit-backdrop-filter:none;backdrop-filter:none;opacity:.8}

/* Header veil: no flat bar. A slate gradient in --home-sky that runs out below the header edge, faded in by
   --header-dim (0 to 1, set by site.js: clear during the horizontal gallery run, then ramps in over 160px). */
.agency-home .header.scrolled{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
.agency-home .header::before{content:'';position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,18,24,.9) 0%,rgba(14,18,24,.72) 55%,rgba(14,18,24,0) 100%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);opacity:var(--header-dim,0);transition:opacity .2s linear}

/* WAVEN Design logo (assets/brand). The SVG carries its own clear space, about 23% of its height on every
   side, so the image is pulled left by that margin to line the sphere up with the page edge. Only its height
   is set, the width follows, so the logo keeps its proportions. */
.agency-home .logo{gap:0}
.agency-home .logo img{display:block;height:40px;width:auto;max-width:none;margin-left:-9px}
.agency-home .closing-card>.closing-kugel{display:block;width:40px;height:40px;flex:none}
@media(max-width:700px){.agency-home .header .logo img{height:36px;margin-left:-8px}}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Live references: the whole card is one link to the client's site (new tab). The screenshot takes the place
   and height of the placeholder picture. Hover only with a real mouse, so a tap leaves nothing stuck on; the
   press answers on every pointer. The focus ring goes on the card, because the card clips its contents. */
.reference-live{transition:transform .25s,border-color .25s,scale .16s ease-out}
.reference-link{display:flex;flex-direction:column;height:100%}
.reference-link:focus-visible{outline:none}
.reference-live:has(.reference-link:focus-visible){outline:2px solid #e5c1b6;outline-offset:5px}
.reference-shot{height:210px;overflow:hidden;background:#f7f7f5;border-bottom:1px solid #fff1}
.reference-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .5s}
.reference-visit{display:inline-flex;gap:8px;margin-top:18px;font-size:12px;color:#aaa5a2;transition:color .2s}
@media(hover:hover) and (pointer:fine){
  .reference-live:hover{transform:translateY(-6px);border-color:#ffffff40}
  .reference-live:hover .reference-shot img{transform:scale(1.04)}
  .reference-live:hover .reference-visit{color:#fff}
}
.reference-live:active{scale:.98;transition-duration:.12s;transition-timing-function:ease-out}
@media(max-width:900px){.reference-shot{height:180px}}
@media(max-width:700px){.reference-shot{height:230px}.reference-visit{font-size:13px}}
@media(prefers-reduced-motion:reduce){@media(hover:hover) and (pointer:fine){.reference-live:hover{transform:none}.reference-live:hover .reference-shot img{transform:none}}}

/* Contact form states (site.js): sending, sent (only the thanks and a close button stay), error. */
#project-form button[disabled]{opacity:.65;cursor:progress}
#form-status[data-state=success]{font-size:17px;line-height:1.55;color:#fff3f0}
#form-status[data-state=error]{color:#f2bcae}
#project-form.sent>:not(#form-status):not(.form-done){display:none}
#project-form.sent #form-status{margin-top:4px}
.form-done{margin-top:26px}
.draft-note a{color:#ddd6d2;text-decoration:underline;text-decoration-color:#fff6;text-underline-offset:3px}

/* Footer: the legal page link sits on the bottom line, opposite the copyright. */
.footer-bottom a{color:#8d8885}
@media(max-width:700px){.footer-bottom a{position:relative;font-size:12px}.footer-bottom a::after{content:'';position:absolute;inset:-15px 0}}

/* Impressum & Datenschutz (impressum.html): the home page's header, footer and sky around one reading column.
   No script on that page, so the header veil is simply on. */
.legal-page .header{--header-dim:1}
.legal-page{background:radial-gradient(70% 520px at 85% 0,#3a3f4a55,transparent),radial-gradient(60% 600px at 0 40%,#34464d33,transparent),var(--home-sky)}
.legal{width:min(760px,calc(100% - 64px));margin:0 auto;padding:170px 0 30px}
.legal-eyebrow{font-size:13px;color:#a5a1a0;margin-bottom:22px}
.legal-head h1{font-size:clamp(40px,6vw,62px);line-height:1.1;letter-spacing:-.05em}
.legal-lead{font-size:17px;line-height:1.6;color:#b9b4b1;margin-top:24px;max-width:520px}
.legal-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.legal-toc .chip{transition:background .2s,border-color .2s,opacity .16s ease-out}
@media(hover:hover) and (pointer:fine){.legal-toc .chip:hover{background:#ffffff24;border-color:#ffffff2a;color:#fff}}
.legal-toc .chip:active{opacity:.6;transition-duration:.12s}
.legal-section{padding-top:90px}
.legal-section h2{font-size:34px;letter-spacing:-1.2px;line-height:1.25;margin-bottom:26px}
.legal-section h3{font-size:18px;letter-spacing:-.3px;line-height:1.4;color:#f1ebe8;margin:40px 0 12px}
.legal-section p{font-size:15px;line-height:1.75;color:#b1acaa;max-width:640px}
.legal-section p+p{margin-top:14px}
.legal-section a{color:#ece6e3;text-decoration:underline;text-decoration-color:#fff5;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){.legal-section a:hover{text-decoration-color:#fff}}
.legal-card{border:1px solid var(--line);border-radius:17px;background:#ffffff08;padding:30px 32px;box-shadow:inset 0 1px 1px #ffffff0c}
.legal-card address{font-style:normal;font-size:16px;line-height:1.85;color:#e7e0dd}
.legal-card dl{display:grid;gap:8px;margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:15px}
.legal-card dl>div{display:grid;grid-template-columns:90px 1fr;gap:16px}
.legal-card dt{color:#8f8a88}
.legal-card dd{margin:0;color:#e7e0dd}
.placeholder{display:inline-block;color:#f3d6cb;background:#e5c1b61a;border:1px dashed #e5c1b670;border-radius:5px;padding:0 7px;font-size:.9em;letter-spacing:.02em;line-height:1.7}
.legal-stand{margin-top:60px!important;font-size:13px!important;color:#7f7b79!important}
@media(max-width:700px){
  .legal{width:calc(100% - 40px);padding-top:120px}
  .legal-lead{font-size:15px}
  .legal-section{padding-top:70px}
  .legal-section h2{font-size:30px}
  .legal-card{padding:22px 20px}
  .legal-card dl>div{grid-template-columns:1fr;gap:0}
  .legal-toc .chip{min-height:44px;padding-inline:18px}
}
@media(orientation:landscape) and (max-height:500px){.legal{width:calc(100% - 48px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}}

/* Prices (#preise, index.html): four packages in the Fora pricing layout. From 1101px one joined block, only its
   outer corners round, Pro raised 24px with its own corners and border. Up to 1100px separate cards, 2 x 2 with a
   12px gap, stacked from 700px down; there Pro stays level and stands out by its lighter fill and border. Every card
   is a subgrid over five shared rows (name, price, description, button, list), so prices, buttons and lists line up
   across the cards. The list rows are 1fr, which evens them out over the card rows, so all cards end level.
   Colours, sizes and buttons are the site's own: .button.glass / .button.primary, the h2 sizes, #ffffff1a lines,
   white at 65 and 80% for muted text. */
#preise .price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto auto auto 1fr}
#preise .price-card{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;min-width:0;padding:32px;background:#ffffff05;border:1px solid #ffffff1a;transition:background-color .25s}
#preise .price-card.is-pro{z-index:1;background:#ffffff13;border-color:#ffffff40;box-shadow:inset 0 1px 1px #ffffff0c}
#preise .price-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;border-bottom:1px solid #ffffff1a}
#preise .price-name{font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}
/* The label is taller than the name; the negative margin keeps the name row the same height in every card. */
#preise .price-badge{margin-block:-4px;padding:3px 10px;border:1px solid #ffffff1a;border-radius:999px;background:#ffffff1a;font-size:12px;line-height:18px;color:rgba(255,255,255,.8);white-space:nowrap}
#preise .price-amount{padding-top:24px}
#preise .price-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
#preise .price-value{font-size:40px;line-height:1.2;letter-spacing:-1.5px;white-space:nowrap;color:#fff3f0}
#preise .price-unit{font-size:13px;line-height:1.5;color:rgba(255,255,255,.65)}
#preise .price-desc{margin-top:14px;min-height:3em;font-size:14px;line-height:1.5;color:rgba(255,255,255,.65)}
#preise .price-button{display:flex;width:100%;margin-top:28px;padding-inline:16px}
#preise .price-list{margin:28px 0 0;padding:0;list-style:none}
#preise .price-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.8)}
#preise .price-list li+li{border-top:1px solid #ffffff1a}
#preise .price-list li:last-child{padding-bottom:0}
#preise .price-check{position:relative;flex:none;width:18px;height:18px;margin-top:1.5px;border-radius:50%;background:#ffffff1a}
#preise .price-check::after{content:'';position:absolute;left:6.5px;top:4px;width:4px;height:8px;border:solid #fff3f0;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
#preise .price-footnote{margin-top:28px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.65)}
@media(min-width:1101px){
  /* One block: the cards share their edges (Pro's border stands between Plus and Max), "einmalig" below the price. */
  #preise .price-card{margin-top:24px;border-width:1px 0}
  #preise .price-card:first-child{border-left-width:1px;border-radius:17px 0 0 17px}
  #preise .price-card:last-child{border-width:1px;border-radius:0 17px 17px 0}
  #preise .price-card.is-pro{margin-top:0;padding-top:56px;border-width:1px;border-radius:17px}
  #preise .price-unit{flex-basis:100%;margin-top:2px}
}
/* Narrowest four-up widths: the next smaller heading size, so "CHF 3'490" keeps room even beside a classic scrollbar. */
@media(min-width:1101px) and (max-width:1199px){#preise .price-value{font-size:35px;letter-spacing:-1.3px}}
@media(max-width:1100px){
  #preise .price-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto auto auto auto 1fr);column-gap:12px}
  #preise .price-card{border-radius:17px}
  #preise .price-card:nth-child(n+3){margin-top:12px}
}
@media(max-width:900px){#preise .price-value{font-size:33px}}
@media(max-width:700px){
  #preise .price-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,auto auto auto auto 1fr)}
  #preise .price-card+.price-card{margin-top:12px}
  #preise .price-value{font-size:32px;letter-spacing:-1.15px}
}
@media(hover:hover) and (pointer:fine){
  #preise .price-card:hover{background:#ffffff09}
  #preise .price-card.is-pro:hover{background:#ffffff17}
}
@media(prefers-reduced-motion:reduce){
  #preise .price-card{transition:none}
  #preise .button:active{scale:none}
  @media(hover:hover) and (pointer:fine){#preise .button:hover{transform:none}}
}

/* Contact form, field "Paket": styled like the text fields (styles.css), with its own arrow. 16px on touch and
   small screens like every field, so iOS does not zoom. */
#project-form select{display:block;width:100%;margin-top:7px;padding:12px 38px 12px 12px;border:1px solid #ffffff20;border-radius:8px;background:#ffffff05 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bdb6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px;color:#eee7e3;font:inherit;font-size:14px;line-height:1.5;-webkit-appearance:none;appearance:none;cursor:pointer}
#project-form select:focus-visible{outline:2px solid #e5c1b6;outline-offset:5px}
#project-form select option{background:#13191e;color:#eee7e3}
@media(pointer:coarse),(max-width:700px){#project-form select{font-size:16px}}