@font-face {
  font-family: Montserrat;
  src: url("/assets/fonts/montserrat/montserrat-v31-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montserrat;
  src: url("/assets/fonts/montserrat/montserrat-v31-latin-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* Maintained layout corrections; original capture stays untouched. */
img{height:auto}
@media (any-pointer: fine) {
  body { cursor: url("/assets/site/caroline-cursor.v1.png") 27 16, auto; }
  a[href], button { cursor: pointer; }
  input, textarea, [contenteditable="true"] { cursor: text; }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Match the homepage link positions on every desktop page, including pages without a logo. */
.navbar-ads-homepage.desktop{gap:12px;justify-content:space-between;align-items:center;max-width:calc(892px + var(--logo) + 72px);padding:32px calc(var(--logo) + 72px) 0 24px;height:80px}
.navbar-ads-homepage.desktop>a,.nav-icon-wrapper,.navbar-item-wrapper{flex-shrink:0}
.navbar-ads-homepage .text-6{white-space:nowrap;font-weight:700}
.navbar-ads-homepage .nav-icon-wrapper{gap:16px}
.social-icon{width:32px;height:32px;max-width:none;object-fit:contain}
.nav-social-filter{position:absolute}
.navbar-ads-homepage .social-icon{filter:url("#nav-social-brand-red")}
.navbar-burger-icon-wrapper{border:0;cursor:pointer;color:#e24762;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.navbar-burger-icon-wrapper:focus-visible,a:focus-visible{outline:3px solid #111;outline-offset:4px}
.navbar-ads-homepage.mobile .nav-burger-items{display:none}
.navbar-ads-homepage.mobile .nav-burger-items.is-open{display:flex!important;opacity:1!important;transform:none!important}
.image-10.profile-image{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom}
.image-10.hero-section-headline{height:auto}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-grid>a,.grid-child{min-width:0;width:100%}
.project-grid img{height:auto}
.portfolio-detail-grid .grid-child { border-radius: 12px; }
.caroline-relevanzmodell,
.container.stopper.caroline-belief {
  --model-gap: clamp(48px, 6vw, 88px);
}
.container.stopper.caroline-belief {
  /* Include the intro's bottom spacing and the raised border, minus the SVG's transparent edge. */
  --intro-spacing: 93px;
  --model-bottom-inset: min(9px, calc((100vw - 48px) * 9 / 946));
  margin: calc(var(--model-gap) + var(--intro-spacing) - var(--model-bottom-inset)) auto var(--model-gap);
}
:is(.caroline-belief, .ad-creatives-booking) h2 { text-wrap: balance; }
.caroline-relevanzmodell{width:min(946px,calc(100% - 48px));margin:var(--model-gap) auto 0}
.caroline-relevanzmodell img{display:block;width:100%;height:auto}
.caroline-model-mobile { display: none; }
@media (min-width: 768px) and (max-width: 991px) {
  .container.stopper.caroline-belief { --intro-spacing: 232px; }
}
@media (max-width: 767px) {
  .container.stopper.caroline-belief {
    --intro-spacing: 68px;
    --model-bottom-inset: 2.75px;
  }
  .caroline-relevanzmodell > img { display: none; }
  .caroline-model-mobile { display: block; }
  .caroline-model-mobile svg { display: block; width: min(100%, 460px); height: auto; margin-inline: auto; }
  .caroline-model-mobile dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 12px;
    width: min(100%, 380px);
    margin: 20px auto 0;
    font-size: 15px;
    line-height: 1.45;
  }
  .caroline-model-mobile dt { font-weight: 700; }
  .caroline-model-mobile dd { margin: 0; }
}
@media (max-width: 479px) {
  .home-page .home-services + .container.first.relevanz.projekttext.titel { margin-top: 96px; }
}

.container.first.relevanz.projekttext.titel.backup.ad-creatives-intro {
  width: min(640px, calc(100% - 48px));
}
.ad-creatives-intro > .fliesstext:not(:last-child) { margin-bottom: 12px; }
.ad-creatives-intro > .fliesstext + .fliesstext { margin-top: 0; }
.ad-creatives-intro-break { display: none; }
@media (min-width: 992px) {
  .ad-creatives-intro-break { display: revert; }
}
.ad-creatives-punchline { white-space: nowrap; }
.container.stopper.ad-creatives-booking {
  margin: clamp(48px, 6vw, 88px) auto;
  scroll-margin-top: 112px;
}
.mission-container.tofu:has(+ .ad-creatives-booking) { margin-bottom: 0; }
@media (max-width: 600px) {
  .ad-creatives-intro > .fliesstext + .fliesstext {
    width: calc(100% + 24px);
    font-size: min(16px, 4.05vw);
  }
}

.ad-carousel {
  --motif-width: 65%;
  position: relative;
  width: min(700px, 100%);
}
.ad-slide { width: var(--motif-width); margin-inline: auto; }
.ad-slide picture, .ad-slide img { display: block; width: 100%; }
.ad-carousel.is-ready .ad-stage {
  display: grid;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.ad-carousel.is-ready .ad-slide { grid-area: 1 / 1; }
.ad-slide[data-position="current"] { position: relative; z-index: 1; }
.ad-slide:is([data-position="previous"], [data-position="next"]) { opacity: .72; }
.ad-slide[data-position="previous"] { transform: translateX(-23%) scale(.86); }
.ad-slide[data-position="next"] { transform: translateX(23%) scale(.86); }
.ad-controls:not([hidden]) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.ad-position {
  margin: 0;
  color: #424242;
  font: 600 13px Montserrat, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.ad-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d7d7d7;
  border-radius: 50%;
  background: #fafafa;
  color: #151515;
  font: 28px/1 Arial, sans-serif;
  cursor: pointer;
}
.ad-controls button:focus-visible { outline: 2px solid #151515; outline-offset: 2px; }
@media (min-width: 768px) {
 .ad-controls button {
  position: absolute;
  z-index: 2;
  top: calc(50% - 22px);
 }
 .ad-controls button:first-child { left: -8px; }
 .ad-controls button:last-child { right: -8px; }
}
@media (max-width: 767px) {
 .ad-carousel { --motif-width: 86%; width: calc(100vw - 24px); }
 .ad-slide[data-position="previous"] { transform: translateX(-13%) scale(.88); }
 .ad-slide[data-position="next"] { transform: translateX(13%) scale(.88); }
}

/* The homepage and portfolio use the same always-visible project-card treatment. */
.home-services{max-width:1100px;padding:0 24px;text-align:center}
.home-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;text-align:left}
.home-service-card{display:block}
:is(.home-service-card,.portfolio-card){position:relative;overflow:hidden;isolation:isolate;border-radius:12px;color:#fff;text-decoration:none}
:is(.home-service-card,.portfolio-card) img{display:block;width:100%;height:auto;transition:transform .3s ease}
:is(.home-service-card,.portfolio-card)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 44%,rgb(17 17 17/.3) 60%,rgb(17 17 17/.91) 100%)}
.portfolio-card{width:100%}
.portfolio-invitation {
  aspect-ratio: 1220 / 813;
  background: #555;
}
.portfolio-invitation:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}
.portfolio-section { width: 100%; margin: clamp(52px, 7vw, 96px) auto 64px; text-align: center; }
.portfolio-section .portfolio-section-title {
  width: auto;
  margin: 0 20px;
  text-wrap: balance;
}
.portfolio-section:not(.portfolio-overview-section) .portfolio-section-title {
  font-size: clamp(24px, 7.7vw, 40px);
  line-height: 1.3;
}
.portfolio-section .portfolio-section-subtitle { margin: 12px auto 0; width: calc(100% - 40px); }
.portfolio-section .portfolio-grid { margin-top: 28px; margin-bottom: 0; }
.portfolio-section .portfolio-card-caption { text-align: left; }
.portfolio-client-projects > .portfolio-card { display: block; }
.portfolio-client-card:not(:has(> img:not(.portfolio-client-tray))) { aspect-ratio: 1220 / 813; background-color: #e24762; }
.portfolio-client-card > .portfolio-client-tray {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 31px;
  height: 31px;
  pointer-events: none;
}
.portfolio-back { margin: 32px auto 48px; padding-inline: 16px; text-align: center; }
/* Keep wrapped titles legible when the cards are narrower. */
@media(max-width:1100px){.portfolio-card::after{background:linear-gradient(180deg,transparent 26%,rgb(17 17 17/.72) 55%,rgb(17 17 17/.91) 100%)}}
:is(.home-service-caption,.portfolio-card-caption){position:absolute;z-index:1;inset:auto 22px 21px;text-shadow:0 1px 8px rgb(0 0 0/.75)}
.home-service-caption{display:flex;align-items:baseline;gap:13px}
.home-service-number{flex:none;color:#fffe86;font-family:Montserrat,Arial,sans-serif;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
:is(.home-service-caption,.portfolio-card-caption) h2{margin:0 0 5px;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:clamp(20px,2.3vw,30px);font-style:italic;font-weight:700;line-height:1.12}
:is(.home-service-caption,.portfolio-card-caption) p{margin:0;color:#fff;font-family:Montserrat,Arial,sans-serif;font-size:clamp(13px,1.2vw,15px);line-height:1.38}
.button1.w-button {
  padding: 12px 19px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-transform: none;
}
.button1.buttonblack.w-button { color: #fff; }
.caro-call-details {
  margin: 8px 0 0;
  font: 500 13px/1.4 Montserrat, Arial, sans-serif;
}
#caro-call-details { scroll-margin-block-start: 350px; }
.home-services .home-services-portfolio{margin-top:48px}
.home-services-portfolio:hover{text-decoration:underline}
@media(hover:hover) and (prefers-reduced-motion:no-preference){:is(.home-service-card,a.portfolio-card):hover img:not(.portfolio-client-tray){transform:scale(1.025)}}
@media(max-width:660px){
 .home-services{max-width:540px;padding:0 16px}
 .home-services-grid{grid-template-columns:1fr;gap:14px}
 .home-service-caption{inset:auto 16px 16px;gap:10px}
}
@media(max-width:767px){
 .project-grid.portfolio-grid{grid-template-columns:minmax(0,1fr)}
 .portfolio-card-caption{inset:auto 16px 16px}
}
@media(min-width:1101px){
 .project-grid.portfolio-grid{margin-top:24px}
 .portfolio-card-caption h2{font-size:calc(clamp(20px,2.3vw,30px) - 2px)}
}
.portfolio-overview-section .portfolio-grid { margin-top: 40px; }
@media(min-width:1101px){.navbar-ads-homepage.mobile{display:none!important}.navbar-ads-homepage.desktop{display:flex!important}}
@media(max-width:1100px){
 .navbar-ads-homepage.desktop{display:none!important}
 .navbar-ads-homepage.mobile{display:flex!important;position:relative;height:80px;padding:0;align-items:center}
 .navbar-burger-icon-wrapper{background:#fafafa;border-radius:16px;width:44px;height:44px;margin-left:20px;padding:6px}
 .navbar-ads-homepage.mobile .nav-burger-items{position:absolute;top:0;left:0;z-index:-1;background:#fafafa;flex-direction:column;align-items:center;gap:12px;width:100%;margin:0;padding:88px 20px 24px;border-radius:0 0 16px 16px;max-height:100dvh;overflow-y:auto}
 .nav-burger-items .link-block-2.ads{display:block}
 .nav-burger-items .navbar-item-wrapper{background:transparent}
 .navbar-ads-homepage.mobile .nav-burger-items .text-6{font-weight:800}
 .navbar-ads-homepage.mobile .nav-burger-items .nav-icon-wrapper{margin-top:16px}
}
@media(max-width:479px){.project-grid,.project-grid.detail{grid-template-columns:minmax(0,1fr)}.navbar-ads-homepage.mobile .nav-burger-items{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:360px){.kategorien .mein-3c-modell-stop-scrolling-system-2{font-size:18px;line-height:2.2}.span-circled::after{border-width:4px}}

@media(max-width:479px){
 .blackbox-wrapper,.blackbox-container,.blacbox-under{width:100%;min-width:0;max-width:100%}
 .blackbox-container>.blackbox{width:calc(100% - 24px);max-width:100%;padding:18px 16px;font-size:clamp(20px,5.6vw,27px);line-height:1.25}
 .blackbox-container .paragraph-6{max-width:100%;overflow-wrap:anywhere}
 .blacbox-under .text-5{white-space:normal;overflow-wrap:break-word}
 .kategorien .mein-3c-modell-stop-scrolling-system-2{font-size:clamp(18px,5.4vw,25px);line-height:2.2}
 .mein-3c-modell-stop-scrolling-system-2.zentriert{font-size:clamp(18px,5.4vw,25px);line-height:2.2}
}

@media(max-width:479px){.kategorien .span-circled{font-size:inherit}}

.ad-image{width:auto}

.faq-toggle:focus-visible{outline:3px solid #111;outline-offset:4px}
.faq-toggle[aria-expanded=true] .plus-svg{display:none}
.faq-toggle[aria-expanded=true] .minus-svg{display:block}
.faq-toggle[aria-expanded=false] .minus-svg{display:none}
[hidden]{display:none!important}

/* Hero height follows the portrait (--hero-ratio from the build), capped by the window:
   tall windows no longer get an empty band above it. Headline sits relative to the hero,
   below the chin, instead of relative to the window. */
.container.header,.container.header.mobile{container-type:size;height:min(100vh,max(440px,calc(100vw*var(--hero-ratio,1.46))));height:min(100svh,max(440px,calc(100vw*var(--hero-ratio,1.46))))}
.profile-image-wrapper.hero-sectoion-text,.profile-image-wrapper.hero-sectoion-text.mobile{padding-bottom:25vh;padding-bottom:25cqh}
.image-10.hero-section-headline{max-height:32cqh;max-width:88cqw}
@media(max-width:479px){.container.header.mobile{height:max(440px,calc(100vw*var(--hero-ratio,1.46)))}}

/* Both openings use the original portrait proportions and clip their own artwork. */
.home-hero-backup,
.caroline-hero {
  --hero-ratio: 1.4572;
  position: relative;
  overflow: hidden;
}
.hero-section-headline.caroline-hero-wordmark {
  --wordmark-width: min(537px, 88cqw, calc(32cqh * 537 / 286));
  width: var(--wordmark-width);
  margin-bottom: calc(var(--wordmark-width) * 40 / 537);
}
.hero-backup-art {
  position: absolute;
  top: 49%;
  left: 50%;
  height: min(132cqh, 135cqw);
  aspect-ratio: 1096 / 1329;
  transform: translate(-50%, -47%);
}
.hero-backup-art img { display: block; width: 100%; height: 100%; }
.hero-backup-art::after {
  content: "";
  position: absolute;
  top: 72.2%;
  left: 69.1%;
  width: 10%;
  height: 5%;
  transform: translate(-50%, -50%) rotate(-17deg);
  background: radial-gradient(ellipse, #fff, transparent 70%);
  mix-blend-mode: screen;
  opacity: .35;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .home-hero-backup .hero-backup-art { animation: backup-hero-float 5.6s ease-in-out infinite; }
  .hero-backup-art::after { animation: backup-led-glow 3.6s ease-in-out infinite alternate; }
}
@keyframes backup-hero-float {
  0%, 100% { translate: 0 -4px; }
  50% { translate: 0 4px; }
}
@keyframes backup-led-glow {
  from { opacity: .2; }
  to { opacity: .75; }
}

@media (max-width: 991px) {
  .home-page .mein-3c-modell-stop-scrolling-system-2,
  .home-factory-case .home-factory-case-title,
  .caroline-intro .caroline-intro-heading,
  .portfolio-overview-section .portfolio-section-title,
  .mein-3c-modell-stop-scrolling-system-2.zentriert.relevance-heading {
    font-size: clamp(24px, 7.7vw, 40px);
    line-height: 1.3;
  }
  .home-page .mein-3c-modell-stop-scrolling-system-2 .span-circled,
  .relevance-heading .span-circled {
    font-size: inherit;
    line-height: inherit;
  }
  :is(.home-page .main-wrapper, .caroline-intro) > .container.first { width: 100%; }
  .home-page .container.first.relevanz.projekttext.titel:not(.cta) {
    width: min(90%, 540px);
  }
  .home-page .container.first.relevanz.projekttext.titel.backup.cta {
    width: min(540px, calc(100% - 32px));
  }
}
@media (min-width: 768px) {
  :is(.home-page .main-wrapper, .caroline-intro) {
    width: min(100%, 800px);
    margin-inline: auto;
  }
  :is(.home-page .main-wrapper, .caroline-intro) > .container.first {
    width: min(760px, calc(100vw - 48px));
    max-width: none;
  }
}
.caroline-intro-copy { margin-bottom: 0; }
.caroline-intro-copy + .intro-followup { margin-top: 16px; }
.caroline-model-break,
.caroline-intro-wrap { display: none; }
.home-page .home-intro-heading-break,
.home-page .home-intro-mobile-break { display: none; }

@media (min-width: 360px) and (max-width: 767px) {
  .home-page .home-intro-mobile-break { display: revert; }
}

@media (min-width: 360px) and (max-width: 374px) {
  .home-page .home-intro-copy {
    width: calc(100vw - 24px);
    align-self: center;
  }
}

@media (max-width: 767px) {
  .home-page .mein-3c-modell-stop-scrolling-system-2,
  .home-factory-case .home-factory-case-title,
  .caroline-intro .caroline-intro-heading,
  .portfolio-overview-section .portfolio-section-title {
    font-size: clamp(24px, 7.7vw, 30px);
  }
  .container.first.relevanz.projekttext.titel.portfolio-detail-heading {
    width: min(calc(100% - 32px), 540px);
  }
  .portfolio-detail-heading > .mein-3c-modell-stop-scrolling-system-2.zentriert,
  .container.first.caroline > .mein-3c-modell-stop-scrolling-system-2.zentriert {
    font-size: clamp(23px, 7.1vw, 40px);
    line-height: 1.18;
    text-transform: none;
    text-wrap: balance;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .container.first.caroline > .mein-3c-modell-stop-scrolling-system-2.zentriert {
    width: min(calc(100vw - 32px), 540px);
  }
  :is(.home-page .main-wrapper, .caroline-intro) > .undercircle { display: none; }
  :is(.home-page .main-wrapper, .caroline-intro) > .container.first {
    margin-top: 48px;
    margin-bottom: 35px;
  }
  :is(.home-page .main-wrapper, .caroline-intro) > .container.first > .mein-3c-modell-stop-scrolling-system-2 {
    text-align: center;
  }
  .home-page .home-intro-heading,
  .caroline-intro .caroline-intro-heading {
    text-wrap: balance;
  }
  .home-page .home-intro-heading {
    width: min(calc(100% + 16px), calc(100vw - 20px));
    align-self: center;
  }
  .home-page .home-intro-heading-break { display: revert; }
  .home-page .home-intro-copy,
  .caroline-intro .caroline-intro-copy { margin-top: 22px; }
  .home-page .home-intro-line { display: none; }
  .caroline-question-break,
  .caroline-quote br { display: none; }
  .caroline-model-break,
  .caroline-intro-wrap { display: revert; }
  .caroline-model-break + .text-span-6 {
    font-size: clamp(24px, 7.2vw, 34px);
    white-space: nowrap;
  }
  .stopper.caro .caroline-quote,
  :is(.caroline-belief, .ad-creatives-booking) h2.creative-ads-die-den-scroll-stoppen-4 {
    font-size: clamp(20px, 6.3vw, 28px);
    line-height: 1.23;
    text-wrap: balance;
  }
  .home-page .home-services .home-services-portfolio { margin-top: 28px; }
  .home-page .container._3c-modell { padding-bottom: 72px; }
  .home-page .blackbox-wrapper { gap: 48px; padding-top: 76px; }
  .home-page .blacbox-under { margin-top: 26px; }
  .home-page #LineAbsolute { height: calc(100% + 72px); }
  .home-page .container.stopper.ohne { margin-bottom: 64px; }
  .home-page .container.first.relevanz.projekttext.titel.backup.cta {
    margin-bottom: 64px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .backup-journey .line-absolute-circle {
    translate: 0 var(--journey-offset, 0px);
    pointer-events: none;
  }
  .backup-journey .blackbox-container > .blackbox,
  .backup-journey .blacbox-under {
    position: relative;
    z-index: 1;
  }
  .backup-journey .blacbox-under { background: #fafafa; }
  .backup-journey .journey-current { color: #fffe86; }
  .backup-journey.journey-complete .line-absolute-circle { opacity: 0; }
}

/* Brand logo keeps its original place top right; the navigation ends before it.
   Once scrolled it shrinks into a small badge in the nav row and leads back up.
   One continuous size from tablet to desktop (no jump at the menu breakpoint). */
:root{--logo:clamp(120px,14.6vw,210px)}
.site-logo{position:fixed;top:30px;right:40px;z-index:11;display:block;box-sizing:border-box;width:var(--logo);aspect-ratio:1;padding:0;border-radius:50%;background:rgb(250 250 250/0)}
.site-logo img{display:block;width:100%;height:auto}
.logo-ready .site-logo{transition:width .3s ease,top .3s ease,right .3s ease,padding .3s ease,background-color .3s ease}
.is-compact .site-logo,.menu-open .site-logo{width:60px;top:19px;right:calc(40px + (var(--logo) - 60px)/2);padding:4px;background:#fafafa}
@media(max-width:1100px){
 .site-logo{top:24px;right:24px}
 .is-compact .site-logo,.menu-open .site-logo{width:64px;top:8px;right:16px;padding:4px}
}
/* Narrow screens: the logo is a constant badge opposite the menu button, clear of the hero motif. */
@media(max-width:767px){:root{--logo:60px}.site-logo,.is-compact .site-logo,.menu-open .site-logo{width:60px;top:10px;right:16px;padding:4px;background:#fafafa}}

/* Landscape mockups (e.g. TOFU-ADS) start below the brand corner instead of running into the logo;
   the hero grows by the same inset, so the motif keeps its size and no band opens above it. */
.container.header.wide-motif{--motif-top:calc(var(--logo)*.5);height:min(100vh,max(440px,calc(100vw*var(--hero-ratio) + var(--motif-top))));height:min(100svh,max(440px,calc(100vw*var(--hero-ratio) + var(--motif-top))))}
.container.header.wide-motif>.profile-image-wrapper:not(.hero-sectoion-text){box-sizing:border-box;padding-top:var(--motif-top)}

/* Scrolled: the sticky nav row (desktop badge centred on the link row) gets a quiet surface in the page colour, so content no longer runs
   between the links. Over the hero at the top it stays transparent. */
.navbar-ads-wrapper{transition:background-color .2s ease,box-shadow .2s ease}
:root{--nav-edge:0 1px 0 rgb(17 17 17/.08),0 10px 24px -18px rgb(17 17 17/.35)}
.is-compact .navbar-ads-wrapper{background:#fafafa;box-shadow:var(--nav-edge)}
.navbar-ads-homepage.mobile .nav-burger-items.is-open{box-shadow:var(--nav-edge)}

.home-factory-case {
  width: min(calc(100% - 48px), 1052px);
  scroll-margin-top: 112px;
  margin: clamp(80px, 10vw, 144px) auto;
  text-align: center;
}
.home-factory-case-rooftop { margin: 0 0 16px; }
.home-factory-case-title {
  margin: 0 auto;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  #creative-backup-in-action .home-factory-case-title {
    max-width: 680px;
    hyphens: manual;
    overflow-wrap: normal;
  }
}
.home-factory-case-title,
.portfolio-overview-section .portfolio-section-title {
  text-transform: uppercase;
}
.home-factory-case-art {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 2 / 1;
  gap: 4px;
  margin: clamp(24px, 4vw, 44px) 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fafafa;
}
.home-factory-case-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-factory-case-main { grid-row: span 2; }
.home-factory-case-copy { max-width: 680px; margin: 0 auto; }
.home-factory-case + .portfolio-section { margin-top: 0; }
.creative-backup-case-gallery .project-grid {
  width: min(calc(100% - 40px), 1052px);
  margin-inline: auto;
  margin-bottom: 0;
}
.creative-backup-case-gallery .portfolio-motif-placeholder { aspect-ratio: 3 / 2; }
.portfolio-work-heading + .home-project-container { margin-top: 0; }
.portfolio-work-heading { margin-bottom: 0; }
.portfolio-work-heading > .portfolio-section-title {
  hyphens: auto;
  overflow-wrap: anywhere;
}
.portfolio-section.portfolio-work-section > .project-grid,
.portfolio-work-heading + .home-project-container > .project-grid { margin-top: 40px; }

@media (max-width: 600px) {
  .home-factory-case { width: calc(100% - 40px); }
  .home-factory-case-art {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1.8fr) minmax(0, 1fr);
    aspect-ratio: 1 / 1;
  }
  .home-factory-case-main { grid-area: 1 / 1 / 2 / -1; }
}
.portfolio-motif-crop { min-height: 0; overflow: hidden; }
.portfolio-motif-placeholder {
  display: grid;
  place-items: center;
  padding: 12px;
  background: #e9e8e6;
  color: #444;
  font: 500 13px/1.4 Montserrat, Arial, sans-serif;
}