/* Self-hosted fonts (same files as the cost calculators) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(/renovsnewbuild/fonts/Montserrat-Regular.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(/renovsnewbuild/fonts/Montserrat-Bold.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url(/renovsnewbuild/fonts/Montserrat-ExtraBold.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(/renovsnewbuild/fonts/EBGaramond-Italic.woff2) format("woff2"); }

/* The Up Studio palette. This tool is intentionally black in both light and dark modes. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --gold: #FDB713;
  --gold-soft: #F7D785;
  --navy: #142F3A;
  --black: #000000;
  --white: #FFFFFF;
  --slate: #7A9296;
  --gray: #959595;
  --light-gray: #D2D8D8;
  --cream: #FFEEC7;
  --bg: var(--black);
  --text: var(--white);
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif: "EB Garamond", "Adobe Garamond Pro", Garamond, Georgia, serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --text: #FFFFFF; } }

:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); }
*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

.app { position: relative; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* Header spacer (the logo itself is fixed, like the rest of the site) */
.header { position: relative; height: clamp(64px, calc(12vw + 10px), 140px); flex: none; }

/* UP brand logo: matches the site-wide .brand / #upBrand styles */
:root { --brand-size: 12vw; }
.brand { display: flex; position: fixed; top: 0; left: 0; z-index: 40; border-radius: 50%; width: var(--brand-size); height: var(--brand-size); transform-origin: top left; transition: all .15s linear; }
.brand:hover { width: calc(var(--brand-size) + 9.5vw); height: calc(var(--brand-size) + 9.5vw); border-radius: 30% 100%; animation: expand 1s; transform: scale(1.2); }
#upBrand { position: absolute; width: var(--brand-size); height: var(--brand-size); transform-origin: top left; border-radius: 0 0 50%; }
#upBrand:hover { animation: expand 1s; transform: scale(1.2); }
@keyframes expand { 0% { transform: scale(1); } 25% { transform: scale(1.35); } }

/* Site navigation: matches the Navigation component on the calculators */
.site-nav-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .8); opacity: 0; pointer-events: none; transition: opacity .3s; }
.site-nav-toggle { position: fixed; right: 0; top: 0; z-index: 52; margin: min(3rem, 3%); padding: 0; min-width: 32px; min-height: 32px; background: none; border: 0; cursor: pointer; color: var(--gold); font-size: 24px; line-height: 32px; }
.site-nav-panel { position: fixed; left: 0; bottom: 0; z-index: 51; width: 100%; background: #141414; padding: 16px 0; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transform: translateY(100%); transition: transform .2s; }
.site-nav-open .site-nav-overlay { opacity: 1; pointer-events: auto; }
.site-nav-open .site-nav-panel { transform: translateY(0); }
.site-nav { display: flex; flex-direction: column; align-items: center; color: var(--white); font: 400 16px/1.5 var(--sans); }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { color: inherit; text-decoration: none; }
.site-nav-links { width: 90%; max-width: 1150px; }
.site-nav-links li { width: 100%; border-bottom: 1px solid #F5F5F4; }
.site-nav-links li:last-child { color: #FCEFCB; }
.site-nav-links a { display: block; padding: 4px 0; font-size: 24px; line-height: 32px; font-weight: 800; text-transform: capitalize; letter-spacing: .05em; }
.site-nav-footer { display: flex; width: 90%; max-width: 1150px; justify-content: space-between; padding-top: 8px; }
.site-nav-legal { display: flex; flex-direction: column; }
.site-nav-legal span { display: none; }
.site-nav-social { display: flex; align-items: center; gap: 8px; }
.site-nav-social img { display: block; width: 28px; height: 28px; background: var(--white); }
@media (min-width: 640px) {
  .site-nav-links a { padding: 8px 0; }
  .site-nav-legal { flex-direction: row; align-items: center; gap: 8px; }
  .site-nav-legal span { display: block; }
}
@media (min-width: 768px) {
  .site-nav-links a { font-size: 30px; line-height: 36px; }
  .site-nav-links li:hover, .site-nav-legal a:hover { color: var(--gold); }
  .site-nav-social img:hover { background: var(--gold); }
}

/* Main column (content scaled ~10% smaller so the needle leads) */
.body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.main { flex: 1; display: flex; flex-direction: column; padding: 0 clamp(24px, 14vw, 64px) calc(var(--gauge-h, 180px) + 18px); min-height: 0; }
.col { width: 100%; max-width: 490px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.screen { flex: 1; display: none; flex-direction: column; }
.screen.active { display: flex; animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

h1 { font: 800 clamp(27px, 6.7vw, 41px)/1.04 var(--sans); margin: 0; letter-spacing: -0.005em; text-wrap: balance; }
.sub { font: italic 400 clamp(18px, 4.1vw, 23px)/1.25 var(--serif); color: var(--cream); margin: 7px 0 0; }

/* Intro */
#intro .copy { margin-top: auto; }
#intro .actions { margin-top: clamp(32px, 7vh, 84px); margin-bottom: clamp(8px, 2vh, 24px); }

/* Question */
#question h1 { font-size: clamp(21px, 5vw, 30px); line-height: 1.1; }
#question .copy { margin-top: clamp(8px, 3vh, 44px); min-height: 4.4em; }
.answers { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }
.answer { width: 100%; min-height: 56px; padding: 14px 18px; background: var(--black); color: var(--white); border: 1px solid var(--gray); font: 700 clamp(14px, 3.3vw, 15.5px)/1.3 var(--sans); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.answer:hover { border-color: var(--white); }
.answer[aria-pressed="true"] { background: var(--gold); color: var(--black); border-color: var(--gold); }
.q-actions { margin-top: clamp(20px, 4.5vh, 56px); }

.btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px 0 20px; height: 48px; font: 700 clamp(14px, 3.4vw, 16px)/1 var(--sans); text-decoration: none; cursor: pointer; border: 0; }
.btn svg { width: 23px; height: 23px; flex: none; }
.btn-cream { background: var(--cream); color: var(--black); }
.btn-cream:disabled { opacity: .35; cursor: not-allowed; }
.btn-line { background: var(--black); color: var(--light-gray); border: 1px solid var(--gray); height: 45px; }
.btn-line:hover { color: var(--white); border-color: var(--white); }
.back { margin-top: 12px; background: none; border: 0; padding: 4px 0; color: var(--gray); font: italic 400 16px/1 var(--serif); cursor: pointer; align-self: flex-start; }
.back:hover { color: var(--cream); }
.back[hidden] { visibility: hidden; }
.q-nav { display: flex; justify-content: space-between; }
.skip { margin-left: auto; }

/* Result */
#result .copy { margin-top: clamp(0px, 2vh, 32px); }
.verdict { margin-top: 18px; background: var(--gold); color: var(--black); padding: clamp(22px, 6vw, 40px) clamp(22px, 7vw, 44px); display: flex; justify-content: center; }
.verdict p { margin: 0; font: 800 clamp(27px, 7.2vw, 40px)/1.04 var(--sans); }
.why { font: italic 400 clamp(16px, 3.8vw, 19px)/1.35 var(--serif); color: var(--cream); margin: 14px 0 0; }
.r-actions { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 5px; }

/* Gauge: locked to the bottom of the browser */
.gauge-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 3.5% env(safe-area-inset-bottom, 0px); pointer-events: none; }
.gauge { display: block; width: 100%; max-width: 620px; margin: 0 auto; height: auto; }
.needle-target { transform-box: view-box; transform-origin: 200px 200px; transition: transform 1.1s cubic-bezier(.3, 1.45, .45, 1); }
.needle-jitter { transform-box: view-box; transform-origin: 200px 200px; transition: transform .6s ease-in-out; }
.gauge text { font: 700 8.6px var(--sans); letter-spacing: 2.6px; fill: var(--white); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.answer[aria-pressed="true"]:focus-visible, .btn-cream:focus-visible { outline-color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Desktop: copy on the left, needle fixed bottom-right */
@media (min-width: 900px) {
  .app { min-height: 100%; }
  .body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .main { padding: 0 4vw 48px 8vw; }
  .col { margin: 0; justify-content: center; }
  .screen.active { flex: none; padding: 2vh 0 4vh; }
  .answers, #intro .copy { margin-top: 44px; }
  .r-actions { margin-top: 26px; padding-top: 0; }
  #question .copy { min-height: 0; margin-top: 0; }
  #intro .actions { margin-bottom: 0; }
  .gauge-wrap { left: auto; right: 5vw; width: min(46vw, 660px); padding: 0 0 env(safe-area-inset-bottom, 0px); }
  .gauge { max-width: none; }
  .header { height: 110px; }
}
/* Short phones (iPhone SE and similar) */
@media (max-width: 899px) and (max-height: 720px) {
  .header { height: 72px; }
  h1 { font-size: 24px; }
  #question h1 { font-size: 20px; }
  .verdict { margin-top: 14px; padding: 16px 22px; }
  .verdict p { font-size: 25px; }
  .why { font-size: 15.5px; margin-top: 10px; }
  .r-actions { padding-top: 14px; }
  .answer { min-height: 50px; padding: 12px 16px; }
}
@media (min-width: 900px) and (max-height: 640px) { #question .copy { min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  .needle-target, .needle-jitter { transition: none; }
  .screen.active { animation: none; }
}