:root{--bg:#080807;--panel:#14130f;--panel2:#1b1913;--line:#373125;--text:#f4efe4;--muted:#a29d92;--gold:#e0bb62;--green:#78c89a;--red:#ef8e83;--radius:18px}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,rgba(224,187,98,.1),transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
a{color:inherit}
.sp-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px clamp(18px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(8,8,7,.92);backdrop-filter:blur(18px)}
.sp-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.sp-brand img{width:42px;height:42px;border-radius:12px}
.sp-brand b,.sp-brand small{display:block}
.sp-brand b{font-family:Georgia,serif;letter-spacing:.15em;color:var(--gold)}
.sp-brand small{margin-top:3px;color:var(--muted);font-size:9px}
.sp-header nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.sp-header nav a{padding:9px 11px;border-radius:10px;color:var(--muted);font-size:12px;text-decoration:none}
.sp-header nav a[aria-current=page],.sp-header nav a:hover{background:var(--panel2);color:var(--text)}
.sp-main{width:min(1280px,calc(100% - 36px));margin:0 auto;padding:42px 0 80px}
.sp-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.eyebrow{margin:0 0 8px;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.15em}
.sp-hero h1{margin:0;font:500 clamp(38px,6vw,66px)/1 Georgia,serif;letter-spacing:-.04em}
.sp-hero p:not(.eyebrow){max-width:700px;color:var(--muted);line-height:1.6}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.metric,.panel,.record{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,var(--panel2),var(--panel))}
.metric{padding:18px}
.metric span,.metric small{display:block;color:var(--muted);font-size:11px}
.metric strong{display:block;margin:8px 0;font:500 32px Georgia,serif;color:var(--gold)}
.tabs{display:flex;gap:7px;margin:26px 0;overflow:auto}
.tabs button,.button{min-height:42px;padding:10px 15px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.tabs button.active,.button.primary{border-color:#8f7137;background:linear-gradient(135deg,#f0d17f,#bf8d38);color:#17120a}
.button.danger{color:var(--red)}
.panel{padding:clamp(18px,3vw,28px);margin:16px 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel h2,.record h3{margin:0;font-family:Georgia,serif;font-weight:500}
.stack{display:grid;gap:12px}
.record{padding:16px}
.record-head{display:flex;align-items:start;justify-content:space-between;gap:14px}
.record p{color:var(--muted);line-height:1.5}
.status{display:inline-flex;padding:5px 8px;border:1px solid var(--line);border-radius:99px;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.07em}
.meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:10px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid label{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:700}
.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0e0e0c;color:var(--text);font:inherit}
.form-grid textarea{min-height:120px;resize:vertical}
.field-note,.empty{color:var(--muted);font-size:12px;line-height:1.6}
.deliverable-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border-top:1px solid var(--line);font-size:11px}
.toast{position:fixed;right:20px;bottom:20px;z-index:50;max-width:360px;padding:13px 16px;border:1px solid #725b2f;border-radius:12px;background:#211b10;color:#f0d17f;box-shadow:0 16px 50px #0008}
.loading{min-height:45vh;display:grid;place-items:center;color:var(--muted)}
dialog{width:min(650px,calc(100% - 28px));border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--text);padding:0}
dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}
dialog form{padding:24px}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.hidden{display:none!important}
.option-group{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px}
.option-group legend{padding:0 7px;color:var(--muted);font-size:11px}
.option-group label{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#0e0e0c}
.option-group input{width:auto;min-height:auto}
.form-grid .checkbox-label{display:flex;align-items:center;flex-direction:row;gap:9px;min-height:44px}
.form-grid .checkbox-label input{width:auto;min-height:auto}
.catalog-tools{display:grid;grid-template-columns:minmax(220px,2fr) repeat(2,minmax(150px,1fr));gap:12px;margin:0 0 28px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#0d0d0b}
.catalog-tools label{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:750}
.catalog-tools input,.catalog-tools select{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#15140f;color:var(--text);font:inherit}
.service-group{padding-top:22px;border-top:1px solid var(--line)}
.service-group+.service-group{margin-top:30px}
.service-group-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.service-group-head h3{margin:0;font:500 25px Georgia,serif}
.service-group-head>span{color:var(--muted);font-size:11px}
.service-record{display:flex;min-height:260px;flex-direction:column}
.service-record .actions{margin-top:auto}
.button:focus-visible,.tabs button:focus-visible,.form-grid input:focus-visible,.form-grid select:focus-visible,.form-grid textarea:focus-visible,.catalog-tools input:focus-visible,.catalog-tools select:focus-visible{outline:3px solid rgba(224,187,98,.38);outline-offset:2px}
.button:disabled{cursor:wait;opacity:.58}
@media(max-width:850px){.metric-grid{grid-template-columns:repeat(2,1fr)}
.sp-header{align-items:flex-start}
.sp-header nav{max-width:55%;overflow:auto;flex-wrap:nowrap}
.sp-hero{align-items:start;flex-direction:column}
.deliverable-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.sp-main{width:min(100% - 24px,1280px);padding-top:28px}
.sp-header{padding:11px 12px}
.sp-brand small{display:none}
.sp-header nav a{white-space:nowrap}
.metric-grid{grid-template-columns:1fr 1fr}
.metric{padding:14px}
.form-grid{grid-template-columns:1fr}
.form-grid .full{grid-column:auto}
.record-head{flex-direction:column}
.button{width:100%}
.actions .button{flex:1}
.panel{border-radius:14px}
}
@media(max-width:700px){.catalog-tools{grid-template-columns:1fr}.service-group-head{align-items:start;flex-direction:column}}
@media(max-width:560px){.service-record{min-height:0}}

/* Functional containment: long customer filenames and actions remain reachable on phones. */
body[data-i18n-surface="portal"] .file-row{flex-wrap:wrap;overflow-wrap:anywhere}
body[data-i18n-surface="portal"] .file-row>span{min-width:0;flex:1 1 180px}
body[data-i18n-surface="portal"] .record{overflow-wrap:anywhere;min-width:0}
body[data-i18n-surface="portal"] .dialog-actions{flex-wrap:wrap}
body[data-i18n-surface="portal"] dialog{max-height:calc(100dvh - 28px);overflow:auto}
body[data-i18n-surface="portal"] summary{cursor:pointer;min-height:44px;padding:12px 0}
body[data-i18n-surface="portal"] summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
body[data-i18n-surface="portal"] .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-i18n-surface="portal"] [hidden]{display:none!important}

/* Service shopping and payment flow */
.service-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-top:24px}.service-shop-card{display:flex;flex-direction:column;gap:12px}.service-shop-card[hidden]{display:none}.service-shop-card h3{font-size:1.35rem}.service-shop-card .button{margin-top:auto}.service-shop-card p{margin:0}.order-estimate{padding:20px;margin:20px 0;border:1px solid #cfac5b;border-radius:16px;background:#d7b45a0b}.order-estimate strong{display:block;font-size:2rem;margin:8px 0}.inline-option{display:flex!important;align-items:center;gap:10px!important}.inline-option input{width:auto!important}.checkout-steps{display:flex;gap:16px;flex-wrap:wrap;color:#bbb;margin:16px 0 28px}.checkout-steps strong{color:#e6c778}.checkout-summary{position:sticky;top:24px;height:fit-content}.checkout-line{display:flex;justify-content:space-between;gap:20px;margin:14px 0}.payment-choice{display:flex!important;align-items:center;gap:12px!important;padding:16px;border:1px solid #ffffff25;border-radius:12px;cursor:pointer}.payment-choice:has(input:checked){border-color:#d7b45a;background:#d7b45a12}.payment-choice input{width:auto!important}.checkout-grid details summary{cursor:pointer;padding:10px 0}.checkout-grid .checkout-form{display:grid;gap:18px}.checkout-grid .form-grid{gap:14px}.checkout-grid .button.primary{min-height:48px}.checkout-title{font-size:1.6rem}.payment-note{padding:16px;border-radius:12px;background:#d7b45a12}#request-dialog{max-width:760px;width:calc(100% - 24px)}#request-dialog input,#request-dialog select,#request-dialog textarea{min-width:0}#order-estimate{scroll-margin:24px}button:disabled{opacity:.55;cursor:wait}@media(max-width:740px){.checkout-summary{position:static;order:-1}.dialog-actions{flex-wrap:wrap}.service-shop-grid{grid-template-columns:1fr}}

.checkout-total{align-items:baseline;flex-wrap:wrap}.checkout-total strong:first-child{font-size:1.1rem}.checkout-total strong:last-child{font-size:1.65rem}.checkout-grid>div{min-width:0}.checkout-summary{min-width:0}

/* Service progress uses the existing compact panels and preserves all controls. */
.service-progress{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;margin:1rem 0;counter-reset:service-step}.service-progress li{counter-increment:service-step;padding:.45rem .65rem;border:1px solid var(--line,#ffffff30);border-radius:.55rem;font-size:.9rem}.service-progress li:before{content:counter(service-step) " · ";opacity:.7}.service-progress [aria-current=step]{border-color:#9ec8ff;background:#23466a55;color:#fff}.service-next{font-weight:600;line-height:1.6}.service-count{display:inline-flex;padding:.1rem .4rem;border-radius:1rem;background:#b43b49;color:white}.record details{margin-top:1rem}.record summary{cursor:pointer;min-height:44px;padding:.7rem 0}.tabs>a{align-self:center}@media(max-width:600px){.service-progress{gap:.35rem}.service-progress li{font-size:.85rem}.record .actions{display:flex;flex-wrap:wrap}.record .actions>*{min-height:44px;max-width:100%;white-space:normal}}

@media(max-width:740px){body[data-r2=workflow][data-i18n-surface=portal] .r2-project-workspace>.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;align-content:start;height:auto}body[data-r2=workflow][data-i18n-surface=portal] .r2-project-workspace>.tabs>*{white-space:normal;text-align:center;min-height:48px;margin:0;padding:10px;align-self:stretch;display:flex;align-items:center;justify-content:center}}