:root { --bg:#fff; --paper:#171719; --muted:#64666a; --line:#dedfe1; --green:#15945a; --page-header:rgba(255,255,255,.96); --control:#f1f1f1; --panel:#f4f5f2; --error:#ae3b37; --accent-soft:#e7efe9; --visual-paper:#edf0ec; --visual-edge:#c4cdc6; --visual-face:#f9faf8; --visual-side:#c8d1ca; --visual-green:#20b66b; }
html[data-theme="dark"] { --bg:#08090a; --paper:#e7e8e4; --muted:#b0b2b7; --line:#34363b; --green:#60c492; --page-header:rgba(8,9,10,.96); --control:#292a2e; --panel:#171a1d; --error:#f1948e; --accent-soft:#14291f; --visual-paper:#202724; --visual-edge:#44574c; --visual-face:#48574e; --visual-side:#293d31; --visual-green:#3dbd7b; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-padding-top:96px; }
body { min-height:100svh; margin:0; color:var(--paper); background:var(--bg); font-family:'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif; -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { color:inherit; }
:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
.page-header { position:fixed; z-index:2; top:0; left:0; right:0; height:76px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; padding:0 32px; font-size:12px; background:var(--page-header); }
.page-brand { justify-self:center; font-size:22px; font-weight:700; letter-spacing:-.08em; }
.page-brand .brand-word { display:block; width:110px; height:auto; aspect-ratio:754 / 224; }
.page-actions { justify-self:end; display:flex; gap:8px; align-items:center; }
.page-back { padding:9px 14px; border:1px solid var(--line); border-radius:999px; }
.page-mail { position:relative; display:grid; place-items:center; width:34px; height:34px; padding:8px; border:1px solid transparent; border-radius:50%; background:var(--control); }
.page-mail::after { content:""; position:absolute; inset:-5px; }
.page-mail:hover { border-color:currentColor; }
.page-mail svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.page-skip { position:fixed; left:16px; top:-80px; z-index:100; padding:12px 18px; background:var(--paper); color:var(--bg); }
.page-skip:focus { top:12px; }
.page-main { width:min(1360px,calc(100% - 112px)); margin:0 auto; padding:clamp(128px,15vh,180px) 0 32px; }
.page-kicker,.section-number { font:12px/1.6 'Space Grotesk','Microsoft YaHei',sans-serif; letter-spacing:.06em; color:var(--muted); }
.page-kicker { margin:0 0 28px; display:flex; align-items:center; gap:12px; }
.page-kicker::before { content:""; flex:none; width:24px; height:2px; background:var(--green); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(40px,4.5vw,68px); line-height:1.24; letter-spacing:-.055em; font-weight:400; }
h2 { font-size:clamp(28px,3vw,44px); line-height:1.4; letter-spacing:-.045em; font-weight:400; }
h3 { font-weight:500; }
.studio-hero { padding-bottom:72px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,80px); }
.hero-content { padding:20px 0; }
.hero-content .page-copy { margin-top:36px; }
.hero-art { min-width:0; overflow:hidden; position:relative; border-radius:8px; background:var(--visual-paper); }
.hero-art>svg { display:block; width:100%; height:auto; }
.art-caption { display:flex; align-items:center; gap:10px; padding:0 26px 24px; color:var(--paper); font-size:12px; }
.art-caption>span:last-child { margin-left:auto; font-size:20px; }
.hero-art-about { background:var(--accent-soft); }
.page-copy { max-width:550px; margin:0; color:var(--muted); font-size:18px; line-height:1.9; }
.software-service-copy p,.process-list p,.studio-story p:not(.page-kicker),.reach-section p:not(.page-kicker),.principles article p { color:var(--muted); font-size:16px; line-height:1.9; margin-bottom:0; }
/* A quiet, image-led catalogue. Selection rules apply only to this page's
   content, leaving the independent consultation editor and QR code untouched. */
body[data-page-view="services"] .page-main { -webkit-user-select:none; user-select:none; padding-bottom:88px; }
.services-hero { padding:24px 0 96px; }
.services-hero .page-kicker { margin-bottom:32px; }
.services-hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,.9fr); align-items:end; gap:48px 64px; }
.services-hero h1 { font-size:clamp(52px,5.7vw,82px); line-height:1.2; letter-spacing:-.045em; }
.services-hero h1 span { display:block; }
.services-hero .page-copy { max-width:360px; padding-bottom:7px; font-size:16px; line-height:1.95; }
.gallery-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 0 32px; border-top:1px solid var(--line); }
.gallery-intro h2 { margin:0; font-size:15px; letter-spacing:0; font-weight:400; }
.gallery-intro>span { color:var(--muted); font-size:12px; }
.software-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px 40px; }
.software-service { min-width:0; scroll-margin-top:112px; }
.software-figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.software-figure img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; -webkit-user-drag:none; -webkit-user-select:none; user-select:none; }
.software-service-heading { display:grid; grid-template-columns:26px minmax(0,1fr); gap:16px; margin-top:28px; }
.software-service-heading>.section-number { padding-top:7px; color:var(--green); font-variant-numeric:tabular-nums; }
.software-service-copy h3 { margin:0 0 14px; font-size:clamp(23px,2.15vw,30px); line-height:1.4; letter-spacing:-.035em; font-weight:400; }
.software-service-copy p { max-width:48ch; font-size:15px; line-height:1.9; }
.service-tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0; padding:0; color:var(--muted); font-size:12px; line-height:1.6; }
body[data-page-view="services"] .services-process { margin-top:100px; padding:64px 0 0; background:transparent; border-top:1px solid var(--line); border-radius:0; }
body[data-page-view="services"] .services-process .section-heading { margin-bottom:44px; }
body[data-page-view="services"] .services-process .process-list h3 { font-size:20px; }
body[data-page-view="services"] .services-process .process-list p { font-size:15px; }

.process-section,.principles { border-top:1px solid var(--line); padding-top:72px; margin-top:32px; }
.process-section { padding:48px; background:var(--panel); border-top:0; border-radius:8px; }
.process-list .section-number { color:var(--green); font-size:18px; }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:baseline; margin-bottom:48px; }
.section-heading h2,.section-heading .page-kicker { margin:0; }
.process-list { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.process-list li { padding-top:22px; border-top:1px solid var(--line); }
.process-list h3 { font-size:21px; margin:28px 0 12px; }
.studio-cta { margin:88px 0 48px; padding:48px; border-radius:8px; background:var(--accent-soft); }
.studio-cta>div { display:flex; justify-content:space-between; gap:32px; align-items:end; }
.studio-cta h2 { font-size:clamp(30px,3.8vw,54px); margin:0; }
.page-action { display:inline-flex; flex:none; align-items:center; justify-content:space-between; gap:40px; min-height:52px; padding:14px 23px; border:1px solid var(--paper); border-radius:999px; color:var(--paper); background:transparent; font-size:14px; line-height:1.4; transition:background-color .2s ease,color .2s ease; }
.page-action>span[aria-hidden] { font-size:20px; line-height:1; }
.page-action:hover { color:var(--bg); background:var(--paper); }
.page-action:disabled { opacity:.55; }
.studio-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:70px; border-top:1px solid var(--line); padding:28px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.studio-footer a { padding:8px 0; }
.studio-footer a:hover { color:var(--paper); }
.studio-story { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:64px 0 80px; border-top:1px solid var(--line); }
.studio-story h2 { margin-bottom:30px; }
.studio-story p+p { margin-top:18px; }
.reach-section { padding:54px; border-radius:8px; background:var(--accent-soft); display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.reach-origin { display:flex; flex-direction:column; align-items:start; justify-content:center; }
.origin-dot { width:9px; height:9px; display:inline-block; border-radius:50%; background:var(--green); }
.reach-origin .origin-dot { margin-bottom:24px; }
.reach-origin h2 { margin-bottom:14px; }
.reach-origin .page-kicker { margin-bottom:16px; }
.reach-directions article+article { margin-top:32px; padding-top:32px; border-top:1px solid var(--line); }
.reach-directions h3 { font-size:20px; line-height:1.6; margin:14px 0 12px; }
.principles { margin-top:88px; }
.principles article { display:grid; grid-template-columns:64px 1fr 1.1fr; gap:32px; align-items:baseline; padding:28px 0; border-top:1px solid var(--line); }
.principles article h3 { font-size:24px; margin:0; font-weight:400; }
.page-noscript { margin:160px 32px; }
.page-item { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.page-item h2 { margin:0; }
@media (max-width:1024px) {
  .page-main { width:calc(100% - 64px); }
  .process-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .hero-grid { gap:32px; }
  h1 { font-size:clamp(36px,4.5vw,54px); }
}
@media (max-width:620px) {
  .page-header { height:66px; padding:0 18px; }
  .page-brand { font-size:18px; }
  .page-brand .brand-word { width:92px; }
  .page-main { width:calc(100% - 40px); padding-top:122px; padding-bottom:24px; }
  .page-kicker { font-size:10px; margin-bottom:24px; }
  h1 { font-size:clamp(30px,7.7vw,46px); line-height:1.4; letter-spacing:-.06em; }
  h2 { font-size:28px; }
  .studio-hero { padding-bottom:48px; }
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-content { padding:0; }
  .hero-content .page-copy { margin-top:24px; }
  .hero-art>svg { max-height:310px; }
  .art-caption { padding:0 20px 20px; font-size:11px; }
  .page-copy { font-size:16px; line-height:1.9; }
  .process-section,.principles { padding-top:40px; margin-top:24px; }
  .process-section { padding:28px 20px; }
  .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:28px; }
  .process-list { gap:30px 22px; }
  .process-list h3 { font-size:19px; margin-top:18px; }
  .process-list p { font-size:15px; }
  .studio-cta { margin:52px 0 28px; padding:30px 22px; }
  .studio-cta>div { align-items:start; flex-direction:column; gap:28px; }
  .studio-footer { flex-wrap:wrap; gap:10px 20px; margin-top:44px; padding-top:20px; font-size:11px; }
  .studio-footer>span:nth-child(2) { display:none; }
  .studio-story { grid-template-columns:1fr; gap:16px; padding:36px 0 44px; }
  .studio-story h2 { margin-bottom:24px; }
  .reach-section { padding:28px 24px; grid-template-columns:1fr; gap:36px; }
  .reach-directions h3 { font-size:18px; }
  .principles { margin-top:48px; }
  .principles article { grid-template-columns:30px 1fr; gap:12px; padding:24px 0; }
  .principles article h3 { font-size:22px; }
  .principles article p { grid-column:2; }
}
@media (prefers-reduced-motion:reduce) { .page-main * { transition:none!important; } }

@media (max-width:1024px) {
  .services-hero { padding-top:12px; padding-bottom:64px; }
  .services-hero-grid { grid-template-columns:1fr; gap:26px; }
  .services-hero h1 { font-size:clamp(48px,7.8vw,72px); }
  .services-hero .page-copy { max-width:560px; padding-bottom:0; }
  .software-grid { gap:60px 28px; }
  .software-service-heading { grid-template-columns:22px minmax(0,1fr); gap:12px; margin-top:22px; }
}
@media (max-width:620px) {
  body[data-page-view="services"] .page-main { padding-top:118px; padding-bottom:56px; }
  .services-hero { padding:0 0 46px; }
  .services-hero .page-kicker { margin-bottom:26px; }
  .services-hero h1 { font-size:clamp(34px,9.2vw,48px); line-height:1.25; }
  .services-hero-grid { gap:24px; }
  .services-hero .page-copy { font-size:15px; line-height:1.9; }
  .gallery-intro { padding:22px 0 24px; }
  .gallery-intro h2 { font-size:14px; }
  .gallery-intro>span { font-size:11px; }
  .software-grid { grid-template-columns:1fr; gap:46px; }
  .software-service-heading { margin-top:22px; }
  .software-service-heading>.section-number { padding-top:4px; font-size:11px; }
  .software-service-copy h3 { font-size:23px; margin-bottom:12px; }
  .service-tags { margin-top:14px; font-size:11px; gap:7px 16px; }
  body[data-page-view="services"] .services-process { margin-top:56px; padding-top:34px; }
  body[data-page-view="services"] .services-process .section-heading { gap:16px; margin-bottom:28px; }
  body[data-page-view="services"] .services-process .process-list { gap:28px 20px; }
  body[data-page-view="services"] .services-process .process-list h3 { font-size:18px; margin-top:16px; }
  body[data-page-view="services"] .services-process .process-list p { font-size:14px; line-height:1.85; }
}

/* About uses the same quiet typography and spacing as the capabilities page. */
body[data-page-view="about"] .page-main { -webkit-user-select:none; user-select:none; padding-bottom:88px; }
.about-hero { padding:24px 0 88px; }
.about-hero .page-kicker { margin-bottom:32px; }
.about-hero-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:48px 64px; align-items:end; }
.about-hero h1 { font-size:clamp(50px,5.4vw,78px); line-height:1.24; letter-spacing:-.045em; }
.about-hero h1 span { display:block; }
.about-introduction { max-width:440px; padding-bottom:5px; }
.about-introduction p,.about-value-copy p { margin:0; font-size:16px; line-height:1.95; color:var(--muted); }
.about-introduction p+p,.about-value-copy p+p { margin-top:16px; }
.about-location-photo { margin:0 0 64px; }
.about-location-photo>img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; border-radius:4px; -webkit-user-drag:none; }
.about-location-photo figcaption { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 24px; padding-top:15px; color:var(--muted); font-size:12px; line-height:1.8; }
.about-values { border-top:1px solid var(--line); }
.about-value { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px 80px; padding:68px 0; }
.about-value+.about-value { border-top:1px solid var(--line); }
.about-value:last-child { padding-bottom:0; }
.about-value-heading { display:grid; grid-template-columns:28px minmax(0,1fr); gap:22px; align-items:baseline; }
.about-value-heading .section-number { color:var(--green); font-variant-numeric:tabular-nums; }
.about-value h2 { margin:0; font-size:clamp(27px,2.8vw,38px); line-height:1.5; letter-spacing:-.035em; }
.about-value-copy { max-width:540px; padding-top:4px; }
@media (max-width:1024px) {
  .about-hero { padding-top:12px; padding-bottom:64px; }
  .about-hero-grid { grid-template-columns:1fr; gap:28px; }
  .about-hero h1 { font-size:clamp(46px,7.2vw,70px); }
  .about-introduction { max-width:680px; padding-bottom:0; }
  .about-value { gap:36px; padding:48px 0; }
  .about-value-heading { grid-template-columns:20px minmax(0,1fr); gap:16px; }
}
@media (max-width:620px) {
  body[data-page-view="about"] .page-main { padding-top:118px; padding-bottom:56px; }
  .about-hero { padding:0 0 44px; }
  .about-hero .page-kicker { margin-bottom:26px; }
  .about-hero h1 { font-size:clamp(33px,9.1vw,47px); line-height:1.3; }
  .about-hero-grid { gap:24px; }
  .about-location-photo { margin-bottom:36px; }
  .about-location-photo figcaption { padding-top:12px; gap:4px; flex-direction:column; font-size:11px; }
  .about-introduction p,.about-value-copy p { font-size:15px; line-height:1.9; }
  .about-value { grid-template-columns:1fr; gap:20px; padding:32px 0 36px; }
  .about-value h2 { font-size:26px; line-height:1.45; }
  .about-value-copy { padding:0 0 0 36px; }
}