:root{
  --gold:#c27a00;
  --gold2:#df970f;
  --black:#050505;
  --ink:#17191e;
  --muted:#7c818b;
  --line:#d7dce3;
  --soft:#f6f6f6;
  --card:#fff;
  --display:'Michroma','Eurostile','Microgramma','Arial Narrow',Arial,sans-serif;
  --body:'Montserrat','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:#fff}
body{margin:0;color:var(--ink);background:#fff;font-family:var(--body);font-size:12px;-webkit-font-smoothing:antialiased}
.brand-header{width:100%;background:#050505;overflow:hidden;display:flex;justify-content:center}
.brand-header img{display:block;width:100%;max-width:1024px;height:auto;image-rendering:auto}
.page-shell{max-width:1024px;margin:0 auto;padding:16px 23px 14px}
.page-title{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding:0 22px 8px}
.page-title h1{font-family:var(--display);font-weight:400;font-size:31px;line-height:1.25;letter-spacing:1.4px;margin:0 0 6px;color:#090a0c}
.page-title p{font-family:var(--display);font-size:10px;letter-spacing:8px;color:#8a8e96;margin:0}
.side-motto{font-family:var(--display);font-size:8px;line-height:1.8;letter-spacing:2.4px;color:#666b74;min-width:180px;padding-top:14px;text-align:left}
.side-motto span,.section-note span{display:inline-block;width:56px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2));margin:0 14px 5px 0}
.steps{display:flex;align-items:center;padding:12px 28px 18px;gap:10px;font-family:var(--body);font-size:9px;color:#69707b;white-space:nowrap}
.steps .step{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;cursor:pointer}
.steps b{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#9b9b9b;color:#fff;font-family:var(--body);font-size:12px}
.steps .active b{background:linear-gradient(145deg,var(--gold2),#9d5b00)}
.steps .active span{color:#16181c;font-weight:700}
.steps i{height:1px;background:#ccd0d6;flex:1;min-width:28px}
.card{border:1px solid #e5e6e8;border-radius:7px;margin-bottom:10px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.035)}
.card-head{height:49px;background:linear-gradient(180deg,#fbfbfb 0%,#f3f3f3 100%);display:flex;align-items:center;padding:0 22px;gap:20px}
.section-number{width:48px;height:38px;border:1px solid #d28b0a;background:#050505;color:#fff;border-radius:6px;display:grid;place-items:center;font-family:var(--display);font-size:16px;box-shadow:inset 0 0 0 1px rgba(255,190,61,.1)}
.card-head h2{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:2.4px;margin:0;flex:1;color:#111317}
.section-note{font-family:var(--display);font-size:7px;letter-spacing:1.7px;line-height:1.65;color:#666c75;text-align:right;min-width:220px}
.card-body{padding:14px 22px 18px}
.grid{display:grid;column-gap:26px;row-gap:12px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.span-2{grid-column:span 2}
label,legend{font-weight:700;font-size:10px;letter-spacing:.01em;color:#171a20}
label em{font-style:normal;color:#e00000;margin-left:2px}
input,select,textarea{width:100%;margin-top:6px;border:1px solid #c7cdd5;border-radius:2px;background:#fff;color:#4a505b;padding:9px 10px;font-family:var(--body);font-size:11px;outline:none;transition:.15s border-color,.15s box-shadow}
input:focus,select:focus,textarea:focus{border-color:#c88a1f;box-shadow:0 0 0 2px rgba(200,138,31,.12)}
textarea{min-height:103px;resize:vertical;line-height:1.4}
fieldset{border:0;background:linear-gradient(135deg,#f6f6f6,#fafafa);margin:0;padding:10px 16px 8px;align-self:stretch}
fieldset legend{padding:0;margin:0 0 6px}
.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:11px;margin:7px 0}
.check input,.confirm input{width:auto;margin:0;accent-color:#111}
.schedule-grid{column-gap:22px}
.uploads{display:grid;grid-template-columns:1fr 1fr}
.upload-panel{padding:16px 22px 18px;cursor:pointer}
.upload-panel+ .upload-panel{border-left:1px solid #ddd}
.upload-title{display:flex;gap:13px;align-items:flex-start;margin-bottom:10px}
.upload-title .icon{font-size:27px;line-height:1;color:#0f1114}
.upload-title strong{display:block;font-size:11px;letter-spacing:.01em}
.upload-title small{display:block;font-weight:400;color:#6e747e;font-size:9px;margin-top:3px}
.upload-panel input[type=file]{display:none}
.dropzone{border:1px dashed #bfc7d1;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#20242a;font-size:11px;font-weight:400}
.dropzone .cloud{font-size:29px;line-height:1;margin-bottom:2px}
.dropzone small{font-size:9px;color:#9a9fa7;margin-top:4px;font-weight:400}
.file-list{font-size:9px;color:#5c626d;margin-top:6px;min-height:0}
.review-body{padding:11px 22px 14px}
.confirm{display:flex;align-items:center;gap:8px;font-weight:400;font-size:10px;padding:0 0 10px;border-bottom:1px solid #ececef}
.actions{display:flex;justify-content:space-between;align-items:center;padding-top:10px}
button{border:0;border-radius:4px;padding:11px 18px;font-family:var(--body);font-weight:600;cursor:pointer;font-size:11px}
.secondary{background:#f2f2f2;color:#15171c;min-width:150px}
.primary{background:linear-gradient(90deg,#a86600,#d88908);color:#fff;min-width:250px;font-size:12px}
#status{text-align:center;font-size:10px;font-weight:600;margin:10px 0 0;color:#8b5c00}
.brand-footer{background:#050505;color:#fff;min-height:84px;padding:18px 36px;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:30px}
.brand-footer strong{font-family:var(--body);font-size:13px;letter-spacing:1px;display:block}
.brand-footer small{display:block;font-size:8px;letter-spacing:.6px;margin-top:7px}.brand-footer i{color:#d4941b;font-style:normal;margin:0 3px}
.footer-center{font-family:var(--display);font-size:8px;letter-spacing:1.5px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.footer-center span{width:38px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2));margin-right:20px}
.footer-contact{font-size:8px;line-height:1.9;letter-spacing:.8px}
@media (max-width:760px){
  .page-shell{padding:14px 12px}.page-title{padding:0 5px 10px;display:block}.page-title h1{font-size:20px;letter-spacing:.7px}.page-title p{font-size:7px;letter-spacing:4px}.side-motto{display:none}
  .steps{padding:8px 4px 15px;overflow:auto;gap:8px}.steps span{font-size:8px}.steps i{min-width:22px}.steps b{width:26px;height:26px}
  .card-head{padding:0 12px;gap:11px}.section-number{width:38px;height:33px;font-size:12px}.card-head h2{font-size:12px;letter-spacing:1.2px}.section-note{display:none}
  .card-body{padding:13px 13px 16px}.grid-3,.grid-4{grid-template-columns:1fr}.span-2{grid-column:auto}
  .uploads{grid-template-columns:1fr}.upload-panel+ .upload-panel{border-left:0;border-top:1px solid #ddd}.upload-panel{padding:16px 14px}
  .actions{flex-direction:column-reverse;gap:9px;align-items:stretch}.secondary,.primary{width:100%}
  .brand-footer{grid-template-columns:1fr;padding:19px 22px;gap:12px}.footer-center{justify-content:flex-start}.brand-footer img{width:100%}
}

.hidden{display:none !important}
.conditional-material-date{margin-top:14px;padding-top:12px;border-top:1px solid #d8d8d8}
.conditional-material-date label{display:block;font-weight:700;font-size:.72rem;letter-spacing:.04em}
.conditional-material-date input[type="date"]{width:100%;margin-top:6px}

button:disabled{opacity:.65;cursor:not-allowed}
#status strong{font-family:'Michroma',sans-serif;letter-spacing:.05em}

.upload-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;font-size:9px;color:#747b85}
.clear-files,.remove-file{border:0;background:transparent;color:#9b5d00;font:inherit;font-weight:700;cursor:pointer;padding:3px 0}
.file-list{display:flex;flex-direction:column;gap:5px}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;background:#f7f7f7;border:1px solid #e5e5e5;border-radius:4px}
.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#505660}
.remove-file{white-space:nowrap}
.dropzone.upload-full{background:#f2f2f2;color:#9a9fa7;border-color:#d6d6d6;cursor:not-allowed}
.dropzone.upload-full .cloud{opacity:.35}
.dropzone.drag-over{outline:2px solid #b97700;outline-offset:2px}
.hidden{display:none!important}

.card{scroll-margin-top:18px}
.steps .step:focus-visible{outline:2px solid var(--gold2);outline-offset:4px;border-radius:20px}

@media (min-width:761px){.rep-email{grid-column:3}}

.native-file-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.dropzone{
  position:relative;
  cursor:pointer;
  user-select:none;
}
.dropzone *{pointer-events:none;}
.dropzone.upload-full{cursor:not-allowed;}

/* V20: single photo uploader uses full attachment width */
.uploads.photos-only{grid-template-columns:1fr;}
.uploads.photos-only .upload-panel{width:100%;}
/* V21 — Existing work order updates */
.portal-mode{display:flex;gap:10px;margin:0 0 18px}.mode-btn{flex:1;padding:15px 18px;border:1px solid #c7c7c7;background:#fff;font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:.7px;cursor:pointer}.mode-btn.active{background:#090909;color:#fff;border-color:#b97700;box-shadow:inset 0 -3px #b97700}.update-card{margin-bottom:28px}.update-lookup{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:14px;align-items:end;max-width:760px}.lookup-btn{height:46px}.lookup-status{font-weight:700;margin:14px 0}.found-ticket{background:#f5f5f5;border-left:4px solid #b97700;padding:16px 18px;margin:12px 0 22px;line-height:1.6}.found-ticket strong{font-size:18px}.update-grid{margin-bottom:18px}.update-photos{margin-top:10px}.update-actions{justify-content:flex-end;margin-top:18px}#updateStatus{font-weight:600;line-height:1.5}.hidden{display:none!important}@media(max-width:700px){.portal-mode{flex-direction:column}.update-lookup{grid-template-columns:1fr}.update-grid{display:block}.update-grid label{display:block;margin-bottom:14px}}

/* V21.1 — exact BUILT BY JOZAY header */
.brand-header, .hero-header, .header-image, header .header-image {
  overflow: hidden;
}
.brand-header img, .hero-header img, .header-image img, img[src*="approved-header"] {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}
