/* ===========================================================
   BuildDesk Partners — Shared Design System
   Blueprint / industrial dark theme. Included on every page.
=========================================================== */

html { scroll-behavior: smooth; overflow-x: hidden; }
body { background-color:#0B0D10; overflow-x: hidden; max-width: 100vw; }
::selection { background:#FF6A1A; color:#0B0D10; }

/* Blueprint dimension-line signature element */
.dim-line { position:relative; height:1px; background:#33393F; }
.dim-line::before, .dim-line::after {
  content:''; position:absolute; top:-5px; width:1px; height:11px; background:#33393F;
}
.dim-line::before { left:0; }
.dim-line::after { right:0; }
.dim-vertical { position:relative; width:1px; background:#2A3036; }
.dim-vertical::before, .dim-vertical::after {
  content:''; position:absolute; left:-5px; width:11px; height:1px; background:#2A3036;
}
.dim-vertical::before { top:0; }
.dim-vertical::after { bottom:0; }

.corner-brackets { position:relative; }
.corner-brackets::before, .corner-brackets::after {
  content:''; position:absolute; width:14px; height:14px; border-color:#FF6A1A; opacity:0; transition:opacity .25s ease;
}
.corner-brackets::before { top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.corner-brackets::after { bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }
.corner-brackets:hover::before, .corner-brackets:hover::after { opacity:1; }

.grain {
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

.blueprint-grid {
  background-image:
    linear-gradient(rgba(76,108,136,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,108,136,0.10) 1px, transparent 1px);
  background-size: 40px 40px;
}

.clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }

.marquee-track { animation: marquee 28s linear infinite; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== Hero slideshow — multi-image Ken Burns crossfade ===== */
.hero-slideshow { overflow:hidden; }
.hero-slide {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.08);
  animation: hero-fade 30s ease-in-out infinite, hero-kenburns 30s ease-in-out infinite;
}
@keyframes hero-fade {
  0%   { opacity:0; }
  4%   { opacity:1; }
  20%  { opacity:1; }
  24%  { opacity:0; }
  100% { opacity:0; }
}
@keyframes hero-kenburns {
  0%   { transform:scale(1.08) translate(0,0); }
  20%  { transform:scale(1.16) translate(-1%,-1%); }
  100% { transform:scale(1.16) translate(-1%,-1%); }
}

/* Single-image hero — same slow Ken Burns zoom/pan as the homepage slideshow, no crossfade needed */
.hero-slide-single {
  animation: hero-kenburns 30s ease-in-out infinite;
}

/* Slow-drifting blueprint grid behind the hero content */
.hero-grid-drift { animation: hero-grid-drift 40s linear infinite; }
@keyframes hero-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 200px 200px; }
}

/* Extra shadow so headline / stats stay legible over bright photo areas */
.hero-text-pop { text-shadow: 0 2px 18px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.8); }
.hero-stats-panel { background:rgba(11,13,16,0.35); backdrop-filter:blur(6px); padding:1.25rem 1.5rem 1.75rem; margin-left:0; }
@media (min-width:640px) { .hero-stats-panel { margin-left:-1.5rem; } }

/* Lightweight zoom for standalone panel photos (GC section, foreman shot, etc.) — pure CSS transform, no JS, cheap on the GPU */
.img-kenburns-soft { animation: img-kenburns-soft 22s ease-in-out infinite; will-change: transform; }
@keyframes img-kenburns-soft {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation:none; opacity:1; transform:scale(1); }
  .hero-slide:not(:first-child) { display:none; }
  .hero-grid-drift { animation:none; }
  .img-kenburns-soft { animation:none; }
}

.fade-up { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.in { opacity:1; transform:translateY(0); }

input:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #FF6A1A; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity:1; transform:none; transition:none; }
  .marquee-track { animation:none; }
}

.tab-btn[aria-selected="true"] { color:#F2EFE9; border-color:#FF6A1A; }
.tab-btn[aria-selected="true"] .tab-num { color:#FF6A1A; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Active nav link (current page) */
.nav-link.active { color:#F2EFE9; }
.nav-link.active::after { content:''; display:block; height:2px; background:#FF6A1A; margin-top:4px; }

/* Mobile menu */
.mobile-nav { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.mobile-nav.open { max-height:520px; }

/* Force header onto its own compositing layer — fixes header/menu randomly
   disappearing on some mobile browsers when combined with backdrop-blur */
.header-fix { -webkit-transform:translateZ(0); transform:translateZ(0); will-change:transform; }

/* ===== Resilient header / mobile menu (self-hosted, no CDN dependency) =====
   This site loads Tailwind's utility classes from a runtime CDN script. On a
   slow mobile connection there's a brief window, right after a page finishes
   loading, where those utilities haven't been generated yet — during that
   window the header can lose its fixed position and the hamburger button can
   render without an icon, which looks like "the menu disappeared." These
   rules are plain CSS (no CDN involved) so the header and toggle button are
   always correctly positioned and visible the instant the page paints. */
header { position:fixed; top:0; left:0; right:0; z-index:100; }
#menu-toggle { display:flex; align-items:center; justify-content:center; }
#menu-toggle svg { width:20px; height:20px; display:block; }
#mobile-nav { display:block; }
#mobile-nav nav { display:flex; flex-direction:column; }
#mobile-nav nav a { display:block; padding:0.625rem 0; }
@media (min-width:1024px) {
  #menu-toggle { display:none; }
  #mobile-nav { display:none; }
}

/* ===== Scroll-to-top button ===== */
.scroll-top{
  position:fixed; bottom:26px; right:26px; z-index:120;
  width:48px; height:48px; border:1px solid #262B31; background:#0B0D10;
  color:#F2EFE9; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, border-color .3s ease;
}
.scroll-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.scroll-top:hover{ border-color:#FF6A1A; }
@media (max-width:600px){ .scroll-top{ width:42px; height:42px; bottom:16px; right:16px; } }

/* Form status message */
.form-msg{ font-size:.85rem; margin-top:.75rem; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ color:#7CD992; }
.form-msg.err{ color:#FF7A6E; }

/* ===== Built-in FAQ chat bot (no external service) ===== */
.faqbot-btn{
  position:fixed; bottom:88px; right:26px; z-index:130;
  width:56px; height:56px; border-radius:50%;
  background:#FF6A1A; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(255,106,26,0.55); border:none; cursor:pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.faqbot-btn:hover{ transform:translateY(-4px) scale(1.05); box-shadow:0 16px 34px -8px rgba(255,106,26,0.65); }
.faqbot-btn svg{ width:26px; height:26px; color:#0B0D10; }
@media (max-width:600px){ .faqbot-btn{ width:50px; height:50px; bottom:74px; right:16px; } .faqbot-btn svg{ width:22px; height:22px; } }

.faqbot-panel{
  position:fixed; bottom:154px; right:26px; z-index:130;
  width:340px; max-width:calc(100vw - 32px); max-height:min(70vh,520px);
  background:#15181C; border:1px solid #262B31; box-shadow:0 24px 48px -12px rgba(0,0,0,0.55);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.faqbot-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:600px){ .faqbot-panel{ bottom:132px; right:16px; } }

.faqbot-header{
  padding:16px 18px; border-bottom:1px solid #262B31; display:flex; align-items:center; justify-content:space-between;
  background:#1B1F24;
}
.faqbot-header strong{ color:#F2EFE9; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.02em; font-size:1rem; }
.faqbot-header span{ display:block; color:#98A0A8; font-size:.72rem; margin-top:2px; }
.faqbot-close{ background:none; border:none; color:#98A0A8; cursor:pointer; padding:4px; }
.faqbot-close:hover{ color:#F2EFE9; }

.faqbot-body{ flex:1; overflow-y:auto; padding:14px 16px; }
.faqbot-msg{ color:#98A0A8; font-size:.85rem; line-height:1.5; margin-bottom:14px; }
.faqbot-msg strong{ color:#F2EFE9; }

.faqbot-q{
  display:block; width:100%; text-align:left; background:#0B0D10; border:1px solid #262B31;
  color:#F2EFE9; font-family:'Inter',sans-serif; font-size:.82rem; padding:9px 12px; margin-bottom:8px;
  cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.faqbot-q:hover{ border-color:#FF6A1A; color:#FF6A1A; }

.faqbot-answer{
  background:#0B0D10; border-left:2px solid #FF6A1A; padding:10px 12px; margin-bottom:14px;
  color:#F2EFE9; font-size:.83rem; line-height:1.55;
}

.faqbot-footer{ border-top:1px solid #262B31; padding:12px 14px; display:flex; gap:8px; }
.faqbot-footer input{
  flex:1; background:#0B0D10; border:1px solid #262B31; color:#F2EFE9; font-size:.82rem;
  padding:9px 10px; outline:none;
}
.faqbot-footer input:focus{ border-color:#FF6A1A; }
.faqbot-footer button{
  background:#FF6A1A; color:#0B0D10; border:none; padding:0 14px; font-weight:600; cursor:pointer; font-size:.82rem;
}
.faqbot-footer button:hover{ background:#C9540F; color:#F2EFE9; }

/* ===== Contractor Toolbox promo popup (site-wide) ===== */
.promo-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(11,13,16,0.72); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.promo-overlay.open{ opacity:1; visibility:visible; }
.promo-card{
  position:relative; width:100%; max-width:440px; background:#15181C; border:1px solid #FF6A1A66;
  box-shadow:0 32px 64px -16px rgba(0,0,0,0.6);
  transform:translateY(16px) scale(.98); transition:transform .3s ease;
}
.promo-overlay.open .promo-card{ transform:translateY(0) scale(1); }
.promo-close{
  position:absolute; top:12px; right:12px; background:none; border:none; color:#98A0A8; cursor:pointer; padding:6px;
}
.promo-close:hover{ color:#F2EFE9; }
.promo-card .promo-tag{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:#FF6A1A; border:1px solid #FF6A1A55; padding:5px 10px; margin:22px 0 0 22px;
}
.promo-card h3{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.01em; text-transform:uppercase;
  font-size:1.6rem; color:#F2EFE9; margin:14px 22px 0; line-height:1.15;
}
.promo-card p{ color:#98A0A8; font-size:.86rem; line-height:1.55; margin:12px 22px 0; }
.promo-card .promo-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 22px 22px; }
.promo-card .promo-btn{
  display:inline-flex; align-items:center; gap:6px; background:#FF6A1A; color:#0B0D10; font-family:'Barlow Condensed',sans-serif;
  font-weight:600; letter-spacing:.02em; font-size:.95rem; padding:11px 18px; text-decoration:none; transition:background .2s ease;
}
.promo-card .promo-btn:hover{ background:#C9540F; }
.promo-card .promo-dismiss{
  display:inline-flex; align-items:center; color:#98A0A8; font-family:'Barlow Condensed',sans-serif; font-size:.95rem;
  background:none; border:1px solid #262B31; padding:11px 18px; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.promo-card .promo-dismiss:hover{ border-color:#98A0A8; color:#F2EFE9; }
.promo-card .promo-made-by{
  border-top:1px solid #262B31; padding:12px 22px; font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  letter-spacing:.05em; color:#98A0A8; text-transform:uppercase;
}
.promo-card .promo-made-by a{ color:#FF6A1A; text-decoration:none; }
.promo-card .promo-made-by a:hover{ text-decoration:underline; }
@media (max-width:480px){
  .promo-card .promo-tag{ margin-left:18px; }
  .promo-card h3{ margin-left:18px; margin-right:18px; font-size:1.4rem; }
  .promo-card p{ margin-left:18px; margin-right:18px; }
  .promo-card .promo-actions{ margin-left:18px; margin-right:18px; }
  .promo-card .promo-made-by{ padding-left:18px; padding-right:18px; }
}

/* ===========================================================
   Animation pass — logo, header shrink, parallax, counters,
   growth-arrow dividers, CTA sweep
=========================================================== */

/* ---- 1. Navbar logo micro-interaction ---- */
.logo-badge { transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease; }
a:hover > .logo-badge, a:focus-visible > .logo-badge {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,106,26,0.55));
}
.logo-arrow-group { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: 120px 120px; }
a:hover > .logo-badge .logo-arrow-group, a:focus-visible > .logo-badge .logo-arrow-group {
  transform: translate(5px,-6px) scale(1.04);
}

/* ---- 2. Hero skyline parallax (JS sets --parallax-y on .hero-slideshow) ---- */
.hero-slideshow { transform: translateY(var(--parallax-y, 0px)); will-change: transform; }

/* ---- 4. Animated stat counters ---- */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* ---- 5. Growth-arrow accent divider ---- */
.growth-divider { display:block; width:100%; height:34px; overflow:visible; }
.growth-divider path {
  fill:none; stroke:#FF6A1A; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1);
}
.growth-divider.in path { stroke-dashoffset: 0; }
.growth-divider circle {
  fill:#FF6A1A; opacity:0; transition: opacity .3s ease 1.1s;
}
.growth-divider.in circle { opacity:1; }

/* ---- 6. Button hover states — orange sweep, consistent with the logo's accent ---- */
a.bg-orange, button.bg-orange {
  position: relative; overflow: hidden; isolation: isolate;
}
a.bg-orange::before, button.bg-orange::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, #FFC77A, #FF6A1A);
  transform: translateX(-100%); transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
a.bg-orange:hover::before, button.bg-orange:hover::before { transform: translateX(0); }

a[class*="border-paper"] { position:relative; overflow:hidden; }
a[class*="border-paper"]::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:#FF6A1A;
  transform: scaleX(0); transform-origin:left; transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
a[class*="border-paper"]:hover::after { transform: scaleX(1); }

/* ---- 6b. Running border light — travels around every CTA button ---- */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
a.bg-orange, button.bg-orange, a[class*="border-paper"] {
  --border-angle: 0deg;
}
a.bg-orange::after, button.bg-orange::after, a[class*="border-paper"]::before {
  content:'';
  position:absolute; inset:0;
  padding:2px;
  border-radius:inherit;
  background: conic-gradient(from var(--border-angle), transparent 0deg, transparent 250deg, #FFE1B8 300deg, #FF6A1A 328deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  z-index:2;
  animation: border-run 2.8s linear infinite;
}
a[class*="border-paper"] { --border-angle: 0deg; }
a[class*="border-paper"]::before { z-index:0; }
@keyframes border-run { to { --border-angle: 360deg; } }

/* ---- 7. Sticky header shrink ---- */
header.header-fix { transition: background-color .3s ease; }
header.header-fix .h-\[72px\] { transition: height .3s cubic-bezier(.22,.61,.36,1); }
header.header-shrink .h-\[72px\] { height: 56px; }
header.header-shrink .logo-badge { transform: scale(0.88); }

@media (prefers-reduced-motion: reduce) {
  .hero-slideshow { transform:none !important; }
  .growth-divider path { transition:none; stroke-dashoffset:0; }
  .growth-divider circle { transition:none; opacity:1; }
  .logo-badge, .logo-arrow-group { transition:none; }
  a.bg-orange::before, button.bg-orange::before { transition:none; }
  a.bg-orange::after, button.bg-orange::after, a[class*="border-paper"]::before { animation:none; opacity:0; }
}

/* ===========================================================
   Animation pass 2 — card lift, grid cursor pulse, icon pop-in,
   price ticker, form focus glow, page transitions, skyline draw
=========================================================== */

/* ---- 8. Card tilt / lift on hover ---- */
.card-lift {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  will-change: transform;
}
.card-lift:hover, .card-lift:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 26px 44px -18px rgba(0,0,0,0.55), 0 4px 14px -6px rgba(255,106,26,0.18);
}

/* ---- 9. Blueprint grid pulse near cursor ---- */
.grid-pulse-layer {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(255,106,26,0.16), rgba(76,108,136,0.07) 45%, transparent 70%);
  opacity: 0; transition: opacity .5s ease;
}
.grid-pulse-layer.active { opacity: 1; }

/* ---- 10. Icon draw-in (staggered pop) on card icons ---- */
.corner-brackets > i[data-lucide]:first-child,
.corner-brackets > svg.lucide:first-child {
  opacity: 0;
  transform: scale(.4) rotate(-8deg);
  transition: opacity .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1);
  transition-delay: var(--icon-delay, 0ms);
}
.corner-brackets.icon-in > i[data-lucide]:first-child,
.corner-brackets.icon-in > svg.lucide:first-child {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ---- 11. Price ticker digits ---- */
.price-ticker span { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- 12. Form field focus glow ---- */
form[data-lead-form] .p-6 label { transition: transform .25s ease, color .25s ease; }
form[data-lead-form] .p-6:focus-within label { transform: translateY(-2px); color: #FF6A1A; }
form[data-lead-form] .p-6:focus-within input,
form[data-lead-form] .p-6:focus-within textarea,
form[data-lead-form] .p-6:focus-within select {
  box-shadow: 0 8px 20px -10px rgba(255,106,26,0.35);
}
form[data-lead-form] input, form[data-lead-form] textarea, form[data-lead-form] select {
  transition: box-shadow .3s ease, border-color .3s ease;
}

/* ---- 13. Page transition fade ---- */
@keyframes page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body { animation: page-fade-in .45s ease both; }
body.page-exit { opacity: 0 !important; transition: opacity .2s ease; pointer-events: none; }

/* ---- 14. Crane / skyline silhouette — draws itself on scroll ---- */
.skyline-draw .skyline-path {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1);
}
.skyline-draw .skyline-crane {
  stroke-dasharray: 500; stroke-dashoffset: 500;
  transition: stroke-dashoffset 1.3s cubic-bezier(.22,.61,.36,1) .5s;
}
.skyline-draw.in .skyline-path, .skyline-draw.in .skyline-crane { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .card-lift { transition: none; }
  .card-lift:hover, .card-lift:focus-within { transform: none; box-shadow: none; }
  .grid-pulse-layer { display: none; }
  .corner-brackets > i[data-lucide]:first-child,
  .corner-brackets > svg.lucide:first-child { opacity: 1; transform: none; transition: none; }
  body { animation: none; }
  body.page-exit { transition: none; }
  .skyline-draw .skyline-path, .skyline-draw .skyline-crane { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ===========================================================
   Mobile sticky action bar (Call / Upload Blueprint)
   Shown only on small screens; consolidates the floating WA
   button + adds quick actions within thumb reach.
=========================================================== */
.mobile-action-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  grid-template-columns: repeat(2, 1fr);
  background: rgba(11,13,16,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid #33393F;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-action-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 4px 8px; color: #C7CCD1;
  font-family: inherit; font-size: 11px; letter-spacing: .02em;
  border-right: 1px solid #23272C; transition: color .2s ease, background-color .2s ease;
}
.mobile-action-bar a:last-child { border-right: none; }
.mobile-action-bar a svg { width: 20px; height: 20px; }
.mobile-action-bar a:active { background: rgba(255,255,255,0.04); }
.mobile-action-bar a.maction-primary { color: #FF6A1A; }
@media (max-width: 767px) {
  .mobile-action-bar { display: grid; }
  .scroll-top { bottom: 78px; }
  body { padding-bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-action-bar { backdrop-filter: none; }
}

/* ===========================================================
   Upload progress bar (blueprint / plan uploads)
=========================================================== */
.upload-progress { margin-top: 10px; }
.upload-progress-track {
  width: 100%; height: 6px; background: #1A1D21; border: 1px solid #23272C; overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0%; background: #FF6A1A;
  transition: width .15s linear;
}

/* ===========================================================
   Pricing calculator
=========================================================== */
.calc-panel { background: #101316; border: 1px solid #23272C; }
.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: #23272C; outline: none; }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #FF6A1A; cursor: pointer; border: 3px solid #0B0D10;
}
.calc-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #FF6A1A; cursor: pointer; border: 3px solid #0B0D10;
}
.calc-chip {
  border: 1px solid #33393F; color: #C7CCD1; padding: 8px 14px; font-family: inherit;
  font-size: 13px; letter-spacing: .02em; transition: all .2s ease; cursor: pointer; background: transparent;
}
.calc-chip.active { border-color: #FF6A1A; color: #FF6A1A; background: rgba(255,106,26,0.08); }
.calc-result-number { font-variant-numeric: tabular-nums; }

/* ===========================================================
   Project tracker
=========================================================== */
.tracker-step { position: relative; padding-left: 34px; }
.tracker-step::before {
  content: ''; position: absolute; left: 8px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid #33393F; background: #0B0D10; z-index: 1;
}
.tracker-step::after {
  content: ''; position: absolute; left: 13px; top: 14px; width: 2px; bottom: -28px; background: #23272C;
}
.tracker-step:last-child::after { display: none; }
.tracker-step.done::before { border-color: #FF6A1A; background: #FF6A1A; }
.tracker-step.done::after { background: #FF6A1A; }
.tracker-step.current::before { border-color: #FF6A1A; background: #0B0D10; box-shadow: 0 0 0 4px rgba(255,106,26,0.18); }