/* The original Figma layout is the visual authority for company sections. */
:root { --paper:#fff; --white:#fff; --mint:#f4f4f4; --line:#bdbac8; --gutter:clamp(24px,4.7vw,68px); }
html,body { overflow-x:clip; }
body { background:#fff; }
html[lang=en] { --font:Outfit, sans-serif; }
html[lang=en] body { font-family:var(--font); }
.service-code,.mark-label,.brand-outline,.footer-email,.contact-direct,.language-link[lang=en] { font-family:Outfit, sans-serif; }
html[lang=en] .figma-hero .hero-copy h1 { font-size:2.8rem; font-weight:600; letter-spacing:-.03em; }
.sketch { position:absolute; pointer-events:none; user-select:none; max-width:none; }
h2 { font-size:2rem; line-height:1.6; }
.section { padding-block:76px; }
.button { min-height:44px; padding:10px 18px; border-radius:48px; }

/* Capsule navigation. */
.site-header { position:absolute; top:32px; width:100%; background:transparent; border:0; }
.header-row { width:min(860px,calc(100% - 48px)); min-height:68px; padding:8px 24px; gap:24px; background:rgba(0,0,0,.085); border-radius:40px; }
.brand-crop { width:80px; height:46px; }
.desktop-nav { gap:20px; }
.nav-link { font-size:.9375rem; min-height:44px; }
.site-header .nav-link:hover,.site-header .nav-link.is-active { color:var(--green-hover); }
.footer a:focus-visible { outline-color:#d0e9d5; }
.header-actions { gap:14px; }
.header-actions .button,.language-link { font-size:.9375rem; }

/* Original centered title and asymmetric violet ribbons. */
.figma-hero { padding:0; min-height:760px; overflow:clip; background:linear-gradient(263.23deg,rgba(221,232,238,.275) 8.78%,rgba(248,224,191,.136) 95.87%); }
.hero-stage { width:min(100%,1440px); min-height:760px; padding-block:239px 84px; position:relative; }
.figma-hero .hero-copy { position:relative; width:min(745px,calc(100% - 48px)); margin-inline:auto; z-index:1; container-type:inline-size; }
.figma-hero .hero-copy h1 { font-size:3rem; font-weight:600; line-height:1.55; }
.figma-hero .headline-first { display:flex; align-items:center; min-height:88px; padding-inline-start:28px; border:1px solid var(--line); border-radius:48px 32px 0 48px; }
.headline-first > span:first-child { flex:1; min-width:0; padding-block:4px; }
.headline-through { display:grid; place-items:center; min-height:88px; width:34%; flex-shrink:0; align-self:stretch; padding-inline:12px; border-radius:48px 32px 0 48px; color:white; background:var(--ink); }
.figma-hero .headline-second { display:flex; align-items:flex-start; margin-top:-3px; }
.headline-digital { width:75%; min-height:88px; padding:4px 12px; display:grid; place-items:center; text-align:center; background:var(--ink); color:white; border-radius:48px 32px 0 48px; font-weight:600; flex-shrink:0; }
html[dir=ltr] .headline-first,html[dir=ltr] .headline-through,html[dir=ltr] .headline-digital { border-radius:32px 48px 48px 0; }
.zonnet-mark { --mark-scale:1; position:relative; width:calc(186px * var(--mark-scale)); height:calc(90px * var(--mark-scale)); margin-top:3px; flex-shrink:0; }
.zonnet-mark > img { position:absolute; inset-inline-start:calc(126px * var(--mark-scale)); top:0; width:calc(90px * var(--mark-scale)); height:calc(90px * var(--mark-scale)); max-width:none; }
.mark-cap { position:absolute; top:0; inset-inline-start:0; width:calc(33px * var(--mark-scale)); height:calc(81px * var(--mark-scale)); background:white; border:1px solid var(--ink); border-radius:0 800px 800px 0; }
.mark-stem { position:absolute; inset-inline-start:calc(72px * var(--mark-scale)); top:calc(3px * var(--mark-scale)); width:calc(43px * var(--mark-scale)); height:calc(76px * var(--mark-scale)); background:var(--ink); border-radius:0 800px 800px 0; }
html[dir=ltr] .mark-cap,html[dir=ltr] .mark-stem { border-radius:800px 0 0 800px; }
.mark-label { position:absolute; right:calc(94px * var(--mark-scale)); top:calc(23px * var(--mark-scale)); width:calc(105px * var(--mark-scale)); height:calc(39px * var(--mark-scale)); display:grid; place-items:center; background:white; border:1px solid var(--ink); border-radius:600px; color:var(--ink); font-size:calc(18px * var(--mark-scale)); font-weight:600; letter-spacing:normal; }
html[dir=ltr] .mark-label { right:auto; left:calc(94px * var(--mark-scale)); }
.hero-description { position:relative; max-width:635px; margin-top:55px; }
.hero-description p { font-size:1.125rem; font-weight:500; line-height:1.9; }
.hero-rays { position:absolute; top:-42px; inset-inline-start:-42px; width:90px; height:80px; transform:scaleX(-1); }
html[dir=ltr] .hero-rays { transform:none; }
.hero-rays img { position:absolute; max-width:none; transform:rotate(119.22deg) skewX(-13.69deg); }
.hero-rays img:nth-child(1) { left:72px; top:24px; }.hero-rays img:nth-child(2) { left:37px; top:11px; }.hero-rays img:nth-child(3) { left:10px; top:54px; }
.figma-hero .hero-actions { margin-top:26px; gap:16px; }
.hero-tag { display:grid; place-items:center; width:142px; min-height:39px; border:1px solid; border-radius:600px; font-size:1.125rem; font-weight:600; line-height:1.65; }
.education { position:absolute; top:188px; inset-inline-start:13.2%; color:#0d6ca3; background:#e2f3fd; transform:rotate(5.42deg); }
.enterprise { position:absolute; top:188px; inset-inline-end:8.33%; color:#8c6503; border-color:#e89b32; background:#fef7e5; transform:rotate(-8.39deg); }
.innovation-tag { position:absolute; top:455px; inset-inline-end:8%; width:172px; height:110px; }
.innovation-tag .hero-tag { position:absolute; inset-inline-start:30px; top:69px; color:#3e6f47; background:#d0e9d5; border-color:#68b977; }
.cursor-art { position:absolute; inset-inline-start:-8px; top:-8px; transform:rotate(41.44deg) scaleX(-1); }
html[dir=ltr] .cursor-art { transform:rotate(-41.44deg); }
.hero-loop { inset-inline-end:24px; top:-3px; transform:rotate(-80.63deg) scaleX(-1); }
html[dir=ltr] .hero-loop { transform:rotate(80.63deg); }
.hero-star { top:573px; inset-inline-start:-12px; }
.hero-line { right:-352px; top:315px; transform:rotate(106.78deg) skewX(-.65deg); }
html[dir=ltr] .hero-line { right:auto; left:-352px; transform:rotate(-106.78deg) skewX(.65deg) scaleX(-1); }

/* Original three-card About composition, with updated company copy. */
.section-title { text-align:center; font-size:2rem; }
.section-title .ink-line,.section-heading h2 .ink-line { display:block; margin:8px auto 0; }
.brand-summary { padding-block:38px 76px; }
.brand-summary-grid { display:grid; grid-template-columns:minmax(0,340fr) minmax(0,529fr) minmax(0,387fr); gap:24px; margin-top:52px; }
.brand-values-card,.brand-quote-card,.brand-expertise-card { position:relative; min-width:0; min-height:321px; }
.brand-shape { position:absolute; inset:0; width:100%; height:100%; }
.brand-values { position:absolute; inset-inline:16px; bottom:30px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; }
.brand-value { display:inline-flex; justify-content:center; max-width:100%; padding:6px 10px; background:var(--green); color:white; border-radius:32px; font-size:.75rem; font-weight:500; line-height:1.7; text-align:center; }
.brand-value:nth-child(3n+1) { transform:rotate(-5deg); }.brand-value:nth-child(3n+2) { transform:rotate(5deg); }
.brand-quote-card { display:flex; align-items:center; justify-content:center; padding:88px 42px 32px; text-align:center; }
.brand-quote-mark { position:absolute; left:50%; top:42px; transform:translateX(-50%); max-width:none; }
.brand-quote-card blockquote { position:relative; margin:0; font-size:2rem; font-weight:500; line-height:1.8; }
.brand-expertise-card { display:flex; flex-direction:column; align-items:flex-start; padding:24px 32px 30px; color:white; overflow:hidden; }
.brand-expertise-card > p { position:relative; max-width:100%; font-size:1.125rem; font-weight:500; line-height:1.8; }
.brand-outline { position:absolute; inset-inline-start:40%; top:130px; font-size:4.8rem; line-height:1; white-space:nowrap; font-weight:500; color:transparent; -webkit-text-stroke:1px #b9b4ca; }
.brand-expertise-card .brand-focus { padding-right:24px; margin-top:auto; padding-top:100px; font-size:1.125rem; line-height:1.7; }
.brand-square { position:absolute; width:43px; height:45px; right:0; bottom:0; border-radius:10px; background:var(--ink); }
.brand-square::after { content:''; position:absolute; width:21px; height:19px; left:11px; top:14px; background:#dfdee4; border-radius:2px; }
.brand-more { text-align:center; margin-top:28px; }

/* New sections inherit the previous bordered-card components. */
.section-heading { display:block; text-align:center; margin-bottom:48px; }
.section-heading > p { max-width:740px; margin:20px auto 0; }
.services { position:relative; isolation:isolate; padding-block:90px 110px; }
.services::before { content:''; position:absolute; z-index:-1; inset:20px -5vw; background:#f4f4f4; transform:skewY(-3.3deg); }
.service-grid { gap:24px; }
.service-preview { min-height:290px; padding:28px; border:1px solid var(--line); border-radius:16px; background:white; }
.service-icon { display:grid; place-items:center; width:64px; height:64px; flex-shrink:0; background:#eae9ed; border-radius:16px; margin-bottom:18px; }
.service-icon img { width:auto; height:auto; max-width:32px; max-height:32px; }
.service-preview .service-code { margin-bottom:8px; }.service-preview h3 { font-size:1.5rem; }.service-preview p { font-size:1.125rem; line-height:1.8; }
.services > .container > .text-link { display:flex; width:max-content; margin-inline:auto; }
.usecases { padding-block:76px; background:white; color:var(--ink); }
.usecases .section-heading p { color:var(--ink-soft); }
.usecase-grid { gap:24px; }
.usecase-grid article { padding:28px; border:1px solid var(--line); border-radius:16px; background:white; }
.usecase-grid h3 { color:var(--ink); }.usecase-grid p { color:var(--ink-soft); }
.process-list { gap:24px; }
.process-list li { padding:26px 24px; border:1px solid #d2cde0; background:#f4f4f4; border-radius:16px; }
.process-list h3 { font-size:1.25rem; }.process-list li::before { margin-bottom:16px; }

/* Text and staggered cards, matching the earlier careers section. */
.careers { position:relative; overflow:clip; background:white; padding-block:70px 76px; }
.careers-grid { display:grid; grid-template-columns:minmax(0,568px) minmax(0,1fr); gap:90px; margin-top:64px; }
.careers-copy > h3 { font-size:3.25rem; font-weight:600; line-height:1.5; }
.careers-copy > p { margin-top:22px; color:var(--ink-soft); font-size:1.125rem; }
.career-value { display:flex; align-items:center; gap:16px; margin-top:24px; }
.career-value .service-icon { width:76px; height:76px; margin:0; }
.career-value h4 { margin:0; font-size:1.25rem; font-weight:600; line-height:1.6; }
.career-value p { font-size:1rem; line-height:1.8; color:var(--ink-soft); }
.careers-copy > .button { margin-top:30px; }
.culture-cards { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; align-content:start; padding-top:70px; }
.culture-card { padding:28px 22px; min-height:180px; border:.5px solid #c7b8ed; border-radius:16px; background:#f4f4f4; }
.culture-card > img { width:auto; height:auto; max-width:32px; max-height:32px; }
.culture-card h3 { margin-top:16px; font-size:1.25rem; line-height:1.5; }.culture-card p { margin-top:8px; font-size:1rem; line-height:1.7; color:var(--ink-soft); }
.culture-0 { grid-column:2; grid-row:1; }.culture-1 { grid-column:1; grid-row:2; margin-top:-40px; }.culture-2 { grid-column:2; grid-row:2; margin-top:40px; }
.careers-line { left:-484px; top:275px; transform:rotate(-76.87deg) skewX(-.65deg); }
html[dir=ltr] .careers-line { left:auto; right:-484px; transform:rotate(76.87deg) skewX(.65deg) scaleX(-1); }
.faq-grid { display:block; }.faq-grid > h2 { text-align:center; margin-bottom:44px; }.faq-grid > div { max-width:900px; margin-inline:auto; }
.faq details,.faq details:last-child { padding-inline:24px; border:1px solid var(--line); border-radius:16px; margin-bottom:16px; background:white; }.faq summary { padding-block:22px; }
.closing { padding-block:42px 44px; background:#f5f5f5; overflow:clip; }
.closing-grid { position:relative; display:block; text-align:center; }.closing-grid h2 { font-size:2rem; }.closing-grid p { max-width:650px; margin:18px auto 0; font-size:1rem; }
.closing-grid > div:last-of-type { margin-top:26px; }.closing-star { top:0; inset-inline-start:-24px; }.closing-loop { bottom:-12px; inset-inline-end:110px; }

/* Interior pages share the title, card, and spacing system. */
.page-intro { padding-block:170px 42px; border:0; background:linear-gradient(263deg,rgba(221,232,238,.15),rgba(248,224,191,.08)); text-align:center; }
.page-intro h1 { display:inline-block; max-width:900px; padding:12px 36px; border:1px solid var(--line); border-radius:48px 32px 0 48px; background:white; font-size:2.8rem; }
html[dir=ltr] .page-intro h1 { border-radius:32px 48px 48px 0; }
.page-intro p { max-width:740px; margin:24px auto 0; font-size:1.125rem; }
.service-detail { padding:36px; margin-block:36px; border:1px solid var(--line); border-radius:16px; gap:64px; background:white; }
.service-detail .service-heading h2 { font-size:2rem; }.service-description h3,.service-description .lead { font-size:1.125rem; }
.company-story { background:#f4f4f4; }.story-grid { align-items:start; }.story-grid > h2 { font-size:3rem; }.story-grid .ink-line { margin-top:20px; }
.principles { padding-block:56px 76px; }.principle-grid article { padding:28px; background:white; border:1px solid var(--line); border-radius:16px; }.principle-grid h2 { font-size:1.5rem; }
.contact-page { padding-top:168px; }.contact-grid { gap:80px; }.contact-copy h1 { font-size:3rem; }.contact-grid > div:last-child { border:1px solid var(--line); border-radius:16px; padding:32px; background:white; }
.legal-content { padding:32px; border:1px solid var(--line); border-radius:16px; background:white; }.legal-toc { padding:20px; border:1px solid var(--line); border-radius:16px; background:#f4f4f4; }.legal-layout { gap:40px; }

@media (max-width:1100px) {
  .header-row { gap:20px; }.desktop-nav { gap:16px; }.brand-summary-grid { gap:20px; }.brand-quote-card { padding-inline:28px; }.brand-quote-card blockquote { font-size:1.75rem; }
  .brand-expertise-card { padding-inline:24px; }.brand-expertise-card > p,.brand-expertise-card .brand-focus { font-size:1rem; }
  .careers-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; }.careers-copy > h3 { font-size:2.8rem; }.culture-card { padding-inline:18px; }.culture-card h3 { font-size:1.125rem; }
}
@media (max-width:1000px) {
  .brand-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.brand-expertise-card { grid-column:1/-1; width:min(100%,387px); justify-self:center; }
  .education { inset-inline-start:7%; }.enterprise { inset-inline-end:7%; }.innovation-tag { inset-inline-end:2%; }
  .figma-hero .hero-copy { width:min(700px,calc(100% - 64px)); }.figma-hero .hero-copy h1 { font-size:2.7rem; }.headline-digital { min-height:84px; }.zonnet-mark { --mark-scale:.85; }
}
@media (max-width:900px) {
  .header-row { min-height:64px; }.header-actions { gap:16px; }.header-actions > .button { display:inline-flex; }
  .hero-stage { padding-top:225px; }.innovation-tag { top:auto; bottom:20px; }.hero-star { top:auto; bottom:24px; }
  .brand-summary { padding-block:42px 64px; }.section { padding-block:64px; }.careers-grid { grid-template-columns:minmax(0,1fr); gap:44px; }.careers-copy { max-width:620px; }
  .culture-cards { grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:0; gap:16px; }.culture-card { grid-column:auto; grid-row:auto; margin-top:0; }.careers-line { opacity:.4; }
  .service-detail { padding:28px; gap:24px; }.legal-layout { gap:32px; }.legal-toc { border-bottom:1px solid var(--line); }
}
@media (max-width:700px) {
  .site-header { top:20px; }.header-row { width:calc(100% - 32px); padding-inline:16px; gap:12px; }.brand-crop { width:72px; height:42px; }
  .header-actions { gap:12px; }.header-actions > .button { display:none; }.language-link { font-size:.9375rem; }.mobile-nav:not([hidden]) { border-radius:18px; top:calc(100% + 12px); background:white; }
  .figma-hero { min-height:680px; }.hero-stage { min-height:680px; padding-block:205px 140px; }.figma-hero .hero-copy { width:calc(100% - 48px); }.figma-hero .hero-copy h1 { font-size:clamp(1.2rem,5.1vw,2.15rem); line-height:1.55; }
  .figma-hero .headline-first { min-height:64px; padding-inline-start:12px; border-radius:36px 22px 0 36px; }.headline-through { min-height:64px; padding-inline:6px; width:34%; border-radius:36px 22px 0 36px; }
  .headline-digital { min-height:64px; width:calc(100% - 108px); padding-inline:10px; border-radius:36px 22px 0 36px; }
  html[dir=ltr] .headline-first,html[dir=ltr] .headline-through,html[dir=ltr] .headline-digital { border-radius:22px 36px 36px 0; }.zonnet-mark { --mark-scale:.5; }
  .hero-description { margin-top:48px; }.hero-description p { font-size:1rem; line-height:1.85; }.hero-rays { inset-inline-start:-12px; top:-50px; transform:scale(.6) scaleX(-1); transform-origin:bottom right; }
  html[dir=ltr] .hero-rays { transform:scale(.6); transform-origin:bottom left; }
  .figma-hero .hero-actions { margin-top:24px; gap:12px; }.hero-actions .button { font-size:.9375rem; padding-inline:16px; }
  .education,.enterprise { top:136px; width:112px; min-height:36px; font-size:.9375rem; }.education { inset-inline-start:30px; }.enterprise { inset-inline-end:30px; }
  .innovation-tag { bottom:14px; inset-inline-end:28px; transform:scale(.75); transform-origin:bottom left; }.hero-loop { opacity:.55; inset-inline-end:-55px; top:25px; width:110px; height:147px; }.hero-star { inset-inline-start:-20px; bottom:0; width:62px; height:66px; }.hero-line { right:-470px; top:390px; opacity:.28; }
  html[dir=ltr] .hero-line { right:auto; left:-470px; }
  .brand-summary-grid { grid-template-columns:minmax(0,1fr); margin-top:40px; gap:24px; }.brand-summary-grid > * { width:min(100%,430px); justify-self:center; }.brand-expertise-card { grid-column:auto; }
  .brand-values-card { min-height:260px; }.brand-quote-card { min-height:300px; padding:76px 28px 26px; }.brand-quote-card blockquote { font-size:1.625rem; }.brand-expertise-card { min-height:310px; }.brand-expertise-card > p,.brand-expertise-card .brand-focus { font-size:1.125rem; }
  .section-heading { margin-bottom:36px; }.section-heading h2,.section-title { font-size:1.75rem; }.section-heading > p { font-size:1rem; }
  .services { padding-block:70px 86px; }.service-grid { gap:20px; }.service-preview { min-height:0; padding:24px; }.service-preview h3 { font-size:1.375rem; }.service-preview p { font-size:1rem; }.service-icon { width:60px; height:60px; }
  .usecase-grid { gap:20px; }.usecase-grid article { padding:24px; }.usecase-grid h3 { font-size:1.375rem; }
  .careers-copy > h3 { font-size:2.5rem; }.careers-copy > p { font-size:1rem; }.career-value .service-icon { width:64px; height:64px; }.career-value h4 { font-size:1.125rem; }.career-value p { font-size:1rem; }
  .culture-cards { grid-template-columns:minmax(0,1fr); gap:16px; }.culture-card { min-height:0; padding:24px; }.culture-card h3 { font-size:1.25rem; }.careers-line { left:-615px; top:210px; opacity:.25; }
  html[dir=ltr] .careers-line { left:auto; right:-615px; }.faq-grid > h2 { font-size:1.75rem; margin-bottom:32px; }.faq details,.faq details:last-child { padding-inline:18px; }.faq summary { font-size:1rem; }
  .closing { padding-block:38px 40px; }.closing-grid h2 { font-size:1.75rem; }.closing-grid p { font-size:1rem; }.closing-star { width:52px; height:55px; inset-inline-start:-16px; top:-16px; }.closing-loop { width:58px; height:53px; inset-inline-end:-8px; bottom:-26px; }
  .page-intro { padding-block:138px 36px; }.page-intro h1 { padding:10px 20px; font-size:2.15rem; max-width:100%; }.page-intro p { font-size:1.0625rem; }.service-detail { margin-block:24px; padding:24px; }.service-detail .service-heading h2 { font-size:1.75rem; }
  .story-grid > h2 { font-size:2.5rem; }.principle-grid article { padding:24px; }.contact-page { padding-top:138px; }.contact-copy h1 { font-size:2.5rem; }.contact-grid > div:last-child { padding:22px; }.legal-content { padding:24px; }.legal-toc { padding:18px; }
}
@media (max-width:360px) {
  .figma-hero .hero-copy { width:calc(100% - 40px); }.figma-hero .hero-copy h1 { font-size:1.12rem; }.headline-digital { width:calc(100% - 94px); }.zonnet-mark { --mark-scale:.42; }
  .hero-actions .button { width:100%; }.hero-stage { padding-bottom:145px; }.careers-copy > h3 { font-size:2.125rem; }.brand-quote-card blockquote { font-size:1.5rem; }.page-intro h1 { font-size:1.9rem; }
}
@media (max-width:700px) {
  html[lang=en] .figma-hero .hero-copy h1 { font-size:clamp(1.12rem,5.5vw,2.15rem); }
}
@supports (font-size:1cqw) {
  html[lang=en] .figma-hero .hero-copy h1 { font-size:clamp(1.12rem,6.35cqw,3rem); }
}