#om-project-demo { --pd-bg:#f7f7f2;--pd-panel:#f7f7f2;--pd-ink:#161616;--pd-muted:#5d5d57;--pd-line:#d5d5ce;--pd-soft:#e2eff8;--pd-primary:#ffb09d;--pd-on:#161616;--pd-warning:#fff3be;--pd-warntext:#161616; font-family:Heebo,Arial,sans-serif;color:var(--pd-ink);background:var(--pd-bg);font-size:16px;line-height:1.6; }
#om-project-demo * {box-sizing:border-box;}
#om-project-demo button,#om-project-demo input,#om-project-demo select {font:inherit;}
#om-project-demo button {cursor:pointer;}
#om-project-demo button:disabled {cursor:default;opacity:.45;}
#om-project-demo .pd-top {display:flex;justify-content:space-between;gap:14px;align-items:center;padding:22px 28px;border-bottom:1px solid var(--pd-line);flex-wrap:wrap;}
#om-project-demo .pd-brand {font-weight:700;font-size:25px;letter-spacing:-1px;}
#om-project-demo .pd-brand span {font-size:14px;font-weight:400;letter-spacing:0;margin-inline-start:12px;color:var(--pd-muted);}
#om-project-demo .pd-badge {font-size:12px;background:var(--pd-soft);padding:5px 10px;color:var(--pd-ink);}
#om-project-demo .pd-layout {display:grid;grid-template-columns:170px minmax(0,1fr);}
#om-project-demo .pd-side {padding:26px 18px;border-inline-end:1px solid var(--pd-line);}
#om-project-demo .pd-eyebrow {font-size:12px;color:var(--pd-muted);margin:0 0 12px;}
#om-project-demo .pd-nav {display:flex;flex-direction:column;gap:7px;}
#om-project-demo .pd-nav button {display:flex;align-items:center;gap:10px;text-align:right;padding:12px 10px;border:0;background:transparent;color:var(--pd-muted);}
#om-project-demo .pd-nav button[aria-current="step"] {background:var(--pd-primary);color:var(--pd-on);}
#om-project-demo .pd-n {font:400 12px Arial,sans-serif;opacity:.8;}
#om-project-demo .pd-context {margin-top:38px;font-size:12px;color:var(--pd-muted);}
#om-project-demo .pd-context strong {display:block;color:var(--pd-ink);font-size:14px;margin-block:4px;}
#om-project-demo .pd-main {padding:30px;min-width:0;min-height:570px;}
#om-project-demo h2 {font-size:30px;line-height:1.2;letter-spacing:-.8px;font-weight:500;margin:0 0 10px;}
#om-project-demo h3 {font-size:18px;line-height:1.4;font-weight:500;margin:0 0 12px;}
#om-project-demo p {margin:0 0 14px;}
#om-project-demo .pd-lead {color:var(--pd-muted);margin-bottom:26px;}
#om-project-demo .pd-sheet {background:var(--pd-panel);border:1px solid var(--pd-line);padding:24px;}
#om-project-demo .pd-mailhead {display:flex;gap:12px;align-items:center;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--pd-line);}
#om-project-demo .pd-avatar {width:40px;height:40px;display:grid;place-items:center;background:var(--pd-soft);font-size:20px;}
#om-project-demo small {display:block;font-size:12px;color:var(--pd-muted);}
#om-project-demo .pd-message {font-size:18px;line-height:1.8;max-width:590px;}
#om-project-demo .pd-file {margin-top:22px;border-top:1px solid var(--pd-line);padding-top:14px;font-size:13px;}
#om-project-demo .pd-file summary {cursor:pointer;}
#om-project-demo .pd-file p {margin:12px 0 0;color:var(--pd-muted);}
#om-project-demo .pd-actions {margin-top:24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
#om-project-demo .pd-button {border:1px solid var(--pd-line);padding:11px 18px;background:var(--pd-panel);color:var(--pd-ink);min-height:44px;}
#om-project-demo .pd-button.pd-primary {background:var(--pd-primary);border-color:var(--pd-primary);color:var(--pd-on);}
#om-project-demo .pd-button:hover:not(:disabled) {filter:brightness(.95);}
#om-project-demo .pd-note {font-size:12px;color:var(--pd-muted);}
#om-project-demo .pd-facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0;}
#om-project-demo .pd-facts div {border-bottom:1px solid var(--pd-line);padding-bottom:14px;}
#om-project-demo .pd-facts strong {display:block;font-size:20px;font-weight:500;}
#om-project-demo .pd-warning {background:var(--pd-warning);color:var(--pd-warntext);padding:17px 20px;margin:20px 0;}
#om-project-demo .pd-confirm {display:flex;gap:10px;align-items:flex-start;margin-top:16px;cursor:pointer;}
#om-project-demo input[type="checkbox"] {accent-color:#161616;width:20px;height:20px;flex:0 0 auto;margin-top:4px;}
#om-project-demo .pd-form {display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0;}
#om-project-demo .pd-form label {display:block;font-size:13px;}
#om-project-demo input[type="number"],#om-project-demo select {display:block;width:100%;margin-top:7px;min-height:46px;padding:8px 10px;border:1px solid var(--pd-line);background:var(--pd-panel);color:var(--pd-ink);border-radius:0;}
#om-project-demo .pd-table {width:100%;border-collapse:collapse;text-align:right;font-size:14px;}
#om-project-demo .pd-table th {font-size:12px;color:var(--pd-muted);font-weight:400;padding:9px 0;}
#om-project-demo .pd-table td {padding:12px 0;border-top:1px solid var(--pd-line);vertical-align:top;}
#om-project-demo .pd-table td:last-child,#om-project-demo .pd-table th:last-child {text-align:left;}
#om-project-demo .pd-total {display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:18px 0 6px;}
#om-project-demo .pd-total strong {font:500 31px Heebo,Arial,sans-serif;}
#om-project-demo .pd-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0;}
#om-project-demo .pd-metric {border-top:2px solid var(--pd-line);padding-top:12px;}
#om-project-demo .pd-metric strong {display:block;font-size:25px;font-weight:500;font-variant-numeric:tabular-nums;}
#om-project-demo .pd-split {display:grid;grid-template-columns:1.05fr 1fr;gap:24px;margin-top:24px;}
#om-project-demo .pd-task {display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--pd-line);cursor:pointer;}
#om-project-demo .pd-task input:checked+span {color:var(--pd-muted);text-decoration:line-through;}
#om-project-demo .pd-costrow {display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--pd-line);}
#om-project-demo .pd-costrow button {color:var(--pd-ink);background:none;border:0;padding:0;min-height:30px;text-decoration:underline;text-underline-offset:4px;}
#om-project-demo .pd-draft {margin-top:16px;border-inline-start:3px solid var(--pd-primary);padding-inline-start:16px;}
#om-project-demo .pd-footer {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--pd-line);padding:14px 26px;font-size:12px;color:var(--pd-muted);}
#om-project-demo .pd-status {margin:14px 0 0;color:var(--pd-primary);font-size:13px;}
#om-project-demo .pd-reset {border:0;background:none;color:var(--pd-muted);text-decoration:underline;padding:0;min-height:30px;}
#om-project-demo [hidden] {display:none!important;}
@media(max-width:720px){#om-project-demo .pd-layout{grid-template-columns:1fr;}#om-project-demo .pd-side{padding:12px 18px;border-inline-end:0;border-bottom:1px solid var(--pd-line);}#om-project-demo .pd-nav{flex-direction:row;flex-wrap:wrap;gap:4px;}#om-project-demo .pd-nav button{padding:8px;font-size:13px;}#om-project-demo .pd-side .pd-eyebrow,#om-project-demo .pd-context{display:none;}#om-project-demo .pd-main{padding:24px 18px;}#om-project-demo .pd-top{padding:18px;}#om-project-demo .pd-split{grid-template-columns:1fr;}}
@media(max-width:420px){#om-project-demo .pd-form{grid-template-columns:1fr;}#om-project-demo .pd-sheet{padding:18px;}#om-project-demo .pd-facts{gap:10px;}#om-project-demo .pd-facts strong{font-size:17px;}#om-project-demo .pd-metrics{grid-template-columns:1fr;gap:12px;}#om-project-demo .pd-metric{display:flex;justify-content:space-between;align-items:center;}#om-project-demo .pd-brand span{display:block;margin:0;}#om-project-demo h2{font-size:27px;}}

/* Studio identity around the working interface; a quiet, paper-first workspace. */
.project-demo-page { --blue:#161616; }
.project-intro { display:grid; grid-template-columns:1.4fr 1fr; align-items:end; gap:70px; padding-block:42px 48px; }
.project-back { display:inline-block; border-bottom:1px solid; font-size:14px; margin-bottom:24px; }
.project-intro h1 { font-size:clamp(38px,5.2vw,76px); line-height:1.05; letter-spacing:-.05em; }
.project-intro > p { font-size:17px; line-height:1.7; max-width:42ch; }
#om-project-demo { border:1px solid var(--ink); }
#om-project-demo .pd-top { background:#6db4ea; padding:20px 28px; border-bottom:1px solid var(--ink); }
#om-project-demo .pd-brand { font-size:21px; letter-spacing:-.035em; }
#om-project-demo .pd-brand span { color:var(--ink); }
#om-project-demo .pd-top > .pd-badge { background:transparent; padding:0; font-size:12px; }
#om-project-demo .pd-layout { grid-template-columns:210px minmax(0,1fr); }
#om-project-demo .pd-side { padding:30px 16px; }
#om-project-demo .pd-nav { gap:6px; }
#om-project-demo .pd-nav button { padding:14px 12px; min-height:52px; color:var(--ink); font-size:15px; }
#om-project-demo .pd-nav button[aria-current="step"] { background:var(--coral); border-inline-start:2px solid var(--ink); }
#om-project-demo .pd-nav button:disabled { opacity:.5; cursor:not-allowed; }
#om-project-demo .pd-nav button:hover:not(:disabled) { background:#fff46f; }
#om-project-demo .pd-main { padding:36px; min-height:540px; scroll-margin-top:calc(var(--header) + 20px); }
#om-project-demo h2 { font-size:clamp(28px,2.8vw,40px); letter-spacing:-.04em; }
#om-project-demo h2:focus { outline:none; }
#om-project-demo h3 { font-size:19px; }
#om-project-demo .pd-lead { font-size:16px; max-width:65ch; }
#om-project-demo .pd-eyebrow { font-size:13px; }
#om-project-demo .pd-sheet { border:1px solid var(--pd-line); }
#om-project-demo .pd-badge { background:#e2eff8; }
#om-project-demo .pd-primary { font-weight:500; }
#om-project-demo .pd-button { border-color:#aaa9a1; }
#om-project-demo .pd-button.pd-primary { border-color:var(--ink); }
#om-project-demo .pd-button:hover:not(:disabled) { background:#fff46f; filter:none; }
#om-project-demo .pd-confirm { padding:16px 0; }
#om-project-demo .pd-form { align-items:start; }
#om-project-demo .pd-form label { font-size:14px; min-width:0; }
#om-project-demo .pd-split .pd-form { grid-template-columns:1fr; }
#om-project-demo .pd-table td:first-child { padding-inline-end:14px; }
#om-project-demo .pd-table td:last-child { white-space:nowrap; }
#om-project-demo .pd-metric { border-color:#6db4ea; }
#om-project-demo .pd-metric strong { color:var(--ink); }
#om-project-demo .pd-task { padding-block:15px; min-height:48px; }
#om-project-demo .pd-task input:checked { accent-color:#161616; }
#om-project-demo .pd-costrow { align-items:center; }
#om-project-demo .pd-costrow button { min-height:44px; padding-inline:6px; }
#om-project-demo .pd-costrow button:disabled { text-decoration:none; opacity:1; color:#315427; background:#e8f4e1; font-size:12px; padding:4px 8px; }
#om-project-demo .pd-draft { padding:20px; border:1px solid var(--pd-line); border-inline-start:4px solid var(--coral); margin-top:20px; }
#om-project-demo .pd-draft p { margin-top:12px; }
#om-project-demo .pd-error { font-size:13px; color:#8e2424; display:block; margin-top:8px; }
#om-project-demo input[aria-invalid="true"] { border:2px solid #8e2424; }
#om-project-demo input:focus-visible,#om-project-demo select:focus-visible,#om-project-demo button:focus-visible,#om-project-demo summary:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
#om-project-demo .pd-reset { border:0; border-bottom:1px solid; background:transparent; padding:8px 0; color:var(--ink); min-height:44px; }
#om-project-demo .pd-footer { align-items:center; color:var(--ink); }
#om-project-demo .pd-noscript { padding:24px; }
.project-contact { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; padding-block:70px; }
.project-contact h2 { font-size:clamp(42px,5vw,70px); letter-spacing:-.045em; line-height:1.05; margin-top:18px; }
.project-contact p { font-size:17px; line-height:1.65; }
.project-contact-link { display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--coral); padding:20px 24px; margin-top:24px; font-size:18px; }
.project-contact-link:hover { background:#fff46f; }
.project-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-block:24px; font-size:13px; }
.project-footer a:last-child { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:900px){
 .project-intro { gap:30px; }
 #om-project-demo .pd-layout { grid-template-columns:1fr; }
 #om-project-demo .pd-side { padding:0; border-inline-end:0; border-bottom:1px solid var(--line); }
 #om-project-demo .pd-side .pd-eyebrow,#om-project-demo .pd-context { display:none; }
 #om-project-demo .pd-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
 #om-project-demo .pd-nav button { justify-content:center; padding:15px 8px; font-size:13px; }
 #om-project-demo .pd-nav button[aria-current="step"] { border-inline-start:0; border-bottom:2px solid var(--ink); }
 #om-project-demo .pd-split { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
 .project-intro { grid-template-columns:1fr; gap:22px; padding-block:24px 30px; }
 .project-intro h1 { font-size:42px; }
 .project-intro > p { font-size:15px; max-width:unset; }
 .project-back { margin-bottom:20px; font-size:13px; }
 #om-project-demo { width:calc(100% - 24px); }
 #om-project-demo .pd-top { padding:16px; gap:8px; }
 #om-project-demo .pd-brand { font-size:18px; }
 #om-project-demo .pd-brand span { display:none; }
 #om-project-demo .pd-top > .pd-badge { font-size:10px; }
 #om-project-demo .pd-nav button { flex-direction:column; gap:5px; min-height:70px; padding:10px 3px; font-size:11px; white-space:nowrap; }
 #om-project-demo .pd-main { padding:24px 18px; min-height:0; }
 #om-project-demo h2 { font-size:29px; }
 #om-project-demo .pd-lead { font-size:14px; margin-bottom:22px; }
 #om-project-demo .pd-sheet { padding:18px; }
 #om-project-demo .pd-message { font-size:16px; line-height:1.75; }
 #om-project-demo .pd-form { grid-template-columns:1fr; }
 #om-project-demo .pd-form label { font-size:13px; }
 #om-project-demo .pd-split { grid-template-columns:1fr; gap:30px; }
 #om-project-demo .pd-actions { align-items:stretch; flex-direction:column; }
 #om-project-demo .pd-button { width:100%; padding:14px; min-height:50px; font-size:15px; }
 #om-project-demo .pd-note { font-size:11px; }
 #om-project-demo .pd-facts strong { font-size:18px; }
 #om-project-demo .pd-warning { padding:15px; font-size:14px; }
 #om-project-demo .pd-confirm { font-size:14px; }
 #om-project-demo .pd-metrics { grid-template-columns:1fr; gap:10px; }
 #om-project-demo .pd-metric { display:flex; gap:12px; justify-content:space-between; align-items:center; padding-top:10px; border-width:1px; }
 #om-project-demo .pd-metric strong { font-size:23px; }
 #om-project-demo .pd-metric small { max-width:24ch; }
 #om-project-demo .pd-table { font-size:12px; }
 #om-project-demo .pd-table th { font-size:11px; }
 #om-project-demo .pd-total strong { font-size:28px; }
 #om-project-demo .pd-footer { padding:12px 18px; font-size:11px; gap:6px; }
 .project-contact { grid-template-columns:1fr; gap:28px; padding-block:42px; }
 .project-contact h2 { font-size:44px; }
 .project-contact p { font-size:15px; }
 .project-contact-link { font-size:16px; padding:18px; }
}
@media(prefers-reduced-motion:reduce){ .project-demo-page { scroll-behavior:auto; } }