/* Kibo surface system: paper, ink, lime and lavender. */
body[data-view] {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 5% 3%, #d5fa5738, transparent 24%), radial-gradient(ellipse at 95% 35%, #e7e2ee85, transparent 26%), radial-gradient(#22251f14 .65px, transparent .65px);
  background-size: auto, auto, 26px 26px;
}
.site-header { background: #f4f4ecf5; }
.hero { position: relative; gap: 56px; padding-block: 90px 80px; }
.hero-copy { position: relative; isolation: isolate; }
.hero-copy::before {
  content: ''; position: absolute; inset: -32px -27px -28px; z-index: -2;
  border: 1px solid #b6c69a; border-radius: 28px;
  background: radial-gradient(ellipse at 0 0, #d5fa578c, transparent 66%), linear-gradient(135deg, #edf2df, #e1e9d1);
  box-shadow: 0 18px 45px #22251f06;
}
.hero-copy::after {
  content: ''; position: absolute; right: -5px; bottom: -14px; z-index: -1;
  width: 175px; height: 175px; background: #778957; opacity: .094;
  -webkit-mask: url('/assets/kibo-spark.svg') center / contain no-repeat;
  mask: url('/assets/kibo-spark.svg') center / contain no-repeat; pointer-events: none;
}
.hero .eyebrow { width: fit-content; max-width: 100%; padding: 8px 11px; border: 1px solid #a9bd86; background: #f7faeecc; border-radius: 30px; letter-spacing: 1.3px; }
.hero h1 { position: relative; }
.hero-intro { color: #4c5842; }
.hero-note { color: #526044; max-width: 80%; }
.hero-art { border: 1px solid #526044; box-shadow: 0 20px 45px #22251f15; }
.ticker { background: var(--ink); border-color: var(--ink); }
.ticker-inner { color: var(--paper); }
.ticker i { color: var(--lime); }
.section-heading .eyebrow, .contact-copy > .eyebrow, .page-intro > .eyebrow {
  width: fit-content; max-width: 100%; background: #e7e2ee; border: 1px solid #d1c9df;
  border-radius: 30px; padding: 7px 12px; color: #454139; letter-spacing: 1.1px;
}
.section-heading h2::after { content: ''; display: block; width: 68px; height: 5px; margin-top: 21px; background: var(--lime); border-radius: 10px; }
.section-heading > p { padding: 18px 21px; border: 1px solid var(--line); border-left: 4px solid #93a968; border-radius: 0 16px 16px 0; background: #fafbf5; }
.service-card { position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 5px 14px #22251f05; }
.service-card::before { content: ''; position: absolute; width: 155px; height: 155px; border: 1px solid #22251f12; border-radius: 50%; right: -65px; top: -65px; z-index: -1; pointer-events: none; }
.service-card:nth-child(1) { background: #d5fa57; border-color: #b6d744; --muted: #4c5a2e; --line: #8da63d60; }
.service-card:nth-child(2), .service-card:nth-child(5) { background: #e7e2ee; border-color: #d2c9df; --muted: #5f5968; --line: #c9bfd5; }
.service-card:nth-child(3) { background: #22251f; color: var(--paper); border-color: #22251f; --muted: #ccd5c0; --line: #f4f4ec35; }
.service-card:nth-child(4), .service-card:nth-child(6) { background: #e2e9d5; border-color: #c1cdb1; --muted: #556349; --line: #b4c2a2; }
.service-symbol { display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid currentColor; border-radius: 13px; color: #576b3b; background: #ffffff30; font-size: 28px; }
.service-card:nth-child(2) .service-symbol, .service-card:nth-child(5) .service-symbol { color: #6b5b7d; }
.service-card:nth-child(3) .service-symbol { color: var(--lime); background: #d5fa570a; }
.service-card:nth-child(1) .service-link { color: var(--paper); background: var(--ink); }
.service-link { color: var(--ink); }
.service-card:nth-child(3) a:focus-visible, .contact-copy a:focus-visible { outline-color: var(--lime); }
.service-card:hover { box-shadow: 0 16px 30px #22251f12; }
.service-card:nth-child(1):hover { background: #d5fa57; }
.service-card:nth-child(2):hover, .service-card:nth-child(5):hover { background: #e7e2ee; }
.service-card:nth-child(3):hover { background: #22251f; }
.service-card:nth-child(4):hover, .service-card:nth-child(6):hover { background: #e2e9d5; }
.work-section { padding-top: 48px; padding-bottom: 48px; background: #e7e2ee; border: 1px solid #d7cfe1; border-radius: 28px; }
.work-section .section-heading .eyebrow { background: var(--paper); }
.work-section .section-heading > p { border-color: #c9bfd5; border-left-color: #9786ab; background: #f5f2f8; }
.work-section .filter-row { width: fit-content; max-width: 100%; padding: 6px; border: 1px solid #cdc3d8; border-radius: 26px; background: #f4f0f8; }
.project-card:not(.product-feature) { padding: 12px; background: #fafbf6; border: 1px solid #22251f17; border-radius: 24px; box-shadow: 0 7px 18px #22251f05; }
.project-card:not(.product-feature) .project-cover { border-radius: 14px; }
.project-description { padding: 20px 12px 12px; }
.tag { background: #eef2e5; border-color: #d5deca; color: #536346; }
.product-feature { background: #d9efaa; border: 1px solid #b9cd92; }
.steps-grid { gap: 16px; }
.step { padding: 24px; min-width: 0; border: 1px solid #cbd5be; border-radius: 18px; background: #e6eddb; }
.step:nth-child(even) { background: #e7e2ee; border-color: #d3c9df; }
.step > .index { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--lime); }
.step h3 { overflow-wrap: anywhere; }
.values-panel { border: 1px solid #414c35; box-shadow: 0 15px 40px #22251f12; }
.values-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#d5fa5707 1px, transparent 1px), linear-gradient(90deg, #d5fa5707 1px, transparent 1px); background-size: 35px 35px; }
.contact-layout { gap: 30px; }
.contact-copy { padding: 34px; position: relative; isolation: isolate; overflow: hidden; background: #22251f; color: var(--paper); border: 1px solid #414d35; border-radius: 24px; }
.contact-copy::after { content: ''; position: absolute; bottom: -100px; right: -55px; width: 340px; height: 340px; background: #d5fa57; opacity: .063; -webkit-mask: url('/assets/kibo-spark.svg') center / contain no-repeat; mask: url('/assets/kibo-spark.svg') center / contain no-repeat; z-index: -1; pointer-events: none; }
.contact-copy > .eyebrow { background: #d5fa57; color: #22251f; border-color: #d5fa57; }
.contact-copy > p:not(.eyebrow) { color: #ccd5c0; }
.contact-copy .button.ink { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.contact-copy .button.ink:hover { background: #e1ff7a; }
.contact-copy .contact-channel { color: #e1e8d4; }
.contact-copy .contact-channel svg { color: var(--lime); }
.form-card { position: relative; background: #eaf0dc; border-top: 5px solid #a6c847; box-shadow: 0 15px 35px #22251f0a; }
.form-card input:not([type=checkbox]), .form-card select, .form-card textarea { background: #fafcf4; }
.page-intro { margin-top: 35px; padding: 35px; background: linear-gradient(120deg, #e3ebd4, #e7e2ee); border: 1px solid #ccd6bc; border-radius: 24px; }
.page-intro > p:not(.eyebrow) { color: #536048; }
.product-item h2 { display: inline-block; background: var(--lime); padding: 6px 12px; border-radius: 8px; }
.footer { margin-top: 25px; background: #f4f4ecb8; }
@media (min-width: 1800px) { .hero { gap: 76px; } }
@media (max-width: 1100px) { .hero { gap: 50px; } .step { padding: 19px; } .contact-copy { padding: 28px; } }
@media (max-width: 800px) {
  .hero { gap: 55px; padding-block: 62px 45px; }
  .hero-copy::before { inset: -24px -15px; border-radius: 24px; }
  .hero-note { max-width: 90%; }
  .work-section { width: calc(100% - 24px); padding-inline: 23px; padding-block: 35px; }
  .section-heading > p { max-width: 100%; width: 100%; padding: 15px 18px; }
  .section-heading h2::after { margin-top: 16px; }
  .steps-grid { gap: 16px; }
  .contact-copy { padding: 30px; }
  .page-intro { margin-top: 25px; padding: 28px 24px; }
}
@media (max-width: 500px) {
  .hero { padding-top: 55px; gap: 52px; }
  .hero-copy::before { inset: -22px -11px; border-radius: 21px; }
  .hero-copy::after { width: 145px; height: 145px; right: 0; bottom: 0; }
  .hero .eyebrow { padding: 7px 9px; letter-spacing: .65px; }
  .hero-art { min-height: 355px; }
  .section-heading .eyebrow, .contact-copy > .eyebrow, .page-intro > .eyebrow { font-size: 9px; letter-spacing: .9px; }
  .work-section { width: calc(100% - 16px); padding-inline: 15px; border-radius: 22px; }
  .project-card:not(.product-feature) { padding: 9px; border-radius: 20px; }
  .project-description { padding: 17px 8px 10px; }
  .product-feature { padding: 13px; }
  .step { padding: 20px 17px; }
  .step p { font-size: 12px; }
  .contact-copy { padding: 27px 23px; }
  .page-intro { padding: 25px 20px; }
}
@media (max-width: 359px) { .hero-copy::before { inset-inline: -9px; } .contact-copy { padding: 25px 19px; } .work-section { padding-inline: 12px; } }

/* Language capsule and service ranges */
.language-switch{position:relative;flex-shrink:0}.language-trigger{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:30px;background:var(--paper);font-size:11px;font-weight:600;transition:background .2s,box-shadow .2s}.language-trigger:hover,.language-trigger[aria-expanded=true]{background:var(--lime);box-shadow:0 4px 16px #22251f0d}.language-chevron{transition:transform .25s}.language-trigger[aria-expanded=true] .language-chevron{transform:rotate(180deg)}.language-panel{position:absolute;top:calc(100% + 12px);right:0;width:276px;background:var(--paper);padding:12px;border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 45px #22251f24;z-index:100;animation:language-enter .22s ease-out}.language-rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-radius:25px;background:#e3e8d8;padding:4px;isolation:isolate}.language-rail:before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/5);background:var(--lime);border-radius:22px;transform:translateX(calc(var(--selected)*100%));transition:transform .25s cubic-bezier(.2,.8,.2,1);z-index:-1;box-shadow:0 2px 6px #22251f13}.language-rail button{border:0;background:none;padding:10px 0;font-size:11px;min-height:40px;border-radius:20px}.language-panel p{font-size:11px;color:var(--muted);margin:10px 8px 2px}.price{font-size:clamp(16px,1.65vw,21px);white-space:nowrap;letter-spacing:-.5px}.price-unit{display:block;font-size:10px;color:var(--muted);margin-top:4px}.service-bottom>div{min-width:0}.service-link{flex-shrink:0}@keyframes language-enter{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}@media(max-width:500px){.language-trigger{gap:5px;padding:8px;font-size:10px}.language-trigger>span:first-child{display:none}.language-panel{right:-80px;width:min(276px,calc(100vw - 24px))}.price{font-size:21px}}

/* Fixed mobile header avoids sticky displacement during iOS toolbar changes. */
html{--site-header-height:89px;scroll-padding-top:calc(var(--site-header-height) + 16px)}
@media(max-width:1100px){
 html{--site-header-height:calc(79px + env(safe-area-inset-top,0px))}
 body[data-view]{padding-top:var(--site-header-height)}
 .site-header{position:fixed;top:0;left:0;right:0;width:100%;padding-top:env(safe-area-inset-top,0px);background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
 .site-header .mobile-nav{position:absolute;top:100%;left:0;right:0;width:100%;max-height:calc(100vh - var(--site-header-height));max-height:calc(100dvh - var(--site-header-height));overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 24px #22251f12}
}
@media(max-width:500px){html{--site-header-height:calc(73px + env(safe-area-inset-top,0px))}}

/* Let the responsive verification widget measure the actual grid width. */
.contact-layout > *{min-width:0}