/* ATHA — night-lit steel and amber, taken from the headquarters render.
   Layout: wide marketing page (1120px) for home; focused single column (760px) for the quote flow with a numbered step rail and fixed action bar. */
:root{
  --bg:#0B0B0D; --surface:#141417; --raised:#1C1C20; --sunk:#0F0F12; --line:#2A2A2F; --line-hi:#3A3A40;
  --ink:#EFEDEA; --muted:#A3A09B; --faint:#6E6B67;
  --steel:#D9D5CF; --amber:#E9A94C; --amber-hi:#FFCB7D; --amber-lo:#9A6B26; --amber-ink:#1B1206; --amber-soft:#22190D; --amber-line:#4A3519;
  --warn:#E8A36A;
  --f-wm:"Michroma","Segoe UI",sans-serif;
  --f-display:"Alexandria","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.qwrap{max-width:760px}
.wm{font-family:var(--f-wm);font-weight:400;letter-spacing:.32em;direction:ltr;unicode-bidi:isolate}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
h1{font-size:clamp(28px,4.6vw,48px);font-weight:700;line-height:1.25}
h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.3}
h3{font-size:16.5px;font-weight:600;line-height:1.4}
.lead{color:var(--muted);margin:10px 0 0;max-width:62ch;font-size:16px}
.lead.sm{font-size:14.5px;margin-top:6px}
.eyebrow{font-size:12px;letter-spacing:.02em;color:var(--amber);font-weight:600;margin:0 0 4px}
.eyebrow-l{font-family:var(--f-wm);font-size:11px;letter-spacing:.22em;color:var(--steel);margin:0 0 12px;direction:ltr;text-align:start;opacity:.9}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(11,11,13,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top-row{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;min-width:0}
.mark{width:34px;height:34px;flex:none}
.brand-t{display:flex;flex-direction:column;line-height:1.2;text-align:start}
.brand-t b{font-size:16px;color:var(--steel)}
.brand-t span{font-size:10.5px;color:var(--muted);letter-spacing:.06em;direction:ltr}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nl{background:none;border:0;border-radius:10px;padding:8px 12px;color:var(--muted);cursor:pointer;font-weight:500;white-space:nowrap}
.nl:hover{color:var(--ink)}
.nl.on{color:var(--ink);background:var(--raised)}
.top-tools{display:flex;align-items:center;gap:8px}
.in-quote .top-tools{margin-inline-start:0}
.tot{display:flex;flex-direction:column;align-items:flex-end;background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:12px;padding:4px 12px;cursor:pointer;line-height:1.3}
.tot small{font-size:10.5px;color:var(--muted)}
.tot b{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap}
.lang{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600}
.rail{border-top:1px solid var(--line)}
.rail-in{display:flex;gap:6px;overflow-x:auto;padding-block:8px;scrollbar-width:none;max-width:760px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rail-in::-webkit-scrollbar{display:none}
.chip{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:4px 12px 4px 6px;font-size:13px;cursor:pointer;white-space:nowrap}
.chip i{font-style:normal;font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--raised);font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.on i{background:var(--amber);color:var(--amber-ink)}
@media (max-width:760px){
  .brand-t span{display:none}
  .nl[data-view="home"]{display:none}
  .hide-s{display:none}
  .in-quote .nav{display:none}
  .in-quote .top-tools{margin-inline-start:auto}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--line-hi);background:var(--surface);font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:#55555c}
.btn.lg{min-height:52px;padding:0 22px;font-size:15.5px}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn.primary{background:linear-gradient(180deg,var(--amber-hi),var(--amber) 55%,#C7862F);color:var(--amber-ink);border-color:#C7862F}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:rgba(20,20,23,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--muted)}
.btn.quiet.armed{color:var(--warn);border-color:var(--warn)}
.btn:disabled{opacity:.35;cursor:default}
.wa-ic{width:20px;height:20px;flex:none}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:44px;align-items:center;padding-block:44px 8px}
.hero h1{font-size:clamp(28px,3.4vw,44px)}
.hero-text{min-width:0}
.hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(233,169,76,.45)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.install{margin-top:12px}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:22px;padding-block:0 4px}
  .hero-media{order:-1;margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
  .hero-media img{border-radius:0;border:0;border-bottom:1px solid var(--line);box-shadow:none}
}
@media (max-width:520px){ .cta-row .btn{flex:1 1 100%} }

/* home bands */
.band{padding-block:44px 8px}
.band-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap}
.cur select{appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A3A09B'/%3E%3C/svg%3E") no-repeat;background-position:right 12px center;border:1px solid var(--line-hi);border-radius:10px;padding:8px 32px 8px 12px;font-weight:600;cursor:pointer;direction:ltr}
.tier-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.tcard{display:flex;flex-direction:column;gap:4px;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:border-color .2s,transform .2s;min-width:0}
.tcard:hover{border-color:var(--amber-line);transform:translateY(-2px)}
.tc-name{font-family:var(--f-display);font-weight:600;font-size:17px}
.tc-pm{color:var(--muted);font-variant-numeric:tabular-nums}
.tc-pm b{font-family:var(--f-display);font-size:28px;font-weight:700;color:var(--amber-hi)}
.tc-tot{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;margin-top:6px;font-variant-numeric:tabular-nums}
@media (max-width:700px){ .tier-cards{grid-template-columns:1fr} .tcard{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between} .tc-tot{flex-basis:100%} }
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:18px}
.svc-i{background:var(--bg);padding:20px;min-width:0}
.svc-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-line);margin-bottom:10px}
.svc-i p{margin:6px 0 0;color:var(--muted);font-size:14px}
@media (max-width:900px){ .svc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .svc{grid-template-columns:1fr} }
.how{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.how li{display:flex;gap:12px;align-items:flex-start;min-width:0}
.how-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--amber-line);color:var(--amber);font-family:var(--f-display);font-weight:600}
.how p{margin:4px 0 0;color:var(--muted);font-size:14px}
@media (max-width:760px){ .how{grid-template-columns:1fr} }
.contact{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:radial-gradient(120% 160% at 90% 0%,#2A1E0E 0%,var(--surface) 60%);border:1px solid var(--amber-line);border-radius:18px;padding:24px}
.contact > div:first-child{min-width:0;flex:1 1 300px}
.contact-a{display:flex;flex-direction:column;gap:10px;flex:0 1 auto}
.phone-row{display:flex;align-items:center;gap:8px;justify-content:center}
.phone{display:inline-flex;align-items:center;gap:8px;color:var(--steel);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;color:var(--faint);font-size:12.5px;padding-block:40px calc(28px + env(safe-area-inset-bottom,0px));margin-top:36px;border-top:1px solid var(--line)}
.foot .wm{color:var(--steel);font-size:14px}

/* quote flow */
.in-quote main{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.qwrap{padding-block:22px 0}
.banner{background:var(--amber-soft);border:1px solid var(--amber-line);color:var(--amber-hi);border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.sec-head{margin-bottom:6px}
.sec-ic{width:44px;height:44px;border-radius:12px;background:var(--amber-soft);color:var(--amber);display:grid;place-items:center;margin-bottom:12px;border:1px solid var(--amber-line)}
.sec-cost{margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px dashed var(--line);padding-top:10px}
.sec-cost span{color:var(--muted);font-size:13px}
.sec-cost b{font-family:var(--f-display);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.grp{margin-top:26px}
.grp-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px 10px;flex-wrap:wrap}
.sub-h{font-weight:600;margin:16px 0 0}
.qty{font-size:12px;color:var(--muted);background:var(--raised);border-radius:6px;padding:1px 8px;font-variant-numeric:tabular-nums}
.hint{font-size:13px;color:var(--muted);margin:3px 0 0;line-height:1.55}
.offnote{font-size:13px;color:var(--warn);margin:6px 0 0}
.opts{display:grid;gap:8px;margin-top:10px}
@media (min-width:640px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:11px 12px;cursor:pointer;transition:border-color .15s,background-color .15s}
.opt:hover{border-color:#47474e}
.opt.on{border-color:var(--amber);background:var(--amber-soft)}
.tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #5d5a55;display:grid;place-items:center}
.opt[role="checkbox"] .tick{border-radius:6px}
.opt.on .tick{background:var(--amber);border-color:var(--amber)}
.opt.on .tick::after{content:"";width:9px;height:5px;border:2px solid var(--amber-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.opt-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.opt-t{font-weight:600;line-height:1.4}
.opt-n,.opt-q{font-size:12.5px;color:var(--muted);line-height:1.5}
.opt-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;font-variant-numeric:tabular-nums}
.opt-p b{font-family:var(--f-display);font-weight:600;font-size:15px}
.opt-p small{font-size:11px;color:var(--muted)}
.opt.on .opt-p b{color:var(--amber-hi)}
.off .opt{opacity:.5}

/* material swatches */
.sw{flex:none;width:40px;height:40px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background:#3a3631}
.sw-tile{background-color:#E6E0D4;background-image:linear-gradient(#C6BDAE 1px,transparent 1px),linear-gradient(90deg,#C6BDAE 1px,transparent 1px);background-size:13px 13px}
.sw-por{background-color:#CDCAC4;background-image:linear-gradient(#B1ADA6 1px,transparent 1px),linear-gradient(90deg,#B1ADA6 1px,transparent 1px);background-size:20px 20px}
.sw-big{background:linear-gradient(90deg,transparent 49%,#B4AEA4 49% 51%,transparent 51%),linear-gradient(125deg,transparent 45%,rgba(150,140,128,.35) 47%,transparent 50%),#D9D3CA}
.sw-marble{background:linear-gradient(118deg,transparent 36%,rgba(105,105,112,.5) 38%,transparent 41%),linear-gradient(32deg,transparent 58%,rgba(130,130,136,.38) 60%,transparent 62%),linear-gradient(160deg,transparent 18%,rgba(150,150,150,.3) 20%,transparent 23%),#EFEEEA}
.sw-marble-dark{background:linear-gradient(118deg,transparent 36%,rgba(232,214,190,.6) 38%,transparent 41%),linear-gradient(32deg,transparent 56%,rgba(210,190,165,.45) 58%,transparent 61%),#4E392C}
.sw-wood{background:repeating-linear-gradient(92deg,#A26F3D 0 3px,#B98550 3px 8px,#976535 8px 10px,#C08C57 10px 15px)}
.sw-wood-light{background:repeating-linear-gradient(92deg,#CDB18C 0 3px,#DCC4A2 3px 8px,#C4A57E 8px 10px,#E2CCAB 10px 15px)}
.sw-wood-grey{background:repeating-linear-gradient(92deg,#9E998F 0 3px,#B1ACA2 3px 8px,#948F86 8px 10px,#B8B3A9 10px 15px)}
.sw-wood-dark{background:repeating-linear-gradient(92deg,#5E3D26 0 3px,#71492D 3px 8px,#54361F 8px 10px,#7A5233 10px 15px)}
.sw-door-white{background:linear-gradient(90deg,transparent 30%,#D6D6D2 30% 32%,transparent 32% 68%,#D6D6D2 68% 70%,transparent 70%),#F3F3F0}
.sw-granite{background-color:#8B857F;background-image:radial-gradient(#3A3735 1px,transparent 1.6px),radial-gradient(#DAD4CC 1px,transparent 1.6px);background-size:7px 7px,9px 9px;background-position:0 0,3px 4px}
.sw-granite-dark{background-color:#1E1F23;background-image:radial-gradient(#C9A96E 1px,transparent 1.6px),radial-gradient(#6F7076 1px,transparent 1.6px);background-size:8px 8px,6px 6px;background-position:0 0,2px 3px}
.sw-quartz{background-color:#F1F0EC;background-image:radial-gradient(#B9B4AC .8px,transparent 1.4px);background-size:6px 6px}
.sw-hpl{background:repeating-linear-gradient(0deg,#BFA27C 0 4px,#CBB08C 4px 9px)}
.sw-acr{background:linear-gradient(135deg,#E3E8E8 0 42%,#FFFFFF 50%,#DCE2E2 58%)}
.sw-poly{background:linear-gradient(135deg,#27474A 0 42%,#517678 50%,#234043 58%)}
.sw-paint1{background:#ECE9E2}
.sw-paint2{background:linear-gradient(140deg,#E3E5E3 0 55%,#F2F3F2 70%,#E0E3E1)}
.sw-paint3{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 70% 75%,rgba(0,0,0,.12),transparent 45%),#C7B49A}
.sw-wallpaper{background-color:#D8DDD3;background-image:radial-gradient(#9DAA97 1.5px,transparent 2px);background-size:9px 9px}
.sw-slats{background:repeating-linear-gradient(90deg,#8C5E36 0 5px,#5A3B21 5px 7px)}
.sw-brass{background:linear-gradient(135deg,#8D6A2E 0 30%,#F1C77A 50%,#8D6A2E 70%)}
.sw-pal-free{background:conic-gradient(#D9C9AE,#9EB0B3,#7F8B66,#2E3F5C,#D9C9AE)}
.sw-pal-warm{background:linear-gradient(90deg,#EFE6D6 0 34%,#D8C4A5 34% 67%,#B79A74 67%)}
.sw-pal-cool{background:linear-gradient(90deg,#F2F3F2 0 34%,#CFD4D6 34% 67%,#9AA3A8 67%)}
.sw-pal-earth{background:linear-gradient(90deg,#8A8F63 0 34%,#B9785A 34% 67%,#6B4D38 67%)}
.sw-pal-bold{background:linear-gradient(90deg,#1F2F4D 0 34%,#2F4C3C 34% 67%,#C9A35B 67%)}

/* style moodboard tiles */
.styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
@media (max-width:560px){ .styles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.style{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:8px 8px 10px;cursor:pointer;min-width:0}
.style.on{border-color:var(--amber);background:var(--amber-soft)}
.st-sw{height:56px;border-radius:9px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.st-t{font-weight:600}
.st-n{font-size:12px;color:var(--muted);line-height:1.45}
.st-modern{background:linear-gradient(90deg,#E9E6E0 0 46%,#2B2B2E 46% 54%,#B9B3AA 54% 100%)}
.st-neo{background:linear-gradient(180deg,#EDE6DA 0 18%,#D7C9B1 18% 22%,#EDE6DA 22% 78%,#C7A86C 78% 82%,#EDE6DA 82%)}
.st-minimal{background:linear-gradient(135deg,#F4F3F0 0 70%,#DAD7D1 70%)}
.st-industrial{background:linear-gradient(90deg,#7C7B78 0 40%,#2C2D2F 40% 48%,#8B5E3A 48% 100%),#7C7B78}
.st-classic{background:radial-gradient(circle at 50% 120%,#B8903F 0 22%,transparent 23%),linear-gradient(180deg,#5A1F24,#3B1418)}
.st-natural{background:linear-gradient(90deg,#CDB18C 0 35%,#6F7D4E 35% 60%,#E8DFCF 60%)}

/* steppers and fields */
.ctr{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:12px;flex-wrap:wrap}
.ctr-l{min-width:0;flex:1 1 170px;display:flex;flex-direction:column}
.ctr-t{font-weight:600}
.step{display:flex;align-items:center;gap:4px;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:4px}
.step button{width:38px;height:38px;border-radius:9px;border:0;background:var(--raised);font-size:20px;line-height:1;cursor:pointer}
.step button:disabled{opacity:.35;cursor:default}
.step output{min-width:72px;text-align:center;font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}
.step output small{font-family:var(--f-body);font-size:11px;color:var(--muted);font-weight:400;margin-inline-start:3px}
.fields{display:grid;gap:10px;margin-top:10px}
@media (min-width:560px){.fields{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:13px;color:var(--muted)}
.field input,textarea{font-size:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;color:var(--ink)}
[dir="rtl"] #f-phone{text-align:right}
.field input::placeholder,textarea::placeholder{color:var(--faint)}
.unit-in{position:relative}
.unit-in span{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none}
.unit-in input{padding-inline-end:40px}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.tier{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 10px;cursor:pointer;min-width:0}
.tier.on{border-color:var(--amber);background:var(--amber-soft)}
.tier b{font-family:var(--f-display);font-size:15.5px;font-weight:600}
.tier .pm{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tier .tt{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--amber);font-variant-numeric:tabular-nums;margin-top:4px}
.custom{font-size:12.5px;color:var(--muted);margin:8px 0 0}

/* summary */
.hero-sum{position:relative;overflow:hidden;border-radius:18px;padding:20px;background:radial-gradient(120% 140% at 85% 0%,#3A2A12 0%,#19150F 55%,#141210 100%);border:1px solid var(--amber-line)}
.hero-sum::after{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;height:120%;background:radial-gradient(closest-side,rgba(255,203,125,.16),transparent);pointer-events:none}
.hero-sum > *{position:relative;z-index:1}
.hs-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hero-sum p{margin:0}
.hero-sum .k{font-size:13px;color:var(--muted)}
.hero-sum .big{font-family:var(--f-display);font-size:clamp(22px,5vw,30px);font-weight:700;line-height:1.35;font-variant-numeric:tabular-nums;margin-top:8px;color:var(--amber-hi)}
.hero-sum .sub{font-size:13px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.hero-sum .qno{font-size:12px;color:var(--faint);margin-top:8px;letter-spacing:.02em}
.nudge{background:var(--surface);border:1px dashed var(--warn);border-radius:var(--r);padding:10px 12px;font-size:13.5px;margin-top:12px}
.nudge button{border:0;background:transparent;color:var(--amber);font-weight:600;cursor:pointer;padding:0}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;margin-top:12px}
@media (max-width:640px){ .two-col{grid-template-columns:1fr} }
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.dur{font-family:var(--f-display);font-size:24px;font-weight:700;margin:6px 0 2px;color:var(--steel);font-variant-numeric:tabular-nums}
.stages{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column}
.stages li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:8px;border-top:1px solid var(--line);position:relative}
.stages li:first-child{border-top:0}
.sn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line);font-variant-numeric:tabular-nums}
.sb{display:flex;flex-direction:column;min-width:0}
.sb span{font-size:12px;color:var(--muted);line-height:1.45}
.sv{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;line-height:1.3}
.sv b{font-weight:600;font-size:14px;white-space:nowrap}
.sv span{font-size:12px;color:var(--muted)}
.bars{display:grid;gap:10px;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.barrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;font-size:13px}
.barrow b{font-weight:500;font-variant-numeric:tabular-nums}
.track{grid-column:1/-1;height:8px;background:var(--raised);border-radius:4px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,var(--amber-lo),var(--amber-hi));border-radius:4px}
[dir="rtl"] .fill{background:linear-gradient(270deg,var(--amber-lo),var(--amber-hi));margin-inline-start:0}
.picks{display:grid;gap:10px;margin-top:12px}
@media (min-width:700px){ .picks{grid-template-columns:1fr 1fr} }
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.pick-h{display:flex;align-items:center;gap:10px}
.pick-h h3{font-size:15.5px;flex:1;min-width:0}
.pick-c{font-size:13px;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap}
.edit{border:0;background:transparent;color:var(--steel);text-decoration:underline;text-underline-offset:3px;font-size:13px;font-weight:600;cursor:pointer;padding:4px 2px}
.pick dl{margin:6px 0 0;display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);gap:4px 12px;font-size:13.5px}
.pick dt{color:var(--muted)}
.pick dd{margin:0;min-width:0}
textarea{min-height:96px;resize:vertical;margin-top:8px;line-height:1.6}
.actions{display:grid;gap:10px;margin-top:12px}
.act-row{display:flex;flex-wrap:wrap;gap:8px}
.act-row .btn{flex:1 1 180px}
.disc{font-size:12.5px;color:var(--muted);margin-top:22px;border-top:1px solid var(--line);padding-top:12px;max-width:72ch}

/* bottom bar, toast */
.bar{position:fixed;inset:auto 0 0 0;z-index:15;background:rgba(20,20,23,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:10px;max-width:760px}
.bar .mid{font-size:12.5px;color:var(--muted);text-align:center;flex:1;min-width:0;font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 16px;border-radius:999px;font-size:13.5px;z-index:30;max-width:calc(100% - 32px);text-align:center}
.print-only{display:none}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;scroll-behavior:auto!important} html{scroll-behavior:auto} }

/* print: a clean letterhead quote on white paper */
@media print{
  @page{size:A4;margin:14mm 12mm}
  :root{color-scheme:light}
  body{background:#fff;color:#111;font-size:11.5px}
  .top,.bar,.toast,#main{display:none!important}
  .print-only{display:block!important}
  .pr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid #111;padding-bottom:10px}
  .pr-wm{font-family:var(--f-wm);letter-spacing:.35em;font-size:24px;direction:ltr}
  .pr-tag{font-size:10px;letter-spacing:.12em;color:#555;direction:ltr}
  .pr-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:11px}
  .pr-meta b{font-size:13px}
  .pr-client{display:flex;flex-direction:column;gap:2px;margin:10px 0;font-size:11.5px}
  .pr-t{width:100%;border-collapse:collapse;font-size:11px}
  .pr-t th{text-align:start;border-bottom:1px solid #111;padding:5px 4px;font-weight:600}
  .pr-t td{padding:4px;border-bottom:1px solid #ddd;vertical-align:top}
  .pr-t td:last-child,.pr-t th:last-child{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
  .pr-sec td{font-weight:700;background:#f2f0ec;border-bottom:1px solid #bbb}
  .pr-tot td{font-weight:700;border-top:2px solid #111;border-bottom:0;padding-top:6px}
  .pr-t tr{break-inside:avoid}
  .pr-cols{display:flex;flex-direction:column;gap:4px;margin-top:10px}
  .pr-notes{margin-top:8px}
  .pr-disc{font-size:9.5px;color:#555;margin-top:10px}
  .pr-foot{display:flex;justify-content:space-between;border-top:1px solid #111;margin-top:12px;padding-top:6px;font-size:10px}
}

[dir="rtl"] .eyebrow-l{text-align:right}

/* summary split by scope */
.split{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.split span{display:flex;flex-direction:column;line-height:1.35}
.split small{font-size:11.5px;color:var(--muted)}
.split b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--steel)}
.tc-tot b{color:var(--steel);font-weight:600}

/* client level cards (no prices) */
.tc-tag{font-size:13.5px;color:var(--muted);line-height:1.55}
.tc-list{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding-top:10px;margin-top:8px;font-size:13.5px}
.tc-list span{display:flex;justify-content:space-between;gap:10px}
.tc-list small{color:var(--muted);font-size:12.5px}
.tc-go{margin-top:10px;color:var(--amber);font-weight:600;font-size:13.5px}
@media (max-width:700px){ .tcard{flex-direction:column;align-items:stretch} }
/* owner */
.own-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--amber-soft);border:1px solid var(--amber-line);color:var(--amber);font-size:12.5px;font-weight:600;white-space:nowrap}
.nav a.nl{text-decoration:none;display:inline-flex;align-items:center}
.banner.own{color:var(--steel)}
@media (max-width:760px){ body.owner.in-quote .nav{display:flex} .own-badge{display:none} }
/* owner lock screen */
body.locked .top, body.locked main, body.locked .bar{display:none!important}
.lock{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.lock-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;gap:14px}
.lock-card .mark{width:44px;height:44px}
.lock-card h1{font-size:22px}
.lock-card p{margin:0;color:var(--muted);font-size:14px}
.lock-card input[type=password]{font-size:16px;background:var(--sunk);border:1.5px solid var(--line);border-radius:12px;padding:12px;width:100%;color:var(--ink);direction:ltr}
.lock-card label.rem{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.lock-err{color:var(--warn);font-size:13.5px;min-height:1.4em}
@media (max-width:760px){ .nav a.nl.hide-s, .nav .nl.hide-s{display:none} body.owner .top-row{gap:8px} body.owner .brand-t span{display:none} }