/* Hallmark · macrostructure: extends existing single-page system (honoring prior build) · genre: editorial · anchor hue: warm terracotta + eco green */
@import url('https://fonts.googleapis.com/css2?family=Consolata:wght@400..900&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=Kay+Pho+Du:wght@400;500;600;700&family=KoHo:ital,wght@0,200..700;1,200..700&family=Krub:ital,wght@0,200..700;1,200..700&display=swap');

:root{
  --font-body: 'Mulish', sans-serif;
  --font-body-size:15.8px; /* 18.8 libertinus-math*/
  --font-heading: 'Fraunces', serif;
  --font-mono: 'Consolata', monospace;
  --line-body:1.53; /* 1.22 libertinus-math*/
  --line-body-relaxed:1.7;
  --line-heading:1.12;
  --line-display:1.08;
  --paper:#FBFAF6;
  --paper-line:#E7E2D3;
  --ink:#211F1B;
  --ink-soft:#6F6A5C;
  --kitchen:#B2502B;
  --bedroom:#3A5C74;
  --bathroom:#4B7A5F;
  --living:#8B6A34;
  --eco:#4B7A5F;
  --hero-surface:#F1EFE7;
}

/* Temp fonts to try*/
.consolata{
  --font-body:'Consolata', monospace;
  --font-heading:'Consolata', monospace;
  --line-body:1.45;
  --line-body-relaxed:1.55;
  --line-heading:1.08;
  --line-display:1.02;
}

.mulish {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.libertinus-math-regular {
  font-family: "Libertinus Math", system-ui;
  font-weight: 200;
  font-style: normal;
}



*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); font-family:var(--font-mono); overflow-x:clip; }
html{ scroll-behavior:smooth; }

.wrap{ max-width: 1080px; margin:0 auto; padding: 64px 24px 90px; }

.eyebrow-line{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.eyebrow-line span{ font-size:12.5px; letter-spacing:0.02em; color:var(--ink-soft); }

h1{
  font-family:var(--font-heading); font-weight:500; font-size: clamp(32px, 4.6vw, 52px);
  line-height:var(--line-display); margin:0 0 18px; max-width: 15ch; letter-spacing:-0.01em;
  text-wrap:balance; overflow-wrap:anywhere; min-width:0;
}
header p{
  font-family:var(--font-body); font-size:var(--font-body-size); line-height:var(--line-body);
  color:#413E36; max-width: 58ch; margin:0;
}

.tips-section{
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap:clamp(32px, 6vw, 72px);
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid var(--paper-line);
}

.tips-section > .eyebrow-line{
  grid-column:1 / -1;
}

.tips-header{
  grid-column:1;
  grid-row:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:end;
  gap:16px 22px;
  align-self:start;
  margin:8px 0 0;
}

.tips-header h2{
  font-family:var(--font-heading);
  font-weight:500;
  font-size: clamp(28px, 3.25vw, 40px);
  line-height:var(--line-heading);
  letter-spacing:-0.02em;
  margin:0;
  max-width: 17ch;
  color:var(--ink);
}

.tips-header p{
  font-family:var(--font-body);
  font-size:var(--font-body-size);
  line-height:var(--line-body);
  color:#413E36;
  margin:0;
  max-width: 32ch;
}

.tips-grid{
  grid-column:2;
  grid-row:2;
  display:grid;
  grid-template-columns: minmax(0, 1fr);
}

.tip-card{
  position:relative;
  display:grid;
  grid-template-columns:42px 36px minmax(0, 1fr);
  column-gap:12px;
  align-items:start;
  padding:22px 0;
}

.tip-number{
  position:relative;
  grid-column:1;
  grid-row:1 / span 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:28px;
  border-radius:999px;
  background:rgba(75,122,95,0.12);
  color: var(--eco);
  font-family:var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.tip-number::after{
  content:'';
  position:absolute;
  left:54px;
  top:50%;
  width:36px;
  border-top:1px solid var(--paper-line);
}

.tip-card h3{
  grid-column:3;
  grid-row:1;
  font-family:var(--font-heading);
  font-size: clamp(22px, 2vw, 28px);
  line-height:var(--line-heading);
  letter-spacing:-0.02em;
  margin:0 0 8px;
}

.tip-card p{
  grid-column:3;
  grid-row:2;
  margin:0;
  max-width:56ch;
  font-family:var(--font-body);
  font-size:var(--font-body-size);
  line-height:var(--line-body);
  color:#413E36;
}

@media (max-width: 760px){
  .tips-section{ grid-template-columns:minmax(0, 1fr); }
  .tips-header{ grid-column:1; grid-row:2; margin-bottom:8px; }
  .tips-grid{ grid-column:1; grid-row:3; }
}

@media (max-width: 560px){
  .tip-card{ grid-template-columns:42px 20px minmax(0, 1fr); column-gap:10px; }
  .tip-number::after{ left:54px; width:20px; }
  .tips-header h2,
  .tips-header p{ max-width:none; }
}

.about{
  padding: 12px 0 38px;
}

.about-grid{
  position:relative;
  display:block;
  margin-top: 24px;
  padding: 12px 0 0;
}

.about-photo{
  position:relative;
  min-height: 700px;
  width: min(62%, 700px);
  margin-top: -12px;
  overflow:hidden;
  background:#efefeb;
  padding: 12px 12px 12px;
  border-radius: 8px;
  box-shadow: 0 24px 32px rgba(33,31,27,0.14);
  transform: none;
  border: 1px solid rgba(33,31,27,0.04);
}

.about-photo::before,
.about-photo::after{
  content:'';
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 52px;
  background: #efefeb;
  border-radius: 0 0 4px 4px;
  z-index:2;
}

.about-photo::before{
  height:auto;
  border-radius: 4px;
  background: #efefeb;
}

.about-photo img{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height: 590px;
  object-fit:contain;
  object-position:center center;
  background:#efefeb;
  filter:grayscale(1);
  z-index:0;
  border-radius: 4px;
}

.about-copy{
  position:absolute;
  right: 18px;
  top: 36%;
  transform: translateY(-50%) rotate(1.5deg);
  width: min(46%, 420px);
  padding: 24px 22px 18px;
  background: rgba(251, 250, 246, 0.92);
  border:1px solid rgba(33,31,27,0.08);
  border-radius: 18px 18px 18px 8px;
  box-shadow: 0 18px 28px rgba(33,31,27,0.10);
  z-index:2;
}

.about-copy::before{
  content:"owner-led care";
  position:absolute;
  left: 22px;
  top: -18px;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  font-family:var(--font-mono);
  font-size: 10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-radius: 999px;
  transform: rotate(-5deg);
  box-shadow: 0 8px 18px rgba(33,31,27,0.12);
}

.about-copy::after{
  display:none;
}

.about-copy h2{
  font-family:var(--font-heading);
  font-size: clamp(30px, 2.8vw, 44px);
  line-height:var(--line-display);
  letter-spacing:-0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}

.about-copy p{
  font-family:var(--font-body);
  font-size:var(--font-body-size);
  line-height:var(--line-body-relaxed);
  color:#413E36;
  margin: 0 0 14px;
  max-width: none;
}

.about-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.about-pills span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 11px;
  border:1px solid var(--paper-line);
  border-radius:999px;
  background:#f1e7d1;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.01em;
}

.final-cta-wrap{ max-width:none; padding:0; }
.final-cta{
  position:relative;
  isolation:isolate;
  overflow:clip;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--hero-surface);
  color:var(--ink);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding:52px 24px 64px;
}
.final-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(75,122,95,.12), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(178,80,43,.10), transparent 30%);
  opacity:.8;
  pointer-events:none;
  z-index:0;
  animation:ctaAtmosphere 12s ease-in-out infinite alternate;
}
.cta-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.9;
  pointer-events:none;
  z-index:0;
}
.cta-starfield{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.cta-star{
  position:absolute;
  display:block;
  width:clamp(34px, 5vw, 66px);
  height:auto;
  opacity:.13;
  filter:sepia(.18) saturate(.72);
  transform-origin:center;
  animation:ctaStarDrift 10s ease-in-out infinite;
}
.cta-star-one{ left:7%; top:18%; width:clamp(30px, 4.5vw, 58px); animation-delay:-2s; }
.cta-star-two{ right:9%; top:13%; width:clamp(46px, 6vw, 78px); opacity:.10; animation-duration:13s; animation-delay:-7s; }
.cta-star-three{ left:15%; bottom:12%; width:clamp(24px, 3.3vw, 42px); opacity:.18; animation-duration:8s; animation-delay:-5s; }
.cta-star-four{ right:17%; bottom:16%; width:clamp(30px, 4vw, 52px); opacity:.14; animation-duration:11s; animation-delay:-1s; }
.cta-star-five{ left:29%; top:8%; width:clamp(18px, 2.6vw, 34px); opacity:.11; animation-duration:9s; animation-delay:-6s; }
.cta-star-six{ right:29%; bottom:8%; width:clamp(20px, 2.8vw, 38px); opacity:.10; animation-duration:14s; animation-delay:-9s; }
.final-cta-intro,
.quote-flow{ position:relative; z-index:1; }
@keyframes ctaAtmosphere{
  0%{ transform:scale(1) translate3d(-1%, -1%, 0); opacity:.65; }
  100%{ transform:scale(1.08) translate3d(1%, 1%, 0); opacity:1; }
}
@keyframes ctaStarDrift{
  0%, 100%{ transform:translate3d(0, 0, 0) rotate(0deg) scale(1); }
  35%{ transform:translate3d(8px, -10px, 0) rotate(8deg) scale(1.06); }
  68%{ transform:translate3d(-5px, 5px, 0) rotate(-6deg) scale(.94); }
}
.final-cta h2{
  margin:0 0 10px;
  font-family:var(--font-heading);
  font-size:clamp(30px, 4vw, 48px);
  font-weight:500;
  line-height:var(--line-display);
}
.final-cta p{
  margin:0 0 24px;
  font-family:var(--font-body);
  font-size:var(--font-body-size);
  line-height:var(--line-body);
  color:#413E36;
}
.final-cta .btn-primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.final-cta .btn-primary:hover{ background:#3A362E; }

.final-cta-intro{ width:min(620px, 100%); }
.final-cta-intro .eyebrow-line{ justify-content:center; }
.final-cta-intro h2{ margin-top:4px; }
.final-cta-intro p{ margin-bottom:30px; }
.quote-flow{ width:min(620px, 100%); text-align:left; }
.quote-stars{ display:flex; justify-content:center; align-items:center; gap:9px; min-height:10px; margin:0 0 18px; }
.quote-stars .quote-step-dot{ width:8px; height:8px; border:1.5px solid rgba(33,31,27,0.28); border-radius:50%; }
.quote-stars .quote-step-dot.done{ background:var(--eco); border-color:var(--eco); }
.quote-stars .quote-step-dot.current{ width:9px; height:9px; background:var(--kitchen); border-color:var(--kitchen); }
.quote-card{ position:relative; min-height:390px; padding:30px; background:var(--paper); border:1px solid var(--paper-line); box-shadow:0 18px 34px rgba(33,31,27,0.10); }
.quote-honeypot{ position:absolute; left:-9999px; height:0; overflow:hidden; opacity:0; }
.quote-step{ display:none; flex-direction:column; animation:quoteRise .35s ease; }
.quote-step.active{ display:flex; }
@keyframes quoteRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.quote-question{ margin:0 0 20px; color:var(--ink); font-family:var(--font-heading); font-size:clamp(24px, 3vw, 31px); font-weight:500; line-height:var(--line-heading); }
.quote-field-label{ margin:14px 0 7px; color:var(--ink-soft); font-size:13px; letter-spacing:.04em; }
.quote-step[data-step="3"] .quote-question{ margin-bottom:12px; }
.quote-step[data-step="3"] .quote-options{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; }
.quote-step[data-step="3"] .quote-option{ min-height:42px; padding:9px 10px; }
.quote-task-list{ gap:8px; }
.quote-task-list .quote-option{ min-height:48px; }
.quote-task-list .quote-option:focus-visible{ outline:2px solid var(--kitchen); outline-offset:2px; }
.quote-task-list .quote-dot{ border-radius:2px; }
.quote-task-list .quote-option.selected .quote-dot::after{
  inset:2px 5px 4px 5px;
  border:solid var(--kitchen);
  border-width:0 2px 2px 0;
  border-radius:0;
  background:transparent;
  transform:rotate(45deg);
}
.quote-card input[type="text"]{ width:100%; padding:13px 14px; border:1px solid var(--paper-line); border-radius:0; background:#fff; color:var(--ink); font:16px var(--font-body); outline:none; }
.quote-card input[type="text"]:focus{ border-color:var(--kitchen); }
.quote-card input[type="text"]::placeholder{ color:var(--ink-soft); opacity:.65; }
.quote-options{ display:grid; gap:8px; }
.quote-option{ display:flex; align-items:center; gap:11px; min-height:48px; padding:11px 13px; border:1px solid var(--paper-line); background:#fff; color:var(--ink); cursor:pointer; font-size:13px; line-height:1.3; transition:border-color .15s ease, background .15s ease; }
.quote-option:hover{ border-color:var(--kitchen); }
.quote-option.selected{ border-color:var(--kitchen); background:#f5e9df; }
.quote-option small{ display:block; margin-top:3px; color:var(--ink-soft); font-size:11px; }
.quote-dot{ width:16px; height:16px; flex:0 0 16px; border:1px solid var(--ink-soft); border-radius:50%; position:relative; }
.quote-option.selected .quote-dot{ border-color:var(--kitchen); }
.quote-option.selected .quote-dot::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--kitchen); }
.quote-nav{ display:flex; gap:10px; margin-top:22px; }
.quote-nav button{ border:1px solid var(--ink); border-radius:0; cursor:pointer; font:12px var(--font-mono); padding:12px 18px; }
.quote-primary{ flex:1; background:var(--ink); color:var(--paper); }
.quote-primary:hover:not(:disabled){ background:#3A362E; }
.quote-nav button:disabled{ cursor:not-allowed; opacity:.4; }
.quote-back{ background:transparent; color:var(--ink); }
.quote-back:hover{ background:var(--hero-surface); }
.quote-badge{ align-self:center; margin-bottom:14px; padding:6px 10px; background:#5B6872; color:var(--paper); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.quote-panel{ margin-bottom:16px; padding:20px 18px 18px; background:#E6EBED; border-radius:14px; text-align:center; }
.quote-panel-label{ margin-top:7px; color:#53616A; font:13px/1.35 var(--font-body); letter-spacing:0; }
.quote-range{ color:#30424D; font-family:var(--font-heading); font-size:clamp(38px, 6vw, 50px); font-weight:600; line-height:1; }
.quote-summary{ color:var(--ink-soft); font-size:12px; line-height:1.7; text-align:center; }
.quote-summary b{ color:var(--ink); }
.quote-contact-fields{ display:grid; gap:10px; margin-top:18px; }
.quote-field{ display:grid; gap:6px; color:var(--ink); font:12px var(--font-mono); letter-spacing:.04em; }
.quote-field span{ color:var(--ink-soft); font-family:var(--font-body); letter-spacing:0; }
.quote-card input[type="text"], .quote-card textarea{ width:100%; padding:11px 12px; border:1px solid var(--paper-line); border-radius:0; background:#fff; color:var(--ink); font:16px var(--font-body); outline:none; resize:vertical; }
.quote-card textarea{ min-height:72px; }
.quote-card input[type="text"]:focus, .quote-card textarea:focus{ border-color:var(--kitchen); }
.quote-card textarea::placeholder{ color:var(--ink-soft); opacity:.65; }
.quote-card .cf-turnstile{ display:none !important; margin:0; }
.quote-error{ display:none; margin-top:10px; color:var(--kitchen); font-size:12px; }
.quote-footnote{ margin-top:16px; color:var(--ink-soft); font-size:11px; text-align:center; }
.quote-success{ text-align:center; padding:42px 0; }
.quote-check{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 18px; border-radius:50%; background:#b8cdb0; color:var(--ink); font-size:26px; }
.quote-success .quote-question{ margin-bottom:8px; }
.quote-hint{ margin:0; color:var(--ink-soft); font:italic 16px/1.5 var(--font-body); text-align:center; }

@media (max-width:560px){
  .quote-card{ min-height:410px; padding:22px 18px; }
  .quote-option{ font-size:12px; }
  .quote-step[data-step="3"] .quote-options{ grid-template-columns:1fr; }
}

.services{
  padding: 8px 0 24px;
}

.services-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.service-card{
  border: 1px solid var(--paper-line);
  padding: 22px;
  min-height: 286px;
  display:flex;
  flex-direction:column;
}

.service-card h3{
  margin:0 0 12px;
  padding:0;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size: clamp(22px, 2vw, 28px);
  line-height:var(--line-heading);
  letter-spacing:-0.02em;
}

.service-card p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--font-body-size);
  line-height:var(--line-body);
  color:#413E36;
}

.service-card .service-price{
  margin-top:auto;
  padding-top:18px;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.4;
}

.service-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  position:relative;
  padding-top:8px;
  color:#8F3D24;
  font-family:var(--font-mono);
  font-size:12px;
  text-decoration:none;
  border-bottom:1px solid rgba(143,61,36,0.45);
}
.service-cta::before,
.service-cta::after,
.services-note-link::before,
.services-note-link::after{
  content:'';
  position:absolute;
  width:13px;
  height:13px;
  background:#D8D2C5;
  -webkit-mask:url('images/star_1.svg') center / contain no-repeat;
  mask:url('images/star_1.svg') center / contain no-repeat;
  opacity:0;
  transform:scale(.1) rotate(-25deg);
  transition:opacity .16s ease, transform .36s cubic-bezier(.2,1.55,.45,1);
  pointer-events:none;
}
.service-cta::before,
.services-note-link::before{ left:-10px; bottom:-7px; width:10px; height:10px; transition-delay:.06s; background:#D8D2C5; }
.service-cta::after,
.services-note-link::after{ top:-13px; right:-15px; background:#D8D2C5; }
.service-cta::after{ top:auto; bottom:-1px; }
.service-cta span{ font-size:15px; line-height:1; transition:transform .15s ease; }
.service-cta:hover{ color:#6F2E1C; border-bottom-color:#6F2E1C; }
.service-cta:hover::before,
.service-cta:hover::after,
.services-note-link:hover::before,
.services-note-link:hover::after{ opacity:1; transform:scale(1) rotate(0); }
.service-cta:hover::after,
.services-note-link:hover::after{ animation:sparkleFloat 2.4s ease-in-out .36s infinite; }
.service-cta:hover span{ transform:translate(2px,-2px); }
.service-cta:focus-visible{ outline:2px solid var(--kitchen); outline-offset:4px; }

.services-note{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:center;
  margin-top:56px;
  padding:30px 0 12px;
  border-top:1px solid var(--paper-line);
}
.services-note-copy h3{
  margin:0 0 6px;
  font-family:var(--font-heading);
  font-size:clamp(22px, 2vw, 28px);
  line-height:var(--line-heading);
}
.services-note-copy p{
  margin:0;
  max-width:52ch;
  font-family:var(--font-body);
  font-size:var(--font-body-size);
  line-height:var(--line-body);
  color:#413E36;
}
.services-note-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  position:relative;
  color:#8F3D24;
  font-family:var(--font-mono);
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
  border-bottom:1px solid rgba(143,61,36,0.45);
}
.services-note-link span{ font-size:15px; line-height:1; transition:transform .15s ease; }
.services-note-link:hover{ color:#6F2E1C; border-bottom-color:#6F2E1C; }
.services-note-link:hover span{ transform:translate(2px,-2px); }
.services-note-link:focus-visible{ outline:2px solid var(--kitchen); outline-offset:4px; }

@media (max-width: 820px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-note-copy{ grid-column:1 / -1; grid-row:2; }
  .services-note-link{ grid-column:2; grid-row:1; }
  .about-grid{ padding: 12px; }
  .about-photo{ min-height: 420px; border-radius: 24px; }
  .about-copy{
    position:relative;
    width:100%;
    right:auto;
    top:auto;
    transform:none;
    margin-top: -28px;
    padding: 24px 18px 20px;
  }
  .about-copy::before,
  .about-copy::after{ display:none; }
  .about-copy p{ max-width:none; }
}

@media (max-width: 560px){
  .services-grid{ grid-template-columns: 1fr; }
  .services-note{ grid-template-columns:1fr; gap:18px; margin-top:44px; padding-top:26px; }
  .services-note-copy,
  .services-note-link{ grid-column:1; grid-row:auto; }
  .final-cta{ padding-top:40px; }
}

@media (prefers-reduced-motion: reduce){
  .cta-rain,
  .final-cta::before,
  .cta-star{ animation:none; }
}

/* ---------- nav ---------- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1080px; margin:0 auto; padding:22px 24px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
}
.brand-text{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.brand-name{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:18px;
  letter-spacing:-0.01em;
}
.brand-byline{
  font-family:var(--font-heading);
  font-size:16px;
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  color:var(--ink-soft);
}
.brand svg{ flex-shrink:0; }
.nav-right{ display:flex; align-items:center; gap:26px; }
.nav-link{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap;
}
.nav-link:hover{ color:var(--ink); }
@media (max-width:460px){ .nav-link{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.01em;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  position:relative; padding:13px 22px; border:1px solid var(--ink); white-space:nowrap; cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn::before,
.btn::after{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  background:var(--sparkle-color, var(--ink));
  -webkit-mask:url('images/star_1.svg') center / contain no-repeat;
  mask:url('images/star_1.svg') center / contain no-repeat;
  opacity:0;
  transform:scale(.1) rotate(-25deg);
  transition:opacity .16s ease, transform .36s cubic-bezier(.2,1.55,.45,1);
  pointer-events:none;
}
.btn::before{ left:-11px; bottom:-9px; width:12px; height:12px; transition-delay:.06s; }
.btn::after{ top:-16px; right:-15px; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:#3A362E; --sparkle-color:#D8D2C5; }
.btn-secondary{ background:transparent; color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--paper); --sparkle-color:#D8D2C5; }
.btn-secondary::before,
.btn-secondary::after{ display:none; }
.btn:hover::before,
.btn:hover::after{ opacity:1; transform:scale(1) rotate(0); }
.btn:hover::after{ animation:sparkleFloat 2.4s ease-in-out .36s infinite; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--kitchen); outline-offset:3px; }
.btn-sm{ padding:9px 16px; font-size:12px; }

@keyframes sparkleFloat{
  0%, 100%{ transform:translate(0, 0) scale(1) rotate(0); }
  50%{ transform:translate(2px, -4px) scale(1.08) rotate(12deg); }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  background:var(--hero-surface);
}
.hero-rain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.9;
  pointer-events:none;
  z-index:0;
}
.hero-inner{
  max-width:1080px; margin:0 auto; padding:60px 24px 76px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  position:relative;
  z-index:1;
}
.hero-copy{ animation:heroRise .9s cubic-bezier(.22,.8,.3,1) both; }
h1.hero-tagline{
  max-width:20ch; font-size: clamp(34px, 5.2vw, 56px); margin:0 0 20px;
}
.hero-sub{
  font-family:var(--font-body); font-size:var(--font-body-size); line-height:var(--line-body);
  color:#413E36; max-width:46ch; margin:0;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-tags{
  display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:30px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);
}
.hero-tags span{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.hero-tags span::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--eco); flex-shrink:0; }

.hero-visual{ min-width:0; animation:heroReveal 1s .12s cubic-bezier(.22,.8,.3,1) both; }
.hero-visual .scene-shell{
  aspect-ratio:3/2;
}
.hero-visual .scene-shell img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-visual-caption{
  display:block; margin-top:10px; font-size:12px; color:var(--ink-soft);
}

@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; padding:48px 20px 52px; gap:36px; }
  h1.hero-tagline{ max-width:22ch; }
}
@media (max-width:480px){
  .hero-actions .btn{ flex:1 1 100%; }
}
@media (hover:none), (pointer:coarse){
  .hero-rain{ display:none; }
}

@keyframes heroRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes heroReveal{
  from{ opacity:0; transform:translateY(12px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes heroFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- checklist ---------- */
/* Tabs and scene sit side by side. The left edge stays flush with the
   section's heading text (the 1080px .wrap column); only the right edge
   breaks out, stopping 24px shy of the viewport, so the wide living-area
   photo has room. The tab list is a vertical rail just left of the photo
   and sticks to the top of the screen while the tall photo scrolls past,
   so it stays reachable. */
.scene-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin-top:32px;
  /* Left edge = column content edge (normal flow); pull the right edge
     out to 24px from the viewport. (100vw - 100%)/2 is the gap from the
     column's content edge to the viewport edge. */
  margin-right:calc(24px - (100vw - 100%) / 2);

  /* One height every room photo renders at, so the layout never shifts
     when you switch rooms. It's the largest height that still (a) leaves
     the footnote on screen and (b) keeps the widest room (living area,
     ~1.43:1) from running past the right edge of the page. --scene-w is
     the span from the column's left edge to the 24px viewport gutter;
     220px of that goes to the tab rail, 24px to the gap. */
  --scene-w: min(calc(50vw + 492px), calc(100vw - 48px));
  --scene-h: min(
    calc(100vh - 96px),
    calc((var(--scene-w) - 244px) / 1.4286)
  );
  --scene-h: min(
    calc(100dvh - 96px),
    calc((var(--scene-w) - 244px) / 1.4286)
  );
}

.tabs{
  display:flex; flex-direction:column; gap:2px;
  flex:0 0 auto;
  border-right:1px solid var(--paper-line);
  padding-right:16px;
  position:sticky; top:16px;
}
.tab{
  appearance:none; border:none; background:transparent; cursor:pointer;
  font-family:var(--font-mono); font-size:13px; color:var(--ink-soft);
  padding:11px 8px; margin:0 -16px 0 0; border-right:2px solid transparent;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.tab .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-soft); flex-shrink:0; }
.tab[data-room="kitchen"] .dot{ background:var(--kitchen); }
.tab[data-room="bedroom"] .dot{ background:var(--bedroom); }
.tab[data-room="bathroom"] .dot{ background:var(--bathroom); }
.tab[data-room="living"] .dot{ background:var(--living); }
.tab.active{ color:var(--ink); border-right-color: var(--ink); }
.tab .count{ opacity:0.6; }

.scene-shell{
  position:relative; border:1px solid var(--paper-line); background:#000;
  margin-top:0; overflow:hidden; line-height:0;
}

/* Room-by-room scene: the photo's left edge is pinned right beside the
   tabs and every room is --scene-h tall, so switching rooms never shifts
   the layout — rooms wider than 1:1 (the living area, ~1.43:1) just
   extend further to the right. No boxed background, just the photo with
   a thin border. */
#sceneShell{
  display:grid;
  justify-items:start;
  align-items:start;
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:none;
  overflow:visible;
}
.scene-img{
  display:block; height:var(--scene-h); width:auto; max-width:100%;
  border:1px solid var(--paper-line);
}

/* Narrow screens: drop back to a horizontal tab strip above the photo. */
@media (max-width:720px){
  .scene-layout{ flex-direction:column; gap:0; }
  .tabs{
    flex-direction:row; gap:6px;
    position:static;
    border-right:none; border-bottom:1px solid var(--paper-line);
    padding-right:0;
    overflow-x:auto;
  }
  .tab{
    margin:0 22px 0 0;
    border-right:none; border-bottom:2px solid transparent;
  }
  .tab.active{ border-right-color:transparent; border-bottom-color:var(--ink); }
  #sceneShell{ justify-items:stretch; }
  .scene-img{ height:auto; width:100%; }
}

/* All room panels stack in the same grid cell; the active one is faded
   in/out on top of the others, which is what gives the carousel its
   automatic crossfade between rooms. */
.room-panel{
  grid-area:1/1; position:relative;
  opacity:0; pointer-events:none;
  transition:opacity .6s ease;
}
.room-panel.active{ opacity:1; pointer-events:auto; }

.pin{
  position:absolute; width:22px; height:22px; margin-left:-11px; margin-top:-11px;
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--paper);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.85);
  animation: pinGlow 5s ease-in-out infinite;
}
.pin[data-cat="kitchen"]{ --pin-color:var(--kitchen); background:var(--pin-color); }
.pin[data-cat="bedroom"]{ --pin-color:var(--bedroom); background:var(--pin-color); }
.pin[data-cat="bathroom"]{ --pin-color:var(--bathroom); background:var(--pin-color); }
.pin[data-cat="living"]{ --pin-color:var(--living); background:var(--pin-color); }
.pin:hover, .pin.active-pin{ transform:scale(1.5); }
.pin::after{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  background: var(--pin-color);
  opacity:0.12;
  filter: blur(12px);
  animation: pinHalo 5s ease-in-out infinite;
}

@keyframes pinGlow {
  0%, 100% {
    box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 var(--pin-color);
  }
  50% {
    box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 12px var(--pin-color), 0 0 22px var(--pin-color);
  }
}

@keyframes pinHalo {
  0%, 100% { opacity:0.08; transform:scale(0.85); }
  50% { opacity:0.24; transform:scale(1.15); }
}

.tooltip{
  position:absolute; max-width:230px; background:var(--tooltip-color, var(--ink)); color:var(--paper);
  padding:12px 14px; font-size:12.5px; line-height:1.5; pointer-events:none;
  opacity:0; transform:translate(-50%, calc(-100% - 16px)); transition:opacity .12s ease; z-index:20;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--tooltip-color, var(--ink)) 28%, transparent);
}
.tooltip.visible{ opacity:1; }
.tooltip .tt-num{ display:inline-block; margin:0 8px 7px 0; font-size:11px; color:var(--paper); opacity:0.65; }
.tooltip .tt-cat{
  display:inline-block;
  width:max-content;
  margin-bottom:7px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb, var(--paper) 28%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 13%, transparent) !important;
  color:color-mix(in srgb, var(--paper) 82%, transparent) !important;
  font:10px var(--font-mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.tooltip:after{ content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--tooltip-color, var(--ink)); }

.site-footer{
  border-top:1px solid var(--paper-line);
  color:var(--ink-soft);
  font-size:11px;
}
.site-footer-inner{
  max-width:1080px;
  margin:0 auto;
  padding:20px 24px 24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.site-footer-copy{ line-height:1.5; }
.site-credits summary{
  cursor:pointer;
  list-style:none;
  text-decoration:underline;
  text-decoration-color:var(--paper-line);
  text-underline-offset:3px;
}
.site-credits summary::-webkit-details-marker{ display:none; }
.site-credits summary::after{ content:'+'; margin-left:7px; text-decoration:none; display:inline-block; }
.site-credits[open] summary::after{ content:'−'; }
.site-credits-content{
  display:grid;
  gap:4px;
  margin-top:10px;
  max-width:420px;
  text-align:right;
  line-height:1.5;
}
.site-credits-content a{ color:inherit; }

@media (max-width:560px){
  .site-footer-inner{ flex-direction:column; gap:10px; padding:18px 16px 22px; }
  .site-credits-content{ text-align:left; }
}

@media (max-width:640px){ .wrap{ padding:40px 16px 60px; } .pin{ width:19px; height:19px; margin-left:-9.5px; margin-top:-9.5px; font-size:9px; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    transition-duration:0.001ms !important;
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
  }
  .hero-rain{ display:none; }
}