:root{--ink:#151817;--paper:#f7f1df;--white:#fff;--teal:#48a99f;--blue:#17698a;--orange:#f48619;--red:#df462f;--line:2px solid var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f7f9f6;font-family:Inter,"Noto Sans",Arial,sans-serif;font-size:16px;line-height:1.7}a{color:inherit}.skip{position:fixed;z-index:99;top:8px;left:8px;transform:translateY(-150%);background:#fff;padding:.6rem 1rem;border:2px solid}.skip:focus{transform:none}.header{height:86px;display:flex;align-items:center;gap:2rem;padding:0 clamp(1rem,4vw,4rem);border-bottom:1px solid #cfd8d5;background:rgba(255,255,255,.95);position:sticky;top:0;z-index:20}.brand{font:800 clamp(1.25rem,2vw,1.65rem)/1 Arial,sans-serif;text-decoration:none;letter-spacing:-.05em}.brand::first-letter{color:var(--red)}nav{display:flex;gap:clamp(.8rem,2vw,1.7rem);margin-inline:auto}nav a{text-decoration:none;font-size:.88rem;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:1rem}.languages{display:flex;gap:.2rem;direction:ltr}.languages a{padding:.35rem .5rem;text-decoration:none;font-size:.78rem;border-radius:3px}.languages [aria-current]{background:var(--ink);color:#fff}.consult,.primary,.secondary{border:0;font:700 .92rem/1 inherit;cursor:pointer;text-decoration:none;padding:.85rem 1.15rem}.consult,.primary{background:var(--ink);color:#fff}.secondary{background:transparent;border:1px solid var(--ink)}.hero{min-height:calc(100vh - 86px);display:grid;grid-template-columns:minmax(0,.82fr) minmax(440px,1.18fr);align-items:center;gap:clamp(2rem,5vw,6rem);padding:clamp(3.5rem,7vw,7.5rem) clamp(1rem,6vw,7rem)}.hero-copy{max-width:650px}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#17698a;margin:0 0 1.4rem}.hero h1{font-size:clamp(3rem,5.7vw,6.25rem);line-height:1.03;letter-spacing:-.055em;margin:0 0 1.7rem}.lead{font-size:clamp(1rem,1.5vw,1.22rem);max-width:58ch}.hero-actions{display:flex;gap:.75rem;margin:2rem 0 1rem}.note{font-size:.82rem;color:#59625f}.team-figure{margin:0;position:relative}.team-figure img{display:block;width:100%;height:auto;max-height:610px;object-fit:cover;border-radius:3px}.team-figure figcaption{position:absolute;bottom:-1.5rem;right:-1rem;background:var(--orange);color:#101010;padding:.8rem 1rem;font-weight:800;font-size:.86rem}.services{padding:clamp(5rem,9vw,9rem) clamp(1rem,7vw,8rem);background:#fff}.section-head{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr);column-gap:5vw;align-items:end;margin-bottom:5rem}.section-kicker{grid-column:1/-1;font-size:.72rem;letter-spacing:.14em;font-weight:800;color:var(--teal)}.section-head h2{font-size:clamp(2.8rem,5.5vw,5.8rem);line-height:1;margin:0;letter-spacing:-.045em}.section-head>p:last-child{max-width:55ch;margin:0 0 .6rem}.service-groups{border-top:1px solid #aeb9b5}.service-group{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,2fr);gap:4vw;padding:3.5rem 0;border-bottom:1px solid #aeb9b5}.group-label span,.card-no{color:var(--red);font:800 .78rem/1 monospace}.group-label h3{font-size:1.15rem;max-width:16ch;margin:.8rem 0}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}.service-card{grid-column:span 3;padding:1.5rem;background:#f4f7f6;min-height:240px;border-top:4px solid var(--teal)}.service-group:nth-child(2) .service-card{grid-column:span 2}.service-card h4{font-size:1.25rem;margin:1.3rem 0 .8rem;line-height:1.3}.service-card p{font-size:.94rem;color:#39413f}.text-link{border:0;background:none;padding:.3rem 0;margin-top:.5rem;font:700 .85rem/1 inherit;cursor:pointer}.end-note{text-align:center;margin:5rem 0 0;font-size:.78rem;letter-spacing:.12em;color:#68706e}dialog{max-width:460px;border:2px solid var(--ink);padding:2rem 2.5rem;box-shadow:10px 10px 0 var(--teal)}dialog::backdrop{background:rgba(15,20,18,.45)}.dialog-close{position:absolute;inset-inline-end:.5rem;top:.25rem;border:0;background:none;font-size:2rem;cursor:pointer}:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
html[data-theme="retro"] body{background:var(--paper);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;background-image:linear-gradient(rgba(20,20,20,.035) 1px,transparent 1px);background-size:100% 28px}html[data-theme="retro"] .header{height:auto;min-height:96px;border-bottom:3px double var(--ink);background:rgba(247,241,223,.97);flex-wrap:wrap;padding-block:.8rem}html[data-theme="retro"] .brand{font-family:Georgia,serif;font-size:1.8rem;border:2px solid;padding:.35rem .65rem;box-shadow:4px 4px 0 var(--teal)}html[data-theme="retro"] nav a{text-decoration:underline;text-underline-offset:3px;font-weight:700}html[data-theme="retro"] nav a::before{content:'['}html[data-theme="retro"] nav a::after{content:']'}html[data-theme="retro"] .consult{background:var(--red);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}html[data-theme="retro"] .languages a{border-radius:0;text-decoration:underline}html[data-theme="retro"] .languages [aria-current]{background:var(--teal);color:var(--ink);border:1px solid}html[data-theme="retro"] .hero{min-height:calc(100vh - 96px);grid-template-columns:minmax(330px,.8fr) minmax(450px,1.2fr);border-bottom:5px double var(--ink);position:relative}html[data-theme="retro"] .hero::before{content:'★ ★ ★  BonZuttner HOMEPAGE  ★ ★ ★';position:absolute;top:1.25rem;left:50%;transform:translateX(-50%);font:bold .76rem/1 monospace;letter-spacing:.12em;white-space:nowrap}html[data-theme="retro"] .eyebrow{color:var(--ink);font-family:monospace;border-block:1px dashed;padding:.35rem 0}html[data-theme="retro"] .hero h1{font-size:clamp(2.8rem,5.4vw,5.7rem);letter-spacing:-.04em;text-shadow:3px 3px 0 #fff,5px 5px 0 var(--orange)}html[data-theme="retro"] .lead{background:#fff;border:var(--line);padding:1rem;box-shadow:7px 7px 0 var(--teal)}html[data-theme="retro"] .primary,html[data-theme="retro"] .secondary{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}html[data-theme="retro"] .primary{background:var(--orange);color:var(--ink)}html[data-theme="retro"] .secondary{background:#fff}html[data-theme="retro"] .note::before{content:'※ '}html[data-theme="retro"] .team-figure img{border:3px solid var(--ink);border-radius:0;filter:saturate(.94) contrast(1.02)}html[data-theme="retro"] .team-figure::before{content:'＼ 仕事の話、ときどき雑談 ／';position:absolute;z-index:2;top:-1.2rem;left:1rem;background:#fff;border:2px solid;padding:.25rem .65rem;font-size:.8rem;font-weight:800;transform:rotate(-2deg)}html[data-theme="retro"] .services{background:var(--paper);border-bottom:5px double var(--ink)}html[data-theme="retro"] .section-head{display:block;text-align:center;border:3px double var(--ink);padding:2rem;background:#fff;box-shadow:9px 9px 0 var(--orange)}html[data-theme="retro"] .section-kicker{font-family:monospace;color:var(--ink)}html[data-theme="retro"] .section-head h2{font-size:clamp(2.5rem,5vw,4.7rem);margin:.7rem 0 1rem;text-shadow:2px 2px 0 var(--teal)}html[data-theme="retro"] .section-head h2::before,html[data-theme="retro"] .section-head h2::after{content:' ★ '}html[data-theme="retro"] .section-head>p:last-child{margin:0 auto;max-width:48rem}html[data-theme="retro"] .service-groups{border:0}html[data-theme="retro"] .service-group{display:block;border:0;padding:2rem 0}html[data-theme="retro"] .group-label{display:flex;align-items:center;gap:1rem;border-bottom:3px double;padding:.8rem 0;margin-bottom:1rem}html[data-theme="retro"] .group-label span{background:var(--red);color:#fff;border:2px solid var(--ink);padding:.5rem}html[data-theme="retro"] .group-label h3{max-width:none;margin:0;font-size:1.4rem}html[data-theme="retro"] .service-card,html[data-theme="retro"] .service-group:nth-child(2) .service-card{border:2px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--teal);min-height:250px}html[data-theme="retro"] .service-group:first-child .service-card{grid-column:span 3}html[data-theme="retro"] .service-card:nth-child(even){box-shadow:5px 5px 0 var(--orange)}html[data-theme="retro"] .service-card h4{font-family:"Yu Gothic",sans-serif;border-bottom:1px dashed;padding-bottom:.7rem}html[data-theme="retro"] .text-link{text-decoration:underline;text-underline-offset:3px}html[data-theme="retro"] .end-note{font-family:monospace;color:var(--ink)}html[dir="rtl"] body{font-family:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif}html[dir="rtl"] .brand,html[dir="rtl"] .languages{direction:ltr}html[dir="rtl"] .team-figure figcaption{right:auto;left:-1rem}html[dir="rtl"] .section-head h2,html[dir="rtl"] .service-card h4{letter-spacing:0}
@media(max-width:1050px){nav{display:none}.header{gap:1rem}.header-actions{margin-inline-start:auto}.hero,html[data-theme="retro"] .hero{grid-template-columns:1fr;padding-top:5rem}.hero-copy{max-width:760px}.team-figure img{max-height:520px}.hero h1{font-size:clamp(3rem,8vw,5rem)}.section-head{grid-template-columns:1fr;margin-bottom:3rem}.section-head h2{margin-bottom:1.5rem}.service-group{grid-template-columns:1fr}.group-label h3{max-width:none}.service-group:nth-child(2) .service-card{grid-column:span 3}}@media(max-width:650px){body{font-size:16px}.header{position:relative;padding:1rem;align-items:flex-start}.brand{margin-top:.2rem}.header-actions{display:grid;gap:.65rem;justify-items:end}.consult{display:none}.languages{flex-wrap:wrap;justify-content:flex-end}.languages a{font-size:.75rem;padding:.3rem .4rem}.hero,html[data-theme="retro"] .hero{padding:4.4rem 1rem 3.5rem;gap:2rem;min-height:auto}.hero h1,html[data-theme="retro"] .hero h1{font-size:clamp(2.55rem,13vw,4rem)}.lead{font-size:1rem}.hero-actions{align-items:stretch;flex-direction:column}.primary,.secondary{text-align:center;width:100%}.team-figure img{min-height:265px;object-fit:cover;object-position:center}.team-figure figcaption{position:relative;bottom:auto;right:auto!important;left:auto!important;margin:-1px 0 0;border:1px solid var(--ink)}html[data-theme="retro"] .hero::before{font-size:.66rem;top:1.4rem}html[data-theme="retro"] .team-figure::before{font-size:.72rem;left:.4rem}.note{font-size:.8rem}.services{padding:4rem 1rem}.section-head h2{font-size:2.7rem}.service-group{padding:2rem 0}.cards{display:block}.service-card,.service-group:nth-child(2) .service-card,html[data-theme="retro"] .service-card,html[data-theme="retro"] .service-group:first-child .service-card,html[data-theme="retro"] .service-group:nth-child(2) .service-card{margin-bottom:1rem;min-height:0}.end-note{margin-top:3rem}}

/* Japanese only: an intentionally humble, early-homepage presentation. */
html[data-theme="retro"] body{background:#fff;color:#000;font-family:"MS PGothic","Osaka","Hiragino Kaku Gothic ProN",sans-serif;font-size:15px;line-height:1.55;background-image:none}
html[data-theme="retro"] body a{color:#0000ee;text-decoration:underline}
html[data-theme="retro"] body a:visited{color:#551a8b}
html[data-theme="retro"] .header{position:static;width:760px;max-width:calc(100% - 20px);min-height:0;height:auto;margin:8px auto 0;padding:7px 4px;display:grid;grid-template-columns:auto 1fr;gap:6px 20px;border:0;border-top:1px solid #777;border-bottom:1px solid #777;background:#fff}
html[data-theme="retro"] .brand{grid-row:1/3;font-family:"Times New Roman",serif;font-size:25px;font-weight:bold;letter-spacing:0;color:#000!important;border:0;padding:0;box-shadow:none;text-decoration:none}
html[data-theme="retro"] nav{display:flex!important;justify-content:flex-end;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
html[data-theme="retro"] nav a{font-size:13px;font-weight:normal;text-underline-offset:0}
html[data-theme="retro"] .header-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:0}
html[data-theme="retro"] .languages{gap:7px}
html[data-theme="retro"] .languages a{padding:0;border:0;background:none!important;color:#0000ee!important;border-radius:0;font-size:12px}
html[data-theme="retro"] .languages [aria-current]{color:#000!important;font-weight:bold;text-decoration:none}
html[data-theme="retro"] .consult{display:inline-block;background:#ddd;color:#000;border:2px outset #eee;box-shadow:none;padding:3px 10px;font:13px "MS PGothic",sans-serif}
html[data-theme="retro"] .hero{width:760px;max-width:calc(100% - 20px);min-height:0;margin:0 auto;padding:28px 4px 36px;display:flex;flex-direction:column;gap:18px;border:0;border-bottom:1px solid #777}
html[data-theme="retro"] .hero::before{content:'★　BonZuttner 公式ホームページ　★';position:static;transform:none;order:-2;display:block;text-align:center;font:normal 13px "MS PGothic",sans-serif;letter-spacing:0;color:#008080}
html[data-theme="retro"] .hero-copy{max-width:none;text-align:center;display:contents}
html[data-theme="retro"] .eyebrow{order:-1;margin:0;padding:5px;border:1px solid #aaa;background:#f2f2f2;color:#000;font:normal 13px "MS PGothic",sans-serif;letter-spacing:0;text-transform:none}
html[data-theme="retro"] .hero h1{margin:0;font-family:"Times New Roman","Yu Mincho",serif;font-size:38px;line-height:1.25;letter-spacing:0;text-shadow:none;font-weight:bold}
html[data-theme="retro"] .lead{margin:0 auto;max-width:650px;padding:0;background:none;border:0;box-shadow:none;text-align:left;font-size:15px}
html[data-theme="retro"] .hero-actions{justify-content:center;margin:2px 0 0;gap:16px}
html[data-theme="retro"] .primary,html[data-theme="retro"] .secondary{width:auto;background:#ddd;color:#000!important;border:2px outset #eee;box-shadow:none;padding:5px 15px;font:13px "MS PGothic",sans-serif}
html[data-theme="retro"] .primary{text-decoration:none}
html[data-theme="retro"] .note{margin:0;text-align:center;color:#555;font-size:12px}
html[data-theme="retro"] .team-figure{order:-1;margin:0;text-align:center}
html[data-theme="retro"] .team-figure::before{content:none}
html[data-theme="retro"] .team-figure img{width:100%;height:auto;max-height:none;min-height:0;border:1px solid #777;border-radius:0;filter:none;object-fit:contain}
html[data-theme="retro"] .team-figure figcaption{position:static;display:block;margin:5px 0 0;padding:0;background:none;border:0;color:#000;font-size:13px;font-weight:normal;text-decoration:underline;text-decoration-style:dotted}
html[data-theme="retro"] .services{width:760px;max-width:calc(100% - 20px);margin:0 auto;padding:34px 4px 24px;background:#fff;border:0}
html[data-theme="retro"] .section-head{display:block;margin:0 0 25px;padding:0;background:#fff;border:0;box-shadow:none;text-align:center}
html[data-theme="retro"] .section-kicker{margin:0 0 7px;color:#008080;font:normal 12px monospace;letter-spacing:0}
html[data-theme="retro"] .section-head h2{margin:0 0 10px;padding:4px;background:#008080;color:#fff;font-family:"MS PGothic",sans-serif;font-size:22px;line-height:1.3;text-shadow:none;letter-spacing:0}
html[data-theme="retro"] .section-head h2::before,html[data-theme="retro"] .section-head h2::after{content:'★'}
html[data-theme="retro"] .section-head>p:last-child{max-width:none;margin:0;text-align:left}
html[data-theme="retro"] .service-group{display:block;padding:0 0 26px;border:0}
html[data-theme="retro"] .group-label{display:flex;align-items:center;gap:8px;margin:0;padding:4px 7px;border:1px solid #777;background:#eee}
html[data-theme="retro"] .group-label span{padding:0;background:none;color:#000;border:0;font:normal 12px monospace}
html[data-theme="retro"] .group-label h3{margin:0;max-width:none;font-size:16px;font-weight:bold}
html[data-theme="retro"] .cards{display:block;margin:0;border-inline:1px solid #999}
html[data-theme="retro"] .service-card,html[data-theme="retro"] .service-group:first-child .service-card,html[data-theme="retro"] .service-group:nth-child(2) .service-card{min-height:0;margin:0;padding:12px 10px;background:#fff;border:0;border-bottom:1px dotted #888;box-shadow:none}
html[data-theme="retro"] .card-no{float:left;margin-right:9px;color:#c00;font:normal 12px monospace}
html[data-theme="retro"] .service-card h4{margin:0 0 5px;padding:0;border:0;font-family:"MS PGothic",sans-serif;font-size:16px;line-height:1.4;color:#000}
html[data-theme="retro"] .service-card p{margin:0;color:#000;font-size:14px}
html[data-theme="retro"] .text-link{margin:5px 0 0;padding:0;border:0;background:none;color:#0000ee;text-decoration:underline;font:normal 13px "MS PGothic",sans-serif}
html[data-theme="retro"] .end-note{margin:10px 0 0;padding-top:10px;border-top:1px solid #777;color:#008080;font:normal 12px monospace;letter-spacing:0}
html[data-theme="retro"] dialog{font-family:"MS PGothic",sans-serif;border:2px outset #ddd;box-shadow:none}

@media(max-width:650px){html[data-theme="retro"] .header{display:block;text-align:center}html[data-theme="retro"] .brand{display:inline-block;margin:0 0 8px}html[data-theme="retro"] nav{justify-content:center;margin-bottom:8px}html[data-theme="retro"] .header-actions{justify-content:center}html[data-theme="retro"] .hero{padding-top:18px}html[data-theme="retro"] .hero h1{font-size:29px}html[data-theme="retro"] .hero-actions{flex-direction:row;flex-wrap:wrap}html[data-theme="retro"] .primary,html[data-theme="retro"] .secondary{width:auto}html[data-theme="retro"] .team-figure img{min-height:0;object-fit:contain}html[data-theme="retro"] .services{padding-top:26px}html[data-theme="retro"] .section-head h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}