/* UP Solar — typography, photography and interaction refinement. */
:root {
  --muted: #4c6779;
  --section-space: clamp(64px, 7vw, 104px);
}
body { color: var(--deep); }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
button, input, select { accent-color: var(--teal); caret-color: var(--teal); }
::placeholder { color: #526b78; opacity: 1; }
.skip-link {
  position: fixed;
  z-index: 30;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  padding: 14px 20px;
  background: white;
  color: var(--navy);
  border-radius: 12px;
}
.skip-link:focus { transform: none; }
.section { padding-block: var(--section-space); }
.section-head { gap: 48px; }
.section-head h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.25; margin: 0; }
.section-head p, .card p, .card li, .audience p, .note, .faq p,
.package-body p, .package-source, .package-status, .result { color: var(--muted); }
.section-head p { margin: 0; font-size: 15px; }
.links { gap: 22px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; }
.pill { min-height: 46px; }
.call { color: #123f65; }
.line { background: #087a43; }
.campaign-content { min-height: min(740px, calc(100svh - 114px)); padding-block: 70px; }
.campaign h1 { max-width: 660px; font-size: clamp(42px, 4.4vw, 64px); line-height: 1.27; letter-spacing: -.02em; }
.campaign h1 span { display: block; }
.campaign-content p { max-width: 390px; font-size: 17px; line-height: 1.85; margin: 22px 0 0; }
.campaign:after { background: linear-gradient(90deg, #0c241be0, #10251b75 42%, transparent 72%); }
.energy { padding-top: var(--section-space); }
.energy h2 { max-width: 850px; margin-bottom: 28px; }
.house-scene { border-radius: 24px 24px 64px 24px; }
.house-scene img { height: auto; }
.motion-toggle { width: 44px; height: 44px; }
.expert { min-height: 48px; }
.split { grid-template-columns: 1.15fr 1fr; gap: 24px; }
.audience { min-height: 320px; padding: 38px; border: 0; border-radius: 24px 24px 64px 24px; display: flex; flex-direction: column; justify-content: end; }
.audience:nth-child(2) { border-radius: 24px; }
.audience h3 { font-size: 30px; margin: 0; }
.audience p { max-width: 24em; margin-block: 10px 18px; }
.audience:after { display: none; }
.audience .arrow { min-height: 44px; display: inline-flex; align-items: center; align-self: start; }
.arrow, .package-bottom a { color: #08686c; }
.package-section { background: #eaf5f7; }
.package-filters { margin-top: 0; margin-bottom: 30px; }
.package-filter { min-height: 44px; padding-inline: 22px; }
.package-card { box-shadow: none; border-color: #c9dfe4; border-radius: 18px; }
.package-visual { height: 112px; position: relative; isolation: isolate; background: #d9ebf0; color: #123f65; }
.package-visual.alt { background: #e1edf5; }
.package-visual.visual-hybrid { background: #d9eee7; color: #0b5349; }
.package-visual.visual-hybrid.alt { background: #d6eeeb; }
.package-visual:after { content: ''; position: absolute; right: 16px; top: 20px; width: 56px; height: 72px; border: 1px solid currentColor; border-radius: 8px; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 15px, currentColor 16px 17px); z-index: -1; }
.package-body { padding: 22px; }
.package-body h3 { font-size: 23px; }
.package-bottom { display: block; }
.package-bottom strong { font-variant-numeric: tabular-nums; font-size: 24px; }
.package-bottom small { color: #526b78; }
.package-bottom a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; }
.package-status { font-size: 13px; margin: 22px 0 8px; }
.package-source { margin: 0; max-width: 85ch; line-height: 1.8; }
#process .section-head p { color: #c3dbe5; }
.step p { color: #c3dbe5; font-size: 14px; }
#projects .cards { gap: 0; border-block: 1px solid #d7e6e9; }
#projects .card { padding: 28px; border: 0; border-radius: 0; box-shadow: none; border-right: 1px solid #d7e6e9; }
#projects .card:last-child { border-right: 0; }
#projects .card h3 { margin-top: 0; }
#contact { background: #dff1ed; position: relative; overflow: hidden; }
#contact h2 { font-size: clamp(36px, 4.5vw, 60px); }
#contact .section-head { margin-bottom: 0; align-items: center; }
#contact .button-row { flex-direction: column; min-width: 240px; margin: 0; }
#contact .pill { cursor: default; }
.faq summary { min-height: 44px; display: list-item; }
.modal { max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal-art img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.modal-copy { padding: 46px 32px; }
.modal h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.3; }
.modal-copy p { color: var(--muted); }
.close { width: 44px; height: 44px; }
@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 950px) {
  .nav { gap: 12px; }
  .links.open { left: -28px; right: -28px; }
  .split { grid-template-columns: 1fr 1fr; }
  .audience { padding: 26px; }
}
@media (max-width: 650px) {
  .nav { height: 76px; gap: 6px; }
  .logo { font-size: 22px; }
  .nav .pill { font-size: 11px; padding: 8px 12px; min-height: 44px; }
  .menu { min-width: 44px; }
  .actions { gap: 6px; }
  .links.open { top: 100%; left: -20px; right: -20px; padding: 16px 24px; }
  .campaign-photo { height: auto; aspect-ratio: 1.5; object-fit: cover; }
  .campaign-content { min-height: 0; padding-block: 32px 40px; }
  .campaign h1 { font-size: clamp(31px, 8.2vw, 44px); max-width: 100%; }
  .campaign h1 span { display: inline; }
  .campaign h1 span + span:before { content: ' '; }
  .campaign-content p { font-size: 16px; margin-top: 16px; }
  .campaign .button-row { margin-top: 24px; }
  .section-head { gap: 20px; }
  .section-head p { margin-top: 18px; }
  .split { grid-template-columns: 1fr; }
  .audience { min-height: 270px; padding: 28px; }
  .package-grid { grid-template-columns: 1fr; gap: 14px; }
  .package-card { display: grid; grid-template-columns: 100px minmax(0,1fr); }
  .package-visual { height: 100%; padding: 16px 12px; justify-content: center; gap: 10px; }
  .package-visual:after { display: none; }
  .package-visual strong { font-size: 25px; }
  .package-visual span { font-size: 11px; }
  .package-body { padding: 18px; }
  .package-body p { min-height: 0; font-size: 13px; margin-block: 8px; }
  .package-body h3 { font-size: 21px; }
  .package-bottom strong { font-size: 22px; }
  .package-bottom a { margin-top: 0; font-size: 13px; }
  .package-filter { padding-inline: 15px; font-size: 13px; }
  .house-scene { border-radius: 16px; padding-bottom: 60px; background: #e7f3f2; }
  .house-scene svg { height: calc(100% - 60px); }
  .motion-toggle { bottom: 8px; left: 8px; }
  .expert { bottom: 7px; right: 8px; padding: 5px 8px 5px 16px; font-size: 13px; }
  #projects .cards { grid-template-columns: 1fr; }
  #projects .card { border-right: 0; border-bottom: 1px solid #d7e6e9; padding: 24px 0; }
  #projects .card:last-child { border-bottom: 0; }
  #contact .section-head { display: block; }
  #contact .button-row { align-items: stretch; margin-top: 28px; }
  .modal-art { height: 150px; min-height: 0; }
  .modal-copy { padding: 26px; }
}
@media (max-width: 360px) {
  .nav .pill { padding-inline: 8px; font-size: 11px; }
  .nav { gap: 3px; }
  .logo { font-size: 20px; }
  .package-card { grid-template-columns: 84px minmax(0,1fr); }
  .package-body { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Home office, equipment kits and the shared engineer character. */
.audience:nth-child(2) {
  background-image: linear-gradient(90deg, #eaf6edf5 0%, #eaf6edc9 45%, #eaf6ed35 100%), url('assets/home-office.jpg');
  background-position: center;
}
.floating-expert {
  position: fixed;
  inset: auto max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) auto;
  z-index: 10;
  min-height: 70px;
  gap: 12px;
  padding: 8px 12px 8px 10px;
  border-radius: 100px;
  box-shadow: 0 8px 32px #082b5133;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.floating-expert .expert-avatar { width: 54px; height: 58px; object-fit: contain; object-position: center; border-radius: 25px; background: #e7f4f1; }
.floating-expert strong { font-size: 14px; }
.floating-expert span { padding: 9px; }
body { padding-bottom: 90px; }
#contact .section-head { display: grid; grid-template-columns: 220px minmax(0, 1fr) 230px; gap: 34px; }
.contact-engineer { text-align: center; align-self: end; }
.contact-engineer img { display: block; width: 100%; height: auto; max-height: 290px; object-fit: contain; }
.contact-engineer small { display: block; margin-top: 12px; font-size: 11px; color: #496c64; }
#contact h2 { font-size: clamp(32px, 3.4vw, 48px); }
.package-visual { height: 145px; overflow: hidden; padding-right: 128px; }
.package-visual:after { display: none; }
.package-kit { position: absolute; right: -4px; top: 15px; width: 150px; height: 115px; object-fit: contain; z-index: -1; }
.package-visual span, .package-visual strong { position: relative; z-index: 1; }
.package-visual span { max-width: 100px; }
.equipment-note { font-size: 12px; color: #4c6779; margin: 8px 0; }
.step-illustration { display: block; width: 100%; max-width: 180px; height: 140px; margin: 0 0 22px; }
.step { border-top: 0; }
.step b { display: block; font-size: 20px; }
.step h3 { margin-top: 8px; }
@media (max-width: 950px) {
  #contact .section-head { grid-template-columns: 180px minmax(0, 1fr); }
  #contact .button-row { grid-column: 2; min-width: 0; }
  .package-visual { padding-right: 150px; }
}
@media (max-width: 650px) {
  .floating-expert { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 62px; gap: 8px; padding: 5px 9px 5px 6px; }
  .floating-expert .expert-avatar { width: 45px; height: 50px; }
  .floating-expert strong { font-size: 13px; }
  .house-scene { padding-bottom: 0; }
  .house-scene svg { height: 100%; }
  .motion-toggle { bottom: 8px; }
  #contact .section-head { grid-template-columns: 1fr; gap: 24px; }
  .contact-engineer { max-width: 180px; margin: 0 auto; }
  #contact .button-row { grid-column: 1; margin-top: 0; }
  .package-card { grid-template-columns: 1fr; }
  .package-visual { height: 120px; padding: 18px 175px 18px 20px; justify-content: space-between; }
  .package-kit { width: 160px; height: 110px; top: 4px; right: 12px; }
  .package-visual strong { font-size: 26px; }
  .step-illustration { height: 110px; margin-bottom: 14px; }
}

#solar-tools-frame{display:block;width:100%;height:1900px;border:0;background:white;border-radius:24px}.solar-tools-section .section-head{margin-bottom:38px}@media(max-width:650px){#solar-tools-frame{height:3300px;border-radius:16px}.solar-tools-section>.wrap{padding-inline:14px}}

.solar-tools-section{overflow-anchor:none}

/* Quote review and FAQ share one compact decision area. */
.decision-section { background: #f1f8f8; }
.decision-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
.decision-grid h3 { font: 500 23px Kanit, sans-serif; margin: 0 0 18px; }
.quote-disclosure { border: 1px solid #c8dfe3; border-radius: 18px; background: white; overflow: hidden; }
.quote-disclosure > summary { display: flex; align-items: center; gap: 16px; justify-content: space-between; cursor: pointer; min-height: 76px; padding: 20px 24px; list-style: none; }
.quote-disclosure > summary::after { content: '+'; font-size: 24px; }
.quote-disclosure[open] > summary::after { content: '−'; }
.quote-disclosure > summary strong { margin-left: auto; font-size: 13px; white-space: nowrap; color: #08686c; }
.quote-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 24px; border-top: 1px solid #dfebed; }
.quote-row input { width: 22px; height: 22px; flex-shrink: 0; margin: 11px 0; cursor: pointer; }
.quote-row details { flex: 1; min-width: 0; }
.quote-row summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 600; line-height: 1.6; }
.quote-row p { font-size: 14px; color: #4c6779; margin: 0 0 8px; line-height: 1.8; }
.quote-actions { border-top: 1px solid #dfebed; padding: 20px 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.quote-actions p { width: 100%; font-size: 13px; color: #4c6779; margin: 0; }
.quote-actions .pill { font-size: 13px; padding: 12px 16px; }
.quote-actions .quote-disclaimer { font-size: 12px; line-height: 1.8; }
#quote-copy-fallback { width: 100%; min-height: 180px; padding: 12px; font: inherit; }
.faq-column .faq details { padding: 14px 0; }
.faq-column .faq summary { font-size: 15px; }
.quote-expert-dialog { border: 1px solid #c8dfe3; border-radius: 22px; width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 26px; color: #073668; overflow-y: auto; }
.quote-expert-dialog::backdrop { background: #082b51aa; }
.quote-dialog-head { display: flex; align-items: center; gap: 14px; }
.quote-dialog-head img { object-fit: contain; }
.quote-dialog-head h2 { font: 500 24px Kanit, sans-serif; margin: 0; }
.quote-dialog-head button { margin-left: auto; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; font-size: 26px; color: #073668; background: #e9f4f4; }
.quote-dialog-note { font-size: 12px; color: #4c6779; }
#quote-expert-copy { font-size: 15px; line-height: 1.9; }
#quote-expert-copy p, #quote-expert-copy li { color: #35596d; }
#quote-expert-copy li { margin-bottom: 14px; }
@media(max-width:760px) {
  .decision-grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-disclosure > summary { padding: 16px; gap: 10px; font-size: 14px; }
  .quote-row { padding: 12px 16px; }
  .quote-actions { padding: 18px 16px; }
  .quote-actions .pill { width: 100%; }
  .quote-dialog-head h2 { font-size: 21px; }
}

/* Design Slop audit — remove empty proof cards and adapt comparison density. */
.project-readiness { padding: 30px 0; border-bottom: 1px solid #dce9ec; }
.project-readiness summary { min-height: 48px; cursor: pointer; font-weight: 600; line-height: 1.8; }
.project-readiness summary span { color: #526d78; font-size: 13px; font-weight: 400; margin-left: 14px; }
.project-readiness p { color: #4c6779; font-size: 14px; max-width: 70ch; line-height: 1.9; }
@media(max-width:650px) {
  .package-card { grid-template-columns: 110px minmax(0,1fr); }
  .package-visual { height: 100%; min-height: 195px; padding: 100px 12px 18px; justify-content: end; }
  .package-kit { width: 104px; height: 83px; right: 3px; top: 10px; }
  .package-visual span { font-size: 11px; }
  .package-visual strong { font-size: 24px; }
  .package-body { padding: 18px 14px; }
  .package-body h3 { font-size: 20px; }
  .package-body p { line-height: 1.8; }
  .project-readiness summary span { display: block; margin-left: 18px; }
  .floating-expert { max-width: calc(100vw - 24px); }
}

.process-intro{color:#c3dbe5}.footer .footer-logo{color:white}