/* Werk design system (design/werk/tokens.json, source design/werk/werk.pen). Its own brand: no Moralo token,
   font or component. Light and dark run through color-scheme: the theme script sets it on <html>; the :has() rules
   apply the footer radios without JavaScript. */
@font-face{font-family:"Anton";src:url("fonts/Anton-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/Barlow-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/ChivoMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/ChivoMono-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/ChivoMono-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/Caveat-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:dark;
  --color-bg:light-dark(#F7F5EF,#141414);
  --color-surface:light-dark(#FFFFFF,#1F1F1D);
  --color-sunken:light-dark(#ECE9DF,#0C0C0B);
  --color-line:light-dark(#DAD6CA,#34332F);
  --color-line-strong:light-dark(#85827A,#706D65);
  --color-ink:light-dark(#141414,#F5F3EC);
  --color-muted:light-dark(#5A5850,#ABA89E);
  --color-brand:light-dark(#F5C400,#F5C400);
  --color-brand-strong:light-dark(#7A5C00,#F5C400);
  --color-brand-soft:light-dark(#FFF3C2,#3A3110);
  --color-on-brand:light-dark(#141414,#141414);
  --color-success:light-dark(#1D6B43,#5BC88E);
  --color-success-soft:light-dark(#DCEFE3,#17301F);
  --color-focus:light-dark(#1F4FD1,#7FA2FF);
  --color-disabled-bg:light-dark(#ECE9DF,#2A2926);
  --color-disabled-fg:light-dark(#8C897F,#706D65);
  --color-shadow:light-dark(#141414,#000000);
  --color-paper:light-dark(#FBF8F0,#EDE7D9);
  --color-paper-line:light-dark(#C7D3E6,#B9C4D6);
  --color-paper-margin:light-dark(#E8A79A,#D69485);
  --color-paper-print:light-dark(#5E5A50,#5E5A50);
  --color-pen:light-dark(#2140A8,#2140A8);
  --color-map-bg:light-dark(#E6E3DA,#24231F);
  --color-map-block:light-dark(#D7D3C7,#2E2D29);
  --color-map-road:light-dark(#FFFFFF,#3E3D39);
  --color-scrim:light-dark(#14141466,#00000099);
  --color-note:light-dark(#FFF1B8,#FFF1B8);
  --color-note-alt:light-dark(#FBE3D3,#FBE3D3);
  --color-wire:light-dark(#8A8476,#8A8476);
  --color-wire-fill:light-dark(#D8D1C1,#D8D1C1);
  --color-print-ink:light-dark(#141414,#141414);
  --color-route-casing:light-dark(#141414,#0C0C0B);
  --color-primary:light-dark(#141414,#F5C400);
  --color-on-primary:light-dark(#F5C400,#141414);
  --color-primary-hover:light-dark(#2E2D2A,#FFD21F);
  --color-primary-pressed:light-dark(#000000,#E0B300);
  --color-mark:light-dark(#141414,#F5C400);
  --color-focus-on-brand:light-dark(#141414,#141414);
  --color-yellow-btn:light-dark(#141414,#141414);
  --color-yellow-btn-hover:light-dark(#33322E,#33322E);
  --color-yellow-btn-pressed:light-dark(#000000,#000000);
  --color-yellow-btn-text:light-dark(#F5C400,#F5C400);
  --color-yellow-sec-hover:light-dark(#E0B300,#E0B300);
  --color-yellow-sec-pressed:light-dark(#C9A100,#C9A100);
  --font-display:"Anton",Impact,sans-serif;
  --font-text:"Barlow",system-ui,sans-serif;
  --font-mono:"Chivo Mono",ui-monospace,monospace;
  --font-hand:"Caveat",cursive;
  --shadow-paper:0 18px 36px #1C1B1833;
  --shadow-card:0 2px 6px light-dark(#1C1B1814,transparent);
  --ease:cubic-bezier(.2,0,0,1);
  --gutter:24px;
  --section:80px;
  --h1:56px;
  --h2:40px;
  --h3:21px;
  --lead:18px;
  --tick-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M4 0v12m8-12v6m8-6v6m8-6v6m8-6v6' stroke='%23141414' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --tick-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M4 0v12m8-12v6m8-6v6m8-6v6m8-6v6' stroke='%23F5C400' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --tick-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M4 0v12m8-12v6m8-6v6m8-6v6m8-6v6' stroke='%23141414' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
:root:not([data-theme]):has(#themeLight:checked){color-scheme:light}
:root:not([data-theme]):has(#themeSystem:checked){color-scheme:light dark}
@media (min-width:768px){:root{--gutter:40px;--section:96px;--h1:80px;--h2:48px;--lead:21px}}
@media (min-width:1280px){:root{--gutter:120px;--section:128px;--h1:104px;--h2:60px;--h3:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--color-bg)}
html.menu-locked{overflow:hidden}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font:400 17px/1.55 var(--font-text);overflow-x:clip}
img,svg{display:block}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0;border:0}
ul,ol{list-style:none}
a{color:inherit}
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.95;text-wrap:balance}
h2{font-size:var(--h2);line-height:1.1;max-width:880px;overflow-wrap:break-word}
h2:focus{outline:none}
h3{font-size:var(--h3);font-weight:700;line-height:1.2}
::selection{background:var(--color-brand);color:var(--color-on-brand)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.wrap{width:min(1200px,100% - 2 * var(--gutter));margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;z-index:40;padding:12px 16px;background:var(--color-primary);color:var(--color-on-primary);font-weight:700;border-radius:4px}
.skip:focus{top:12px}
.ic{flex:none}

.moralo-line{background:var(--color-sunken);color:var(--color-muted);font-size:15px;font-weight:500;line-height:1.45}
.moralo-line-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding-block:10px}
.link{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding-block:4px;color:var(--color-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;transition:color 120ms var(--ease)}
.link:hover{color:var(--color-brand-strong)}
.link-s{font-size:15px}

.head{background:var(--color-bg);border-bottom:1px solid var(--color-line);position:relative;z-index:20}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.head-brand{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
.wordmark{display:inline-flex;align-items:flex-end;gap:4px;font:400 34px/1 var(--font-display);text-transform:uppercase;color:var(--color-ink)}
.wordmark-dot{width:7px;height:7px;margin-bottom:4px;background:var(--color-mark)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 36px}
.navlink{display:inline-flex;align-items:center;min-height:46px;padding:12px 2px;font-size:16px;font-weight:600;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:2px}
.navlink:hover{text-decoration-line:underline}
@media (min-width:900px){.head-in{min-height:80px}}
@media (max-width:899px){
  :root:not([data-theme]) .head-in{flex-wrap:wrap;padding-bottom:8px}
  :root:not([data-theme]) .nav{gap:0 20px}
  .menu.is-compact{display:none}
  .menu.is-compact.is-open{display:block;position:fixed;inset:0;z-index:30;overflow:auto;background:var(--color-bg);padding:12px var(--gutter) 32px}
  .menu.is-open .menu-close{display:flex;margin-left:auto}
  .menu.is-open .nav{flex-direction:column;align-items:stretch;gap:0;margin-top:16px}
  .menu.is-open .navlink{min-height:56px;font-size:20px;border-bottom:1px solid var(--color-line)}
  .menu.is-open .btn-primary{margin-top:24px;width:100%}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:4px;border:1.5px solid transparent;font:700 15px/1 var(--font-text);letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;background:none;color:inherit;transition:background-color 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease);white-space:nowrap}
.btn[hidden]{display:none}
.btn-l{min-height:52px;padding:15px 24px}
.btn-m{min-height:44px;padding:0 18px}
.btn-wide{width:100%}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}
a.btn-primary:hover{background:var(--color-primary-hover)}
a.btn-primary:active{background:var(--color-primary-pressed)}
.btn-secondary{border-color:var(--color-ink);color:var(--color-ink)}
button.btn-secondary:hover{background:var(--color-sunken)}
button.btn-secondary:active{background:var(--color-line)}
.btn-on-yellow{background:var(--color-yellow-btn);color:var(--color-yellow-btn-text)}
.btn-on-yellow:hover{background:var(--color-yellow-btn-hover)}
.btn-on-yellow:active{background:var(--color-yellow-btn-pressed)}
.btn-on-yellow-secondary{border-color:var(--color-on-brand);color:var(--color-on-brand)}
.btn-on-yellow-secondary:hover{background:var(--color-yellow-sec-hover)}
.btn-on-yellow-secondary:active{background:var(--color-yellow-sec-pressed)}
.hero :focus-visible,.closing :focus-visible{outline-color:var(--color-focus-on-brand)}

.hero{background:var(--color-brand);color:var(--color-on-brand);overflow:hidden}
.hero-in{display:grid;gap:24px;padding:48px var(--gutter) 32px;max-width:1440px;margin-inline:auto}
.hero h1 span{display:block}
.hero h1{font-size:var(--h1)}
.hero h1 .h1-dot{display:inline-block;width:.173em;height:.173em;margin-left:.05em;background:var(--color-on-brand);color:transparent;overflow:hidden;line-height:0;vertical-align:.09em}
.lead{font-size:var(--lead);line-height:1.5;margin-top:28px;max-width:480px}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero-fit{width:100%;max-width:740px}
.fit{container-type:inline-size;min-width:0}
.scaled{--s:calc(tan(atan2(100cqw,1px)) / var(--w));width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px);max-width:100%}
.scaled-in{display:block;position:relative;width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);transform:scale(var(--s));transform-origin:0 0}
.hero-stage{--w:740;--h:760}
.hero-slip{position:absolute;left:20px;top:120px;rotate:-6deg;transform-origin:0 0;box-shadow:var(--shadow-paper)}
.hero-phone{position:absolute;left:390px;top:96px;rotate:7deg;transform-origin:0 0}
@media (max-width:767px){.actions .btn{flex:1 1 100%}}
@media (min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,540px) minmax(0,740px);gap:40px;align-items:center;padding-block:0 56px;padding-inline:max(var(--gutter),calc((min(100%,1440px) - 1200px) / 2)) 0}
  .hero-text{padding-block:56px 24px}
}
@media (min-width:1000px) and (max-width:1279px){:root{--h1:88px}}

.ruler{height:56px;background:var(--color-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='56'%3E%3Cpath d='M1 0v26' stroke='%23141414' stroke-width='2'/%3E%3Cpath d='M9 0v9m8-9v9m8-9v9m8-9v9m16-9v9m8-9v9m8-9v9m8-9v9' stroke='%23141414' stroke-width='1.5'/%3E%3Cpath d='M41 0v16' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;border-top:1.5px solid var(--color-on-brand);color:var(--color-on-brand);display:flex;overflow:hidden;padding-left:80px;font:700 15px/1 var(--font-mono)}
.ruler span{flex:none;width:80px;padding:32px 0 0 6px}

.section{padding-block:var(--section)}
.section-sunken{background:var(--color-sunken)}
.lead-w{max-width:720px;margin-top:24px}
.lead-s{font-size:19px;line-height:1.5}
.pairs{margin-top:32px}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-block:32px;border-top:1px solid var(--color-line)}
.pair:last-child{padding-bottom:0}
.pair-arrow{display:none}
@media (max-width:767px){.pair-arrow{display:block;margin-block:-6px;line-height:0}.pair-arrow svg{width:20px;height:20px;rotate:90deg}}
.pair-text p{color:var(--color-muted);margin-top:10px;max-width:60ch}
.panel-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:8px}
.pair-app{padding:16px}
.pair-app-in{display:flex;flex-direction:column;gap:12px}
.pair-note{display:flex;justify-content:flex-start;min-width:0}
.snippet{display:block;width:min(100%,300px);padding:14px 20px 16px;background:var(--color-paper);border-radius:2px;box-shadow:var(--shadow-paper);color:var(--color-pen);font:600 28px/1.1 var(--font-hand)}
.snippet-line{display:flex;align-items:flex-end;min-height:40px;border-bottom:1px solid var(--color-paper-line)}
.snippet-sign{display:block;width:200px;max-width:100%;padding-block:8px}
@media (min-width:768px){
  .pairs{margin-top:56px}
  .pair{grid-template-columns:minmax(0,300px) minmax(0,1fr);padding-block:40px;gap:24px 32px;align-items:center}
  .pair-text{grid-column:1 / -1}
}
@media (min-width:1100px){
  .pair{grid-template-columns:280px 28px 340px minmax(0,1fr);gap:40px}
  .pair-arrow{display:block}
  .pair-text{grid-column:auto}
}
@media (min-width:1280px){.pair{grid-template-columns:320px 28px 380px minmax(0,1fr)}}

.tabs{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:40px;background:var(--color-bg);border-radius:8px}
:root[data-theme] .tabs{display:grid}
.tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:75px;padding:22px 14px 10px;border:0;border-radius:4px;background:var(--color-brand) var(--tick-ink) repeat-x 0 0;color:var(--color-on-brand);box-shadow:inset 0 0 0 0 var(--color-on-brand);font:inherit;text-align:left;cursor:pointer;transition:background-color 200ms var(--ease),color 200ms var(--ease),box-shadow 120ms var(--ease)}
.tab:hover{box-shadow:inset 0 0 0 2px var(--color-on-brand)}
.tab[aria-selected="true"]{background:var(--color-print-ink) var(--tick-yellow) repeat-x 0 0;color:var(--color-brand);box-shadow:inset 0 0 0 2px var(--color-brand)}
.tab-num{font:700 20px/1 var(--font-mono)}
.tab-label{font:700 14px/1.1 var(--font-text);letter-spacing:.7px;text-transform:uppercase}
@media (min-width:768px){
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
@media (min-width:1000px){
  .tab{flex-direction:row;align-items:center;gap:10px;padding:24px 14px 12px}
  .tab-label{font-size:15px;letter-spacing:1px}
}
.stage{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr);gap:64px}
:root[data-theme] .stage{gap:0}
:root[data-theme] .step{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity 160ms var(--ease),visibility 0s linear 160ms}
:root[data-theme] .step.is-active{opacity:1;visibility:visible;transition:opacity 220ms var(--ease) 160ms,visibility 0s linear 160ms}
:root[data-theme] .step-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.step:focus-visible{outline-offset:8px}
.step-title{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;background:var(--color-brand);color:var(--color-on-brand);font-size:16px;font-weight:700}
.step-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;min-width:0}
.step-device{--s:.72;display:flex;justify-content:center}
.step-copy{display:grid;gap:28px;align-content:center;min-width:0}
.step-text{font-size:21px;font-weight:500;line-height:1.4;margin-top:10px}
.note-source{display:flex;align-items:center;gap:8px;color:var(--color-muted);font:600 12px/1.2 var(--font-mono);letter-spacing:.5px;text-transform:uppercase}
.sample{margin-top:32px;color:var(--color-muted);font-size:15px;font-weight:500}
@media (max-width:339px){.step-device{--s:.62}}
@media (min-width:768px){.step-device{--s:.86}.step-text{font-size:24px}}
@media (min-width:1000px){.step-grid{grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}}
@media (min-width:1280px){.step-device{--s:1}.step-grid{gap:72px}}

.device{--sw:390;--sh:844;--pad:12;display:block;width:calc((var(--sw) + 2 * var(--pad)) * var(--s,1) * 1px);height:calc((var(--sh) + 2 * var(--pad)) * var(--s,1) * 1px);padding:calc(var(--pad) * var(--s,1) * 1px);background:#1C1B18;border-radius:calc(56px * var(--s,1));box-shadow:0 0 0 calc(2px * var(--s,1)) #3A3934,0 18px 36px #1C1B1833}
.device-tablet{--sw:820;--sh:1180;--pad:26;border-radius:calc(40px * var(--s,1))}
.device-glass{display:block;width:calc(var(--sw) * var(--s,1) * 1px);height:calc(var(--sh) * var(--s,1) * 1px);overflow:hidden;border-radius:calc(44px * var(--s,1));background:var(--color-bg)}
.device-tablet .device-glass{border-radius:calc(22px * var(--s,1))}
.device-screen{display:block;width:calc(var(--sw) * 1px);height:calc(var(--sh) * 1px);transform:scale(var(--s,1));transform-origin:0 0}
.hero-phone{--s:.7436}
.team-tablet{--s:.5366;position:absolute;left:0;top:0}
.team-phone{--s:.641;position:absolute;left:352px;top:120px}
.final-phone{--s:.5282}

.screen,.tablet-screen{display:flex;flex-direction:column;width:100%;height:100%;background:var(--color-bg);color:var(--color-ink);font-size:15px;line-height:1.4}
.app-status{display:flex;align-items:center;justify-content:space-between;flex:none;height:54px;padding:0 32px 0 40px}
.app-clock{font:600 16px/1 var(--font-text)}
.app-island{width:122px;height:35px;background:#000;border-radius:18px}
.app-system{display:flex;gap:6px}
.app-bar{display:flex;flex-direction:column;flex:none;gap:6px;padding:8px 20px 4px}
.app-bar-row{display:flex;align-items:center;justify-content:space-between}
.mono-label{display:block;color:var(--color-muted);font:600 12px/1.2 var(--font-mono);letter-spacing:.5px;text-transform:uppercase}
.app-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-ink);color:var(--color-bg);font-size:15px;font-weight:700}
.app-title{font:400 28px/1 var(--font-display);text-transform:uppercase}
.screen-body{display:flex;flex:1;flex-direction:column;gap:16px;min-height:0;padding:16px 20px}
.screen-tags{display:flex;gap:8px}
.screen-action{display:block;flex:none;padding:8px 20px 0}
.home-bar{display:flex;flex:none;align-items:center;justify-content:center;height:28px}
.home-bar::after{content:"";width:134px;height:5px;border-radius:3px;background:var(--color-ink)}
.home-bar-tablet{height:24px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;background:var(--color-sunken);color:var(--color-ink);font:600 14px/1.3 var(--font-text);white-space:nowrap}
.tag-strong{background:var(--color-primary);color:var(--color-on-primary)}
.tag-success{background:var(--color-success-soft);color:var(--color-success)}
.tag-surface{background:var(--color-surface)}
.job,.job-detail{display:flex;flex-direction:column;gap:10px;padding:16px}
.job{position:relative;padding-top:28px;background:var(--color-surface) ;border:1px solid var(--color-line);border-radius:8px;box-shadow:var(--shadow-card);overflow:hidden}
.job::before{content:"";position:absolute;inset:0 0 auto;height:12px;background:var(--color-brand) var(--tick-card) repeat-x 0 0}
.job.is-selected{border:2px solid var(--color-ink)}
.job-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.job-time{display:flex;align-items:center;gap:6px;font:700 15px/1.2 var(--font-mono)}
.job-title{font-size:20px;font-weight:700;line-height:1.2}
.job-title-l{font-size:22px}
.job-who{display:flex;flex-direction:column;gap:2px}
.job-name{font-size:15px;font-weight:500}
.job-address{color:var(--color-muted);font-size:15px}
.job-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--color-line);color:var(--color-muted);font-size:14px;font-weight:500}
.job-number{font-weight:600}
.concern{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--color-sunken);border-radius:6px}
.fit-card{display:flex;gap:12px;padding:14px;border:1px solid var(--color-line);border-radius:8px}
.fit-card-text{display:flex;flex-direction:column;gap:4px;color:var(--color-muted)}
.fit-card-text strong{color:var(--color-ink);font-size:16px}
.check-list{display:flex;flex-direction:column}
.check-list .mono-label{margin-bottom:4px}
.check{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-line);font-size:16px;font-weight:600}
.check-box{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border:1.5px solid var(--color-line-strong);border-radius:4px;color:var(--color-bg)}
.check-box.is-done{background:var(--color-success);border-color:var(--color-success)}
.drive,.note-detail,.photo-block,.next-block{display:flex;flex-direction:column;gap:10px}
.drive-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.fact{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500}
.fact-strong{font-weight:700}
.fact-muted{color:var(--color-muted);font-weight:400}
.route-box{display:block;position:relative;overflow:hidden;border-radius:6px;background:var(--color-map-bg)}
.route-box-150{height:150px}
.route-box-168{height:168px}
.route{position:absolute;left:0;top:0;width:704px;height:168px}
@media (max-width:359px){.route{transform:scale(.8);transform-origin:0 0}}
.route-ground{fill:var(--color-map-bg)}
.route-block{fill:var(--color-map-block)}
.route-road{stroke:var(--color-map-road);stroke-width:18;fill:none}
.route-casing{stroke:var(--color-route-casing);stroke-width:9;fill:none}
.route-line{stroke:var(--color-brand);stroke-width:5;fill:none}
.route-start{fill:var(--color-surface);stroke:var(--color-ink);stroke-width:3}
.route-pin{fill:var(--color-ink)}
.route-pin-icon{stroke:var(--color-surface)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.count{color:var(--color-muted);font-size:14px;font-weight:600}
.count-plain{font-weight:400}
.count-l{font-size:16px;font-weight:700}
.photo-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.photo{display:block;overflow:hidden;border:1px solid var(--color-line-strong);border-radius:6px}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-3 img{transform:scale(1.9);transform-origin:18% 38%}
.photo-row-76 .photo,.photo-row-76 .photo-add{height:76px}
.photo-row-96 .photo{height:96px}
.photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid var(--color-line-strong);border-radius:6px;font-size:13px;font-weight:600}
.sign-card{display:flex;flex-direction:column;gap:6px;padding:14px}
.sign-field{display:flex;align-items:center;justify-content:center;height:76px;border-bottom:1px solid var(--color-line)}
.pair-app .sign-field{height:72px}
.signature{width:200px;height:64px;flex:none}
.success-note{display:flex;align-items:center;gap:14px;padding:16px;border-radius:8px;background:var(--color-success-soft);font-size:17px;font-weight:700}
.success-tick{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--color-success);color:var(--color-bg)}
.invoice-card{display:flex;flex-direction:column;gap:10px;padding:16px}
.amount{display:block;font:400 40px/1 var(--font-display)}
.amount-l{font-size:48px}
.segment{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:8px;background:var(--color-sunken);font-size:16px;font-weight:700;color:var(--color-muted)}
.segment>span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:4px}
.segment .segment-on{background:var(--color-surface);border:1.5px solid var(--color-ink);color:var(--color-ink)}
.tablet-status{display:flex;align-items:center;justify-content:space-between;flex:none;height:32px;padding:0 28px}
.tablet-main{display:flex;flex:1;min-height:0}
.tablet-list{display:flex;flex-direction:column;flex:none;gap:16px;width:360px;padding:16px 24px;background:var(--color-sunken);border-right:1px solid var(--color-line)}
.tablet-list .segment{background:var(--color-bg)}
.tablet-list .app-bar,.tablet-detail .app-bar{padding:8px 0 4px}
.tablet-detail{display:flex;flex:1;flex-direction:column;gap:16px;min-width:0;padding:16px 32px 24px}
.tablet-spacer{flex:1}

.note{background:var(--color-surface);border:1px solid var(--color-line);border-radius:8px;padding:20px;min-width:0}
.note-in{display:flex;flex-direction:column;gap:16px}
.note-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.note-message{font-size:22px;font-weight:700;line-height:1.25}
.note-sign{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:12px;border-top:1px solid var(--color-line)}
.sign-text{display:flex;flex-direction:column;gap:2px}
.note-invoice{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.note-amount{display:flex;flex-direction:column;gap:4px}
.note .btn-m{white-space:normal;text-align:center;line-height:1.15}
@media (min-width:1000px){.note{padding:24px}}

.office-intro{display:grid;gap:28px;margin-bottom:40px}
.points{margin-top:20px}
.points li{display:flex;gap:16px;padding-block:18px;border-top:1px solid var(--color-line);font-size:20px}
.points strong{display:block;font-weight:700;line-height:1.3}
.point-text{display:block;color:var(--color-muted);font-size:17px;margin-top:4px}
.point-num{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:4px;background:var(--color-brand);color:var(--color-on-brand);font-size:16px;font-weight:700}
.office-stage{--w:1200;--h:760}
.office-view{display:flex;flex-direction:column;width:1200px;height:760px;background:var(--color-bg);border:1px solid var(--color-line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-paper);font-size:15px;line-height:1.4}
.office-bar{display:flex;align-items:center;justify-content:space-between;flex:none;height:64px;padding:0 28px;background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.office-brand{display:flex;align-items:center;gap:14px}
.office-date{color:var(--color-muted);font-weight:500}
.office-main{display:flex;flex:1;min-height:0}
.office-list{display:flex;flex-direction:column;flex:none;gap:12px;width:320px;padding:20px;background:var(--color-sunken);border-right:1px solid var(--color-line)}
.office-job{display:flex;flex:1;flex-direction:column;gap:24px;min-width:0;padding:28px 32px}
.office-head{display:flex;justify-content:space-between;align-items:flex-start}
.office-titles{display:flex;flex-direction:column;gap:8px}
.office-title{font:400 40px/1 var(--font-display);text-transform:uppercase}
.office-facts{display:flex;gap:20px;padding-top:4px}
.office-cols{display:flex;gap:24px;align-items:flex-start}
.card-title{font-size:20px;font-weight:700}
.office-report,.office-invoice{display:flex;flex-direction:column;gap:16px;padding:24px}
.office-report{flex:1;min-width:0}
.office-invoice{flex:none;width:380px}
.office-sign{display:flex;align-items:center;gap:16px;padding-top:8px}
.review{display:flex;flex-direction:column;border-top:1px solid var(--color-line)}
.review-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--color-line)}
.review-row:last-child{border-bottom:0}
.review-label{flex:1;font-size:16px;font-weight:600}
.review-state{color:var(--color-success);font-size:14px;font-weight:600}
.review-num{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:var(--color-brand);color:var(--color-on-brand);font-size:14px;font-weight:700}
@media (min-width:768px){.office-intro{margin-bottom:56px}}
@media (min-width:1000px){.office-intro{grid-template-columns:560px minmax(0,1fr);gap:80px}.points{margin-top:28px}}

.team{display:grid;gap:48px}
.team-text{display:flex;flex-direction:column;gap:24px;min-width:0}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.team-fit{padding:20px 24px;background:var(--color-surface);border-radius:8px}
.team-fit p{color:var(--color-muted);margin-top:8px}
.team-stage{--w:617;--h:700}
.team>.fit{width:100%;max-width:617px}
@media (min-width:1000px){.team{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px;align-items:center}}

.origin{display:flex;gap:30px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.origin figure{flex:none;width:min(300px,80vw);scroll-snap-align:start}
.origin figcaption{margin-top:14px;color:var(--color-muted);font-size:15px;font-weight:600}
.board-stage{--w:380;--h:520}
@media (min-width:768px){.origin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding-bottom:0}.origin figure{width:auto}}
.board{display:flex;flex-direction:column;width:380px;height:520px;border-radius:6px;border:1px solid var(--color-line);background:var(--color-paper);color:var(--color-print-ink)}
.board-plan{gap:20px;padding:28px}
.board-label{color:var(--color-paper-print)}
.board-title{font:400 28px/1 var(--font-display);text-transform:uppercase}
.sticky{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--color-note);box-shadow:var(--shadow-card);rotate:1.5deg}
.sticky-b{background:var(--color-note-alt);rotate:-1.2deg}
.sticky-hand{color:var(--color-pen);font:600 28px/1.1 var(--font-hand)}
.sticky-text{color:var(--color-paper-print);font-size:14px;line-height:1.4}
.board-needs{display:flex;flex-direction:column;gap:8px}
.board-chips{display:flex;gap:8px}
.board-chips span{padding:5px 10px;border:1.5px solid var(--color-print-ink);border-radius:4px;font-size:14px;font-weight:600;line-height:1.3}
.board-wire{align-items:center;padding:28px 56px}
.wire-phone{display:flex;flex-direction:column;gap:12px;width:268px;height:464px;padding:24px 16px;border:2px solid var(--color-wire);border-radius:28px;color:var(--color-paper-print)}
.wire-brand{font-size:14px;font-weight:700}
.wire-title{font-size:20px;font-weight:700}
.wire-segment{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--color-wire);border-radius:6px;font-size:12px}
.wire-segment span{display:flex;align-items:center;justify-content:center;height:26px;border-radius:4px}
.wire-segment .is-on{border:1.5px solid var(--color-wire)}
.wire-card{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--color-wire);border-radius:6px}
.wire-card-96{height:96px}
.wire-card-64{height:64px;overflow:hidden}
.wire-card i{display:block;height:6px;flex:none;border-radius:3px;background:var(--color-wire-fill)}
.wire-time{font:500 11px/1.2 var(--font-mono)}
.wire-name{font-size:14px;font-weight:700;line-height:1.2}
.wire-spacer{flex:1}
.wire-action{display:flex;align-items:center;justify-content:center;height:40px;border:1.5px solid var(--color-wire);border-radius:6px;font-size:13px;font-weight:600}
.board-final{align-items:center;justify-content:center;background:var(--color-surface)}

.slip{display:block;position:relative;width:380px;height:520px;background:var(--color-paper);border-radius:3px;color:var(--color-paper-print);overflow:hidden}
.slip i{display:block;position:absolute}
.slip-line{left:0;width:100%;height:1px;background:var(--color-paper-line)}
.slip-margin{left:92px;top:66px;width:1.5px;height:412px;background:var(--color-paper-margin)}
.slip-job{position:absolute;left:24px;top:30px;font:700 13px/1.2 var(--font-text);letter-spacing:2px;text-transform:uppercase}
.slip-no{position:absolute;right:20px;top:22px;font:400 26px/1.2 var(--font-display);text-transform:uppercase}
.slip-rule{left:24px;top:64px;width:332px;height:2px;background:var(--color-paper-print)}
.slip-field{position:absolute;left:24px;font:500 12px/1.2 var(--font-text)}
.slip-hand{position:absolute;left:106px;color:var(--color-pen);font:600 30px/34px var(--font-hand);white-space:nowrap}
.slip-scribble{position:absolute;left:104px;top:249px;width:146px;height:10px;color:var(--color-pen)}
.slip-coffee{left:292px;top:372px;width:110px;height:104px;border:7px solid #8A6A4A33;border-radius:50%}
.slip-sign{position:absolute;left:110px;top:408px;color:var(--color-pen)}
.slip-sign-line{left:24px;top:478px;width:332px;height:1.5px;background:var(--color-paper-print)}
.slip-sign-label{position:absolute;left:24px;top:486px;font:500 12px/1.2 var(--font-text)}

.closing{padding-block:var(--section);background:var(--color-brand);color:var(--color-on-brand)}
.closing h2{max-width:900px}
.foot{background:var(--color-bg);border-top:1px solid var(--color-line);padding-block:40px}
.foot-in{display:grid;gap:24px}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;color:var(--color-muted);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.modes legend{float:left;margin-right:8px;color:var(--color-muted);font-size:15px;font-weight:500;line-height:44px}
.modes label{position:relative;display:inline-flex;cursor:pointer}
.modes input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.modes span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--color-line-strong);border-radius:4px;font-size:15px;font-weight:600}
.modes label:hover span{background:var(--color-sunken)}
.modes input:checked+span{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.modes input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:2px}
@media (min-width:1000px){.foot-in{grid-template-columns:minmax(0,1fr) auto;align-items:center}.modes{grid-column:2;justify-content:flex-end}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important}
}