/* commercial.html: Commercial and Mixed-Use path page. Builds on site.css + pages.css tokens. */
.com-sec{padding:clamp(44px,5.4vw,72px) 0;scroll-margin-top:var(--hdr)}
.com-sec-tight{padding:clamp(36px,4.4vw,56px) 0}
#contact{scroll-margin-top:var(--hdr)}

/* Hero: photo on the right, copy on the left */
.com-hero{padding:clamp(40px,5vw,68px) 0 clamp(28px,3.4vw,40px);min-height:560px;display:flex;align-items:center}
.com-hero .bg{left:40%;opacity:1;background-size:cover;background-position:center 40%}
.com-hero::before{background:linear-gradient(90deg,var(--navy-3) 40%,rgba(11,23,38,.82) 50%,rgba(11,23,38,.3) 68%,rgba(11,23,38,.1) 100%)}
.com-hero-in{width:100%}
.com-hero .h-display{max-width:14ch;font-size:clamp(40px,5.2vw,68px)}
.com-hero .lead{max-width:44ch;margin:18px 0 26px;color:var(--on-navy-2)}
.com-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:600 14px/1 var(--sans);color:var(--on-navy);letter-spacing:.02em}
.com-eyebrow .num{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font:600 14px/1 var(--serif);color:var(--gold)}
.com-ctas{display:flex;flex-wrap:wrap;gap:12px}
.com-ctas svg{width:18px;height:18px}
.com-ctas .btn-outline{background:rgba(11,23,38,.55)}
.com-steps{width:max-content;max-width:100%;list-style:none;margin:36px 0 0;padding:16px 0 0;border-top:1px solid var(--navy-line);display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:18px}
.com-steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.com-steps .n{width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font:600 12.5px/1 var(--serif);color:var(--gold)}
.com-steps b{display:block;font-size:13.5px;color:var(--on-navy)}
.com-steps small{display:block;font-size:12px;line-height:1.4;color:var(--on-navy-3);margin-top:2px}

/* Section heads */
.com-head{display:grid;grid-template-columns:minmax(260px,auto) minmax(0,560px);justify-content:space-between;align-items:end;gap:10px 40px;margin-bottom:22px}
.com-head .rule{margin:14px 0 0}
.com-head-p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.band-navy .com-head-p{color:var(--on-navy-2)}

/* Inline tools */
.com-tool{box-shadow:0 18px 50px rgba(5,12,22,.28)}
.com-tool-light{background:var(--paper);border:1px solid var(--ivory-3);box-shadow:var(--sh-1)}
.com-tool .tw-in{top:calc(var(--hdr) + 12px)}
@media (min-width:901px){.com-tool .tw-in.ta-in{max-height:calc(100vh - var(--hdr) - 32px)}}

/* Inline quiz */
.com-qsteps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;position:relative}
.com-qsteps li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative}
.com-qsteps li::after{content:"";position:absolute;top:18px;left:calc(50% + 24px);right:calc(-50% + 24px);height:1px;background:var(--navy-line)}
.com-qsteps li:last-child::after{display:none}
.com-qsteps .n{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font:600 13px/1 var(--serif);color:var(--gold);background:var(--navy);transition:all .2s}
.com-qsteps .t{font-size:12.5px;line-height:1.3;color:var(--on-navy-2)}
.com-qsteps li.is-cur .n{background:var(--gold);color:var(--navy-3)}
.com-qsteps li.is-cur .t{color:var(--gold-2);font-weight:700}
.com-qsteps li.is-done .n{background:rgba(201,169,110,.22);color:var(--on-navy)}
.com-quiz{background:var(--ivory);color:var(--ink);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px);box-shadow:0 18px 50px rgba(5,12,22,.28)}
.com-quiz .qz > .lead{color:var(--ink-2);max-width:62ch;font-size:17px}
.com-quiz .res{box-shadow:var(--sh-1)}

/* Light content inside navy bands: undo the band-navy descendant colors */
.band-navy .inline-tool .fine,.band-navy .com-quiz .fine,.band-navy .inline-tool .muted,.band-navy .com-quiz .muted{color:var(--ink-3)}
.band-navy .inline-tool .eyebrow,.band-navy .com-quiz .eyebrow{color:var(--gold-3)}
.band-navy .inline-tool .res-hd .eyebrow,.band-navy .com-quiz .res-hd .eyebrow{color:var(--gold)}
.band-navy .inline-tool .link,.band-navy .com-quiz .link{color:var(--gold-3)}
.band-navy .inline-tool .tag,.band-navy .com-quiz .tag{color:var(--gold-3)}
.band-navy .inline-tool .tag-ok,.band-navy .com-quiz .tag-ok{color:var(--ok)}
.band-navy .inline-tool .tag-warn,.band-navy .com-quiz .tag-warn{color:var(--warn)}
.band-navy .inline-tool .tag-bad,.band-navy .com-quiz .tag-bad{color:var(--bad)}
.band-navy .inline-tool .tag-navy,.band-navy .com-quiz .tag-navy{color:var(--gold)}
.band-navy .inline-tool .chip,.band-navy .com-quiz .chip{background:#fff;border-color:var(--ivory-3);color:var(--ink-2)}
.band-navy .inline-tool .chip[aria-pressed="true"],.band-navy .inline-tool .chip.is-on,.band-navy .com-quiz .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.band-navy .inline-tool .btn-outline,.band-navy .com-quiz .btn-outline{color:var(--navy);border-color:var(--navy)}
.band-navy .inline-tool .kpi .fine,.band-navy .inline-tool .ta-hero .fine{color:var(--on-navy-3)}

/* Side-titled grids */
.com-side-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.com-side-grid .rule{margin:14px 0 12px}
.com-guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.com-guides .res-card{background:#fff;border-color:var(--ivory-3)}
.com-guides .res-card:hover{border-color:var(--gold)}
.com-guides .res-card h3{color:var(--ink);font-size:21px}
.com-guides .res-card .bd p{color:var(--ink-3)}
.com-guides .res-card .link{color:var(--gold-3)}
.com-guides .res-card .link svg{width:14px;height:14px}
.com-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.com-tools .tool-card{align-items:start;background:var(--navy-2);border-color:var(--navy-line);color:var(--on-navy)}
.com-tools .tool-card:hover{border-color:var(--gold)}
.com-tools .tool-card .tc-ic{background:transparent;border:1px solid var(--gold)}
.com-tools .tool-card small{color:var(--on-navy-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.com-tools .tool-card .tc-go{align-self:center}
.com-tools .tool-card .tc-go svg{color:var(--gold)}

/* FAQ */
.com-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-items:start}
.com-faq .faq-q{font-size:18px}
.com-faq .faq-item{border-color:var(--navy-line)}
.com-faq .faq-q{color:var(--on-navy)} .com-faq .faq-a{color:var(--on-navy-2);font-size:14.5px}
.com-faq .faq-ic svg{color:var(--gold)}


/* Quiz on the paper band */
.com-qsteps{grid-template-columns:repeat(6,minmax(0,1fr))}
.band-paper .com-qsteps li::after{background:var(--ivory-3)}
.band-paper .com-qsteps .n{background:var(--paper);color:var(--gold-3)}
.band-paper .com-qsteps .t{color:var(--ink-2)}
.band-paper .com-qsteps li.is-cur .n{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.band-paper .com-qsteps li.is-cur .t{color:var(--ink)}
.band-paper .com-qsteps li.is-done .n{background:var(--gold);color:var(--navy-3)}
.band-paper .com-quiz{background:#fff;border:1px solid var(--ivory-3);box-shadow:var(--sh-1)}
.band-paper{border-top:1px solid var(--ivory-3);border-bottom:1px solid var(--ivory-3)}

/* What we work on */
.com-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.com-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--ivory-3);border-radius:var(--r);padding:18px;box-shadow:var(--sh-1)}
.com-card .ic{width:48px;height:48px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.com-card .ic svg{width:22px;height:22px;color:var(--gold)}
.com-card h3{font:600 21px/1.15 var(--serif);margin:2px 0 6px;color:var(--ink)}
.com-card p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.com-card > div{display:flex;flex-direction:column;flex:1}
.com-card-act{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.com-card .link svg{width:14px;height:14px}
.com-sub{font-size:12.5px;color:var(--ink-3);text-decoration:underline}

/* Due diligence */
.com-dd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
.com-dd-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;text-align:center;color:var(--on-navy-2);position:relative;transition:background .2s,color .2s}
.com-dd-item + .com-dd-item{border-left:1px solid var(--navy-line)}
.com-dd-item:hover{background:rgba(201,169,110,.07);color:var(--on-navy)}
.com-dd-item .ck{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:transparent;transition:all .2s}
.com-dd-item .ck svg{width:18px;height:18px}
.com-dd-item .t{font-size:13.5px;line-height:1.3;font-weight:600}
.com-dd-item.is-done .ck{background:var(--gold);color:var(--navy-3)}
.com-dd-item[aria-selected="true"]{background:rgba(201,169,110,.12);color:var(--on-navy)}
.com-dd-item[aria-selected="true"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;background:var(--gold)}
.com-dd-item[aria-selected="true"] .ck{color:var(--gold)}
.com-dd-item.is-done[aria-selected="true"] .ck{color:var(--navy-3)}
.com-dd-panel{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px 36px;margin-top:20px;align-items:start}
.com-dd-body h3{font:600 26px/1.15 var(--serif);margin:0 0 8px}
.com-dd-body p{margin:0 0 14px;color:var(--on-navy-2);max-width:70ch;font-size:15px;line-height:1.6}
.com-dd-body .check{color:var(--on-navy)} .com-dd-body .check input{accent-color:var(--gold)}
.com-dd-side{display:flex;flex-direction:column;gap:10px}
.com-dd-prog b{font:600 26px/1 var(--serif);color:var(--on-navy)}
.com-dd-prog small{margin-left:8px;color:var(--on-navy-3);font-size:12.5px}
.com-dd-prog .bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
.com-dd-prog .bar i{display:block;height:100%;background:var(--gold);transition:width .3s}
.com-dd-side .btn svg{width:15px;height:15px}

/* Zoning + fee */
.com-zn-grid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.05fr);gap:clamp(22px,3.4vw,44px);align-items:start}
.com-zn-grid .vline{width:1px;align-self:stretch;background:var(--gold);opacity:.5}
.com-zn .muted{font-size:14.5px;line-height:1.6;max-width:60ch}
.com-terms{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 10px}
.com-terms .chip{min-height:34px;padding:0 12px}
.com-terms .chip[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--ivory)}
.com-term-def{background:#fff;border:1px solid var(--ivory-3);border-left:3px solid var(--gold);border-radius:var(--r-sm);padding:14px 16px;font-size:14.5px;line-height:1.55;color:var(--ink-2);min-height:96px}
.com-term-def .fine{display:block;margin-top:6px}
.com-zn-act{margin-top:14px}
.com-fee{background:linear-gradient(180deg,rgba(201,169,110,.2),rgba(201,169,110,.1));border:1px solid rgba(201,169,110,.55);border-radius:var(--r);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.com-fee-hd{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.com-fee-hd .ic svg{width:42px;height:42px;color:var(--navy)}
.com-fee-hd .tag{background:var(--navy);color:var(--gold);margin-bottom:8px}
.com-fee-hd h3{font:600 clamp(22px,2.2vw,27px)/1.15 var(--serif);color:var(--ink);margin:0}
.com-fee > p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.com-fee-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.com-fee-out{margin-top:10px;background:var(--navy);color:var(--on-navy);border-radius:var(--r-sm);padding:12px 14px}
.com-fee-out b{display:block;font:600 30px/1.1 var(--serif);font-variant-numeric:tabular-nums}
.com-fee-out span{display:block;font-size:12.5px;line-height:1.45;color:var(--on-navy-2);margin-top:4px}
.com-fee-tbl td,.com-fee-tbl th{padding:7px 10px;font-size:13px;white-space:nowrap}
.com-fee .fine{margin:0}
.com-fee .fine a{color:var(--gold-3);text-decoration:underline;font-weight:600}

/* Apartments above the store */
.com-above{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:18px 26px;align-items:start}
.com-above-ic svg{width:56px;height:56px;color:var(--gold)}
.com-above .h2{font-size:clamp(28px,3vw,38px)}
.com-above-p{margin:8px 0 16px;color:var(--on-navy-2);max-width:72ch}
.com-above-list{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px}
.com-above-list li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.com-above-list svg{width:16px;height:16px;color:var(--gold);margin-top:3px}
.com-above-list b{display:block;font-size:14px;color:var(--on-navy)}
.com-above-list small{display:block;font-size:12.5px;line-height:1.4;color:var(--on-navy-3)}
.com-above .fine{margin:0}
.com-above-act{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:240px}
.com-above-act .link{align-self:flex-start}

/* Guides: 3 across */
.com-guides{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:1180px){.com-dd{grid-template-columns:repeat(4,minmax(0,1fr))}.com-dd-item + .com-dd-item{border-left:0}.com-dd-item{border-right:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line)}
  .com-above{grid-template-columns:64px minmax(0,1fr)}.com-above-act{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center}
  .com-work{grid-template-columns:1fr}}
@media (max-width:980px){.com-zn-grid{grid-template-columns:1fr}.com-zn-grid .vline{display:none}.com-dd-panel{grid-template-columns:1fr}.com-above-list{grid-template-columns:1fr 1fr}.com-qsteps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}}
@media (max-width:760px){
  .com-dd{grid-template-columns:1fr 1fr}
  .com-dd-item{flex-direction:row;text-align:left;padding:12px 10px;gap:10px}
  .com-dd-item .ck{width:30px;height:30px;flex:none}
  .com-dd-item[aria-selected="true"]::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto}
  .com-fee-calc{grid-template-columns:1fr}
  .com-fee-tbl td,.com-fee-tbl th{white-space:normal}
  .com-above{grid-template-columns:1fr}.com-above-ic{display:none}.com-above-act{grid-column:auto;flex-direction:column;align-items:stretch}
  .com-above-list{grid-template-columns:1fr}
  .com-guides{grid-template-columns:1fr}
}
/* Shared path-page responsive rules (same as invest.css) */
@media (max-width:980px){
  .com-side-grid{grid-template-columns:1fr}
  .com-head{grid-template-columns:1fr}
  .com-guides{grid-template-columns:1fr 1fr}
  .com-qsteps li::after{display:none}
}
@media (max-width:760px){
  .com-hero{min-height:0;padding-top:28px}
  .com-hero .bg{left:0;opacity:.42}
  .com-hero::before{background:linear-gradient(180deg,rgba(11,23,38,.75),rgba(11,23,38,.92))}
  .com-hero .h-display{font-size:clamp(36px,10vw,46px)}
  .com-ctas .btn{width:100%}
  .com-steps{grid-template-columns:1fr;gap:12px}
  .com-qsteps{display:none}
  .com-faq,.com-guides{grid-template-columns:1fr}
  .com-tool,.com-quiz{border-radius:var(--r);margin:0 calc(var(--gut) * -0.5)}
  .com-quiz .qz .fine{display:block;margin:10px 0 0!important}
}

.com-tool .tbl td:first-child{white-space:nowrap}
@media (max-width:1180px) and (min-width:981px){.com-side-grid{grid-template-columns:1fr}}