/* A shared editorial language for the Kuche & Bagno studio. */
#kb-site-preview {
  --studio-paper: #faf8f4;
  --studio-wash: #f0eae5;
  --studio-lilac: #eee7ef;
  --studio-rule: #cfc2d0;
  --studio-note: #78647e;
  --studio-pad: clamp(24px, 5.6vw, 80px);
  --studio-display: 'playfair display', Georgia, serif;
  --soft: #f3efeb;
  --line: #ded5df;
}
#kb-site-preview main { background: var(--studio-paper); }
#kb-site-preview h1 { font-family: var(--studio-display); font-weight: 400; letter-spacing: -.035em; }
#kb-site-preview h2 { font-family: var(--studio-display); font-weight: 400; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.16; letter-spacing: -.025em; }
#kb-site-preview h3 { letter-spacing: -.015em; }
#kb-site-preview main p { line-height: 1.78; }
#kb-site-preview main .kicker { font-size: 10px; line-height: 1.65; letter-spacing: .18em; }
#kb-site-preview main figcaption { color: #756779; line-height: 1.65; }
#kb-site-preview main :is(.textlink, .action) { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
#kb-site-preview main .textlink { border-bottom-color: #b5a2bc; }
#kb-site-preview main .textlink:hover { border-bottom-color: var(--purple); }
#kb-site-preview :focus-visible { outline: 2px solid #8c749c; outline-offset: 5px; }
#kb-site-preview main .section:where(:not(.compact):not(.story)) { padding: clamp(44px, 6vw, 84px) var(--studio-pad); }
#kb-site-preview main .sectionhead { margin-bottom: 38px; gap: 36px; }
#kb-site-preview main .sectionhead > p { line-height: 1.75; }

/* Shared architectural header linework is defined in studio-texture.css. */
#kb-site-preview .polished-header { border-bottom-color: #cfc2d0; }
#kb-site-preview .crumb { padding-inline: var(--studio-pad); background: #f6f2ed; border-bottom-color: #e1d8de; font-size: 11px; }
#kb-site-preview .crumb::after { content: '+'; margin-left: auto; color: #9c87a4; font: 300 23px/1 sans-serif; }

/* Quiet geometric linework: a small reference to drawing and proportion. */
#kb-site-preview .studio-opening { position: relative; isolation: isolate; }
#kb-site-preview .studio-opening::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('studio-linework.svg') right center / min(90%, 1100px) auto no-repeat; opacity: .26; pointer-events: none; }
#kb-site-preview .hero { background: #f2ede7; }
#kb-site-preview .hero .hero-copy { padding: clamp(34px, 5vw, 72px) var(--studio-pad); }
#kb-site-preview .hero .hero-copy h1 { font: 400 clamp(40px, 4.8vw, 69px)/1.08 var(--studio-display); letter-spacing: -.035em; }
#kb-site-preview .hero .hero-copy p:not(.kicker) { max-width: 49ch; }
#kb-site-preview .hero figure { border-left: 1px solid #d8ccd9; }
#kb-site-preview .hero figure::after { content: ''; position: absolute; inset: 18px; border: 1px solid #ffffff4d; pointer-events: none; }
#kb-site-preview .brand-story-hero, #kb-site-preview .brand-family-intro { background-color: #f3eee8; }
#kb-site-preview .brand-story-hero .brand-photo { position: relative; padding: 13px 0 0 13px; border-top: 1px solid #b7a4bd; border-left: 1px solid #b7a4bd; }
#kb-site-preview .brand-story-hero .brand-photo figcaption { padding-top: 14px; }
#kb-site-preview .brand-story-nav, #kb-site-preview .service-jump, #kb-site-preview .story-jumps { background: var(--studio-paper); border-color: var(--studio-rule); }
#kb-site-preview .brand-story-nav a { font-size: 12px; letter-spacing: .03em; }

/* Numbered chapter dividers carry the same rhythm across stories. */
#kb-site-preview main :is(.section, .service-section, .story-section).studio-chapter { position: relative; isolation: isolate; padding-top: clamp(100px, 9vw, 128px); }
#kb-site-preview .studio-chapter-tag { position: absolute; top: 29px; left: var(--studio-pad); right: var(--studio-pad); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--studio-rule); color: var(--studio-note); font: 400 9px/1.5 signika, sans-serif; text-transform: uppercase; letter-spacing: .15em; pointer-events: none; }
#kb-site-preview .studio-chapter-tag span:first-child::before { content: '+'; display: inline-block; margin-right: 14px; font: 300 16px/1 sans-serif; vertical-align: -1px; color: #9b83a3; }
#kb-site-preview .studio-chapter-ghost { position: absolute; z-index: -1; top: 53px; right: var(--studio-pad); font: 400 clamp(110px, 15vw, 210px)/1 var(--studio-display); letter-spacing: -.08em; color: #75517f0c; pointer-events: none; }
#kb-site-preview .studio-chapter :is(.service-heading, .story-heading) { position: relative; }
#kb-site-preview .studio-chapter.purple .studio-chapter-tag, #kb-site-preview .studio-chapter.story-closer .studio-chapter-tag { color: #e0d2e5; border-color: #80638d; }
#kb-site-preview .studio-chapter.purple .studio-chapter-ghost, #kb-site-preview .studio-chapter.story-closer .studio-chapter-ghost { color: #ffffff08; }

/* Photography stays central; the paper edge gives images a deliberate setting. */
#kb-site-preview .photo-home { --story-paper: #f1ece6; --story-pad: var(--studio-pad); }
#kb-site-preview .photo-home .home-opening > .story-opening { position: relative; isolation: isolate; }
#kb-site-preview .photo-home .home-opening > .story-opening::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('studio-linework.svg') 95% 50% / 65% auto no-repeat; filter: brightness(3); opacity: .16; pointer-events: none; }
#kb-site-preview .photo-home .home-first-caption { border-bottom: 1px solid var(--studio-rule); padding-block: 19px; }
#kb-site-preview .photo-home .details-signature { background: #f2ede7; }
#kb-site-preview .details-composition .editorial-photo { position: relative; padding: 12px 12px 0; background: #fffdf9; box-shadow: 0 18px 48px #3c144c0a; }
#kb-site-preview .details-composition .editorial-photo figcaption { padding: 13px 2px 15px; max-width: 100%; font-size: 11px; }
#kb-site-preview .details-composition .editorial-photo:nth-child(2) { margin-top: 90px; }
#kb-site-preview .photo-home .selected-projects .story-pair { gap: 7%; }
#kb-site-preview .photo-home .selected-projects .story-pair > :nth-child(2) { margin-top: 70px; }
#kb-site-preview .positioning-statement { position: relative; background: #eae1eb; text-align: center; padding-block: clamp(55px, 7vw, 100px); }
#kb-site-preview .positioning-statement::before { content: ''; position: absolute; top: 0; left: 50%; height: 30px; width: 1px; background: #a88cb1; }
#kb-site-preview .positioning-statement h2 { max-width: 22ch; margin-inline: auto; }
#kb-site-preview .positioning-statement > p:not(.kicker) { max-width: 68ch; margin-inline: auto; }
#kb-site-preview .positioning-statement .actions { justify-content: center; }
#kb-site-preview .client-paths .grid3 > article { border-top: 1px solid #c8b9cd; padding-top: 18px; }
#kb-site-preview .client-paths .route-photo { margin-bottom: 24px; }

/* A visual invitation into the actual design process on the homepage. */
#kb-site-preview .studio-process-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 8%; align-items: center; padding: 34px 0 65px; margin: 12px 0 35px; border-bottom: 1px solid var(--studio-rule); }
#kb-site-preview .studio-process-visual { position: relative; padding: 0 0 60px 42px; }
#kb-site-preview .studio-process-photo { display: block; padding: 10px; background: #fff; box-shadow: 0 15px 40px #3c144c0c; }
#kb-site-preview .studio-process-photo img { width: 100%; height: auto; }
#kb-site-preview .studio-process-sketch { position: absolute; left: 0; bottom: 0; width: 44%; padding: 10px; background: #fff; box-shadow: 0 9px 28px #3c144c1c; transform: rotate(-5deg); }
#kb-site-preview .studio-process-sketch img { height: auto; width: 100%; }
#kb-site-preview .studio-process-sketch figcaption { font-size: 10px; padding-top: 7px; }
#kb-site-preview .studio-process-copy h3 { font: 400 clamp(32px, 3.4vw, 47px)/1.13 var(--studio-display); margin-bottom: 24px; }
#kb-site-preview .studio-process-copy p { max-width: 42ch; }

/* The portfolio reads as an edited collection of projects. */
#kb-site-preview .portfolio-page > .studio-opening { padding-top: clamp(55px, 6vw, 85px); }
#kb-site-preview .portfolio-page > .studio-opening::before { inset: 0 0 auto; height: 500px; background-position: right top; }
#kb-site-preview .portfolio-page h1 { font-size: clamp(42px, 5.7vw, 78px); line-height: 1.08; max-width: 18ch; }
#kb-site-preview .portfolio-page > .section > p:not(.kicker):not(.fine) { max-width: 61ch; font-size: 18px; }
#kb-site-preview .portfolio-page .filters { border-block: 1px solid var(--studio-rule); padding: 12px 0; gap: 4px 20px; margin-top: 38px; }
#kb-site-preview .portfolio-page .filters button { padding: 9px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; min-height: 44px; }
#kb-site-preview .portfolio-page .filters button[aria-pressed=true] { color: var(--purple); border-bottom-color: var(--purple); background: transparent; }
#kb-site-preview #kb-project-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px 7%; align-items: start; }
#kb-site-preview #kb-project-grid .project-card { padding-top: 14px; border-top: 1px solid var(--studio-rule); margin-bottom: 14px; }
#kb-site-preview #kb-project-grid .project-card:nth-child(even) { margin-top: 70px; }
#kb-site-preview #kb-project-grid .project-card h3 { font-size: clamp(25px, 2.4vw, 34px); line-height: 1.22; }
#kb-site-preview #kb-project-grid .project-card .kicker { margin: 22px 0 10px; }
#kb-site-preview #kb-project-grid .project-card p:not(.kicker) { max-width: 48ch; }
#kb-site-preview .project-chapter > .grid2 { gap: 6%; }
#kb-site-preview .project-summary { background: #f3eee9; padding-block: 28px; padding-inline: var(--studio-pad); border-color: var(--studio-rule); }

/* Manufacturers retain their own marks within one consistent editorial frame. */
#kb-site-preview .brand-intro-columns { gap: 9%; border-top: 1px solid var(--studio-rule); padding-top: 34px; }
#kb-site-preview .brand-intro-columns > p:first-child { font: 400 clamp(21px, 2vw, 27px)/1.6 var(--studio-display); }
#kb-site-preview .brand-intro-columns .brand-signature { font: 400 12px/1.65 signika, sans-serif; margin-top: 22px; }
#kb-site-preview .brand-family-grid { gap: 48px 38px; align-items: start; }
#kb-site-preview .brand-family-card { border-top: 1px solid var(--studio-rule); padding-top: 14px; }
#kb-site-preview .brand-family-card > a:first-child { padding: 10px; background: #f0ebe5; }
#kb-site-preview .brand-family-grid.brand-family-expanded > .brand-family-card:nth-child(3n + 2) { margin-top: 52px; }
#kb-site-preview .brand-heritage { background: #eee7ef; }
#kb-site-preview .brand-editorial > .brand-prose { border-left: 1px solid #cfbfd3; padding-left: 30px; }
#kb-site-preview .brand-project-grid { gap: 7%; }
#kb-site-preview .brand-project-grid > :nth-child(2) { padding-top: 65px; }
#kb-site-preview .brand-project-grid .brand-photo { padding-top: 12px; border-top: 1px solid var(--studio-rule); }

/* Drawing textures belong to their own project stories. */
#kb-site-preview .design-services-page:not(.cinema-editorial) { --service-paper: #f2ede9; }
#kb-site-preview .design-services-page:not(.cinema-editorial) .service-hero { padding-bottom: 62px; background-color: #f2ede7; }
#kb-site-preview .design-services-page:not(.cinema-editorial) .service-figure { padding: 12px; border: 1px solid #d7cbd9; background: #fffdf9; }
#kb-site-preview .design-services-page:not(.cinema-editorial) .service-figure .gallery-open { border: 0; }
#kb-site-preview .design-services-page:not(.cinema-editorial) .service-figure figcaption { font-size: 11px; }
#kb-site-preview #hut-ensuite-process { background: #f7f3ed; }
#kb-site-preview #hut-ensuite-process::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('hut-ensuite-drawing-2-1200.webp') center top / 150% auto no-repeat; filter: grayscale(1); opacity: .035; pointer-events: none; }
#kb-site-preview #design-process .service-heading h2 { max-width: 18ch; font-size: clamp(38px, 4.5vw, 62px); }
#kb-site-preview .service-process li::before { font: italic 33px/1.1 var(--studio-display); color: #94769f; }
#kb-site-preview .service-routes .service-number { font: italic 35px/1 var(--studio-display); }

/* A consistent closing edge, with the studio's original cross motif. */
#kb-site-preview > footer { position: relative; background: #fff; padding: 46px var(--studio-pad); border-top: 1px solid #c9b8cf; }
#kb-site-preview > footer::before { content: '+'; position: absolute; top: -15px; right: var(--studio-pad); padding: 0 10px; background: #fff; color: #9b83a3; font: 300 24px/1 sans-serif; }

@media (max-width: 1000px) {
  #kb-site-preview .brand-family-grid.brand-family-expanded > .brand-family-card:nth-child(3n + 2) { margin-top: 0; }
  #kb-site-preview .brand-family-grid.brand-family-expanded > .brand-family-card:nth-child(even) { margin-top: 42px; }
  #kb-site-preview .brand-editorial > .brand-prose { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  #kb-site-preview .studio-process-feature { grid-template-columns: 1fr; gap: 34px; padding-bottom: 40px; }
  #kb-site-preview .studio-process-visual { max-width: 610px; }
  #kb-site-preview .hero .hero-copy { padding: 36px var(--studio-pad); }
  #kb-site-preview main :is(.section, .service-section, .story-section).studio-chapter { padding-top: 95px; }
  #kb-site-preview .studio-chapter-tag { top: 24px; font-size: 8px; gap: 12px; }
  #kb-site-preview .studio-chapter-tag span:last-child { display: none; }
  #kb-site-preview .studio-chapter-ghost { top: 55px; font-size: 120px; }
  #kb-site-preview .details-composition .editorial-photo:nth-child(2) { margin-top: 45px; }
  #kb-site-preview .photo-home .selected-projects .story-pair > :nth-child(2) { margin-top: 0; }
  #kb-site-preview .studio-opening::before { background-size: auto 85%; opacity: .18; }
}
@media (max-width: 700px) {
  #kb-site-preview.enhanced main > article:not(.cinema-editorial) nav:is(.brand-story-nav, .service-jump, .story-jumps) { display: flex; }
  #kb-site-preview #kb-project-grid { grid-template-columns: 1fr; gap: 32px; }
  #kb-site-preview #kb-project-grid .project-card:nth-child(even) { margin-top: 0; }
  #kb-site-preview .hero figure { border: 0; }
  #kb-site-preview main .sectionhead { gap: 22px; }
  #kb-site-preview .studio-process-visual { padding-left: 25px; padding-bottom: 48px; }
  #kb-site-preview .studio-process-sketch { padding: 7px; width: 48%; }
  #kb-site-preview .portfolio-page > .section > p:not(.kicker):not(.fine) { font-size: 17px; }
}
@media (max-width: 640px) {
  #kb-site-preview .brand-family-grid.brand-family-expanded > .brand-family-card:nth-child(even) { margin-top: 0; }
  #kb-site-preview .brand-project-grid > :nth-child(2) { padding-top: 0; }
  #kb-site-preview .details-composition .editorial-photo { padding: 7px 7px 0; }
  #kb-site-preview .details-composition .editorial-photo figcaption { font-size: 10px; }
  #kb-site-preview .brand-family-grid { gap: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  #kb-site-preview main :is(.textlink, .action) { transition: none; }
}
@media (forced-colors: active) {
  #kb-site-preview .studio-opening::before, #kb-site-preview .studio-chapter-ghost,
  #kb-site-preview .photo-home .home-opening > .story-opening::before,
  #kb-site-preview #hut-ensuite-process::before, #kb-site-preview .hero figure::after { display: none; }
}
/* A quiet brand texture behind the relationship statement. */
#kb-site-preview .positioning-statement{isolation:isolate}
#kb-site-preview .positioning-statement::after{content:"";position:absolute;inset:0;z-index:-1;background-color:#3c144c;-webkit-mask:url("studio-cross-pattern.png") left top / 200px 200px repeat;mask:url("studio-cross-pattern.png") left top / 200px 200px repeat;opacity:.045;pointer-events:none}
@media(forced-colors:active){#kb-site-preview .positioning-statement::after{display:none}}