/* ===========================================================
   Hobart Renovations — Design System
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:        #17181a;
  --ink-soft:   #43474d;
  --paper:      #f7f4ef;
  --paper-2:    #efe9df;
  --white:      #ffffff;
  --brass:      #a9824f;
  --brass-dark: #8a6a3d;
  --brass-light:#e4d3b8;
  --line:       #e2dccd;
  --success:    #4b6b4f;

  --font-head: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(23,24,26,0.08);
  --shadow-md: 0 8px 30px rgba(23,24,26,0.10);
  --shadow-lg: 0 20px 60px rgba(23,24,26,0.16);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
/* Safety net: our inline icon SVGs carry no width/height attributes, so any spot that forgets
   to size them explicitly would otherwise fall back to the browser's oversized default (this is
   what caused the huge phone icon in the old mobile call bar). 48px comfortably covers every
   normal icon use on the site; the one deliberately larger decorative icon (.ph-block svg)
   explicitly raises its own cap below. */
svg{ max-width:48px; max-height:48px; }
a{ color: inherit; text-decoration: none; }
ul,ol{ padding-left: 1.2em; }
h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.5rem); }
p{ margin: 0 0 1em; color: var(--ink-soft); }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section{ padding: 88px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--paper-2); }
.section--dark{ background: var(--ink); color: var(--paper); }
.section--dark p{ color: #c7c9cc; }
.section--dark h2, .section--dark h3{ color: var(--white); }

.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--brass-dark);
  margin-bottom: 14px;
}
.kicker::before{ content:""; width:24px; height:1px; background: var(--brass); display:inline-block; }
.section--dark .kicker{ color: var(--brass-light); }

.lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:.95rem;
  font-family: var(--font-body); border:1px solid transparent; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn-primary{ background: var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; box-shadow: var(--shadow-md); }
.btn-accent{ background: var(--brass); color:#fff; }
.btn-accent:hover{ background: var(--brass-dark); box-shadow: var(--shadow-md); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color:#fff; }
.btn-ghost-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover{ background:#fff; color: var(--ink); }
.btn-sm{ padding: 10px 18px; font-size:.85rem; }
.btn-block{ width:100%; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; }
.brand-text{ font-family: var(--font-head); font-size:1.05rem; font-weight:600; line-height:1.1; }
.brand-text small{ display:block; font-family: var(--font-body); font-weight:500; font-size:.68rem; letter-spacing:.08em; color: var(--ink-soft); text-transform:uppercase; margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{ font-size:.92rem; font-weight:500; color: var(--ink-soft); position:relative; padding: 4px 0; }
.main-nav a:hover, .main-nav a.active{ color: var(--ink); }
.main-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--brass); }
.header-cta{ display:flex; align-items:center; gap:18px; }
.header-phone{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; }
.header-phone svg{ width:16px; height:16px; color: var(--brass); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--ink); margin:5px 0; }

@media (max-width: 960px){
  .main-nav{
    position: fixed; inset: 84px 0 0 0; background: var(--paper); z-index: 99;
    flex-direction: column; align-items: flex-start; padding: 32px 24px;
    gap: 22px; overflow-y:auto; transform: translateX(100%); transition: transform .25s ease;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size:1.1rem; }
  .nav-toggle{ display:block; }
  .header-phone span{ display:none; }
  .header-phone{
    width:36px; height:36px; justify-content:center; flex-shrink:0;
    background: var(--brass-light); border-radius:999px;
  }
  .header-phone svg{ width:16px; height:16px; }
  .header-cta{ gap:6px; }
  .header-cta .btn{ padding:9px 14px; font-size:.82rem; }
  .site-header .container{ padding-left:16px; padding-right:16px; gap:12px; }
  .brand-text{ font-size:.92rem; }
}

.header-quote-btn .short{ display:none; }

@media (max-width: 400px){
  .header-cta .btn{ white-space:nowrap; }
  .header-cta .btn{ padding:9px 11px; font-size:.78rem; }
}

@media (max-width: 360px){
  .header-quote-btn .full{ display:none; }
  .header-quote-btn .short{ display:inline; }
}

/* Hero */
.hero{ position:relative; padding: 64px 0 80px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero-eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600;
  padding: 8px 14px; border-radius: 999px; background: var(--white); border:1px solid var(--line);
  color: var(--ink-soft);
}
.badge svg{ width:14px; height:14px; color: var(--brass); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 32px; }
.hero-media{ position:relative; }
.hero-media .ph-block{ aspect-ratio: 4/5; border-radius: var(--radius-lg); }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; }
}

/* Placeholder image blocks (used until real photography is supplied) */
.ph-block{
  position: relative; border-radius: var(--radius); overflow:hidden; width:100%;
  background: linear-gradient(135deg, #ece5d6 0%, #ddd2b8 45%, #cdbf9d 100%);
  display:flex; align-items:center; justify-content:center; color: #8a7a56;
  /* No min-height here: combined with aspect-ratio (e.g. 16/9) a fixed min-height forces a
     matching minimum WIDTH too (min-height 180px @ 16:9 = 320px min-width), which overflowed
     narrow phone screens. aspect-ratio alone keeps every placeholder box in proportion at any
     container width without a forced minimum. */
}
.ph-block::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
}
.ph-block svg{ width:34%; max-width:110px; max-height:110px; opacity:.55; position:relative; z-index:1; }
.ph-block .ph-label{
  position:absolute; bottom:12px; left:12px; right:12px; z-index:2;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color: #6b5c3c; background: rgba(255,255,255,.55); padding:6px 10px; border-radius:999px;
  display:inline-flex; width:fit-content; backdrop-filter: blur(2px);
}
.ph-block.ph-dark{ background: linear-gradient(135deg, #2a2b2d 0%, #1c1d1f 100%); color:#8d8f92; }
.ph-block.ph-dark .ph-label{ color:#d8d3c4; background: rgba(255,255,255,.12); }
.ph-16x9{ aspect-ratio: 16/9; }
.ph-4x3{ aspect-ratio: 4/3; }
.ph-1x1{ aspect-ratio: 1/1; }
.ph-3x4{ aspect-ratio: 3/4; }

/* Real photo blocks — same box shape as .ph-block (and share its aspect-ratio classes)
   but show an actual cropped photo instead of the gradient placeholder. */
.img-block{
  position: relative; border-radius: var(--radius); overflow:hidden; width:100%;
  background: #e4ddcb;
}
.img-block img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-block .ph-label{
  position:absolute; bottom:12px; left:12px; right:12px; z-index:2;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color: #6b5c3c; background: rgba(255,255,255,.72); padding:6px 10px; border-radius:999px;
  display:inline-flex; width:fit-content; backdrop-filter: blur(2px);
}
.hero-media .img-block{ aspect-ratio: 4/5; border-radius: var(--radius-lg); }

/* Grids & cards */
.grid{ display:grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-body{ padding: 26px; }
.card-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--brass-dark); margin-bottom:8px; }
.card h3{ margin-bottom: 10px; }
.card p{ font-size:.96rem; margin-bottom: 14px; }
.card-link{ font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; color: var(--ink); }
.card-link svg{ width:14px; height:14px; transition: transform .15s ease; }
.card:hover .card-link svg{ transform: translateX(3px); }

.icon-tile{
  width:52px; height:52px; border-radius: 12px; background: var(--brass-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.icon-tile svg{ width:26px; height:26px; color: var(--brass-dark); }

/* Stats row */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align:center; }
.stat b{ display:block; font-family: var(--font-head); font-size:2.1rem; color: var(--ink); }
.stat span{ font-size:.85rem; color: var(--ink-soft); }
@media (max-width: 700px){ .stats{ grid-template-columns: repeat(2,1fr); } }

/* Process steps */
.steps{ counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.step{ position:relative; padding-top: 8px; }
.step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-head); font-size:2rem; color: var(--brass); display:block; margin-bottom:10px;
}
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }

/* Testimonials */
.testimonial{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }
.testimonial p{ font-family: var(--font-head); font-size:1.15rem; color: var(--ink); font-weight:400; }
.testimonial .who{ font-size:.85rem; color: var(--ink-soft); font-weight:600; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }
.testimonial .review-source{ font-weight:500; color: var(--ink-soft); opacity:.75; }
.stars{ color: var(--brass); letter-spacing:2px; margin-bottom:12px; display:block; }
.stars-badge{ font-family: var(--font-body); letter-spacing:normal; font-size:.75rem; font-weight:700;
  text-transform:uppercase; color: var(--ink-soft); background: var(--paper-alt, #f4f1ec); display:inline-block;
  padding:4px 10px; border-radius: 999px; }

/* Breadcrumbs */
.breadcrumbs{ font-size:.82rem; color: var(--ink-soft); padding: 18px 0 0; }
.breadcrumbs a{ color: var(--ink-soft); }
.breadcrumbs a:hover{ color: var(--ink); text-decoration:underline; }
.breadcrumbs span{ margin: 0 6px; opacity:.6; }

/* Page hero (secondary pages) */
.page-hero{ padding: 40px 0 60px; border-bottom: 1px solid var(--line); }
.page-hero h1{ margin-bottom: 14px; }

/* Two-col content */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.split.rev .split-media{ order: 2; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } .split.rev .split-media{ order:-1; } }

.check-list{ list-style:none; padding:0; margin: 20px 0; }
.check-list li{ display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; color: var(--ink-soft); }
.check-list svg{ width:20px; height:20px; color: var(--success); flex-shrink:0; margin-top:2px; }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 20px 0; display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-head); font-size:1.05rem; color: var(--ink); gap: 16px;
}
.faq-q svg{ width:18px; height:18px; flex-shrink:0; transition: transform .2s ease; color: var(--brass); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a{ max-height: 600px; }
.faq-a p{ padding-bottom: 20px; margin:0; }

/* Location chips */
.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  padding:10px 16px; border-radius:999px; background: var(--white); border:1px solid var(--line);
  font-size:.88rem; font-weight:600; color: var(--ink-soft);
}
.chip:hover{ border-color: var(--brass); color: var(--ink); }

/* CTA banner */
.cta-banner{
  background: var(--ink); color:#fff; border-radius: var(--radius-lg);
  padding: 56px; display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap:wrap;
}
.cta-banner h2{ color:#fff; margin-bottom:8px; }
.cta-banner p{ color:#c7c9cc; margin:0; max-width:48ch; }
.cta-banner-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Footer */
.site-footer{ background: var(--ink); color:#c7c9cc; padding: 72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand img{ height:56px; margin-bottom:16px; }
.footer-brand p{ color:#a7aab0; max-width: 32ch; }
.site-footer h4{ color:#fff; font-family: var(--font-body); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:18px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:10px; }
.site-footer a{ color:#a7aab0; font-size:.92rem; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:#8b8e94; }
.footer-bottom a{ color:#8b8e94; }
.footer-bottom a:hover{ color:#fff; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full{ grid-column: 1 / -1; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:8px; color: var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding: 13px 14px; border-radius: var(--radius); border:1px solid var(--line);
  font-family: var(--font-body); font-size:.95rem; background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline: 2px solid var(--brass); outline-offset:1px; }
.field textarea{ resize: vertical; min-height: 130px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }

.map-embed{ position:relative; width:100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.contact-panel{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.contact-info-item{ display:flex; gap:14px; margin-bottom:22px; align-items:flex-start; }
.contact-info-item svg{ width:20px; height:20px; color: var(--brass); flex-shrink:0; margin-top:2px; }
.contact-info-item strong{ display:block; font-size:.95rem; }
.contact-info-item span, .contact-info-item a{ font-size:.9rem; color: var(--ink-soft); }

/* Blog */
.post-meta{ font-size:.82rem; color: var(--ink-soft); display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.post-tag{ background: var(--brass-light); color: var(--brass-dark); padding:4px 10px; border-radius:999px; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.article-body{ max-width: 72ch; margin: 0 auto; }
.article-body h2{ margin-top: 1.6em; }
.article-body h3{ margin-top: 1.3em; }
.article-body ul, .article-body ol{ color: var(--ink-soft); margin-bottom: 1.2em; }
.article-body li{ margin-bottom:.4em; }
.article-body blockquote{
  border-left: 3px solid var(--brass); margin: 1.6em 0; padding: 4px 0 4px 22px;
  font-family: var(--font-head); font-size:1.15rem; color: var(--ink);
}
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; margin-bottom: 20px; }
.back-link svg{ width:16px; height:16px; }

/* Sticky mobile call bar */
.mobile-call-bar{
  display:none; position: fixed; left:0; right:0; bottom:0; z-index: 90;
  background: var(--ink); padding: 10px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.18);
}
.mobile-call-bar a{
  color:#fff; font-weight:600; font-size:.95rem; display:flex; align-items:center;
  justify-content:center; gap:10px; padding:6px 0;
}
.mobile-call-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; border-radius:999px; background: var(--brass);
}
.mobile-call-icon svg{ width:15px; height:15px; color:#fff; }
@media (max-width: 640px){ .mobile-call-bar{ display:block; } body{ padding-bottom: 54px; } }

/* Article extras: byline, TOC, further reading, citations */
.byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:.86rem; color: var(--ink-soft);
  padding: 16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin: 20px 0 8px;
}
.byline strong{ color: var(--ink); }
.byline .dot{ opacity:.5; }
.article-toc{
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 26px; margin: 28px 0;
}
.article-toc h2{ font-size:1rem; margin-bottom:12px; }
.article-toc ol{ margin:0; padding-left: 1.3em; }
.article-toc li{ margin-bottom:6px; }
.article-toc a{ color: var(--ink-soft); font-weight:600; font-size:.94rem; }
.article-toc a:hover{ color: var(--brass-dark); text-decoration:underline; }
.further-reading{
  background: var(--white); border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius: var(--radius); padding: 20px 26px; margin: 32px 0;
}
.further-reading h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.further-reading ul{ margin:0; padding-left: 1.2em; }
.further-reading a{ color: var(--brass-dark); font-weight:600; }
.further-reading a:hover{ text-decoration:underline; }
.article-body a:not(.card-link):not(.btn){ color: var(--brass-dark); text-decoration: underline; text-decoration-color: var(--brass-light); text-underline-offset:2px; }
.article-body a:hover{ color: var(--ink); }
.expert-note{
  background: var(--brass-light); border-radius: var(--radius); padding: 20px 24px; margin: 1.6em 0;
}
.expert-note p{ color: var(--ink); margin:0; }
.expert-note strong{ color: var(--brass-dark); }

.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.max-w{ max-width: 70ch; }
.max-w-center{ max-width: 70ch; margin-left:auto; margin-right:auto; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.text-center{ margin-left:auto; margin-right:auto; }