/* =========================================================
   exterior-group.com — Exterior Group, exterior paint shop
   Colour-led landing page — no CTA by design
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@75..150,600..900&family=Wix+Madefor+Text:wght@400;500;600;700&family=Sono:wght@500&display=swap');

:root{
  --bg:       #F7F5F0;
  --bg-alt:   #EDE9E1;
  --card:     #FFFFFF;
  --ink:      #1F2328;
  --ink-soft: #636A72;
  --line:     #DFD9CE;
  --teal:     #2E6F73;
  --ochre:    #E3A72F;
  --clay:     #B5653F;
  --navy:     #1F3A5F;

  --font-display: 'Anybody', sans-serif;
  --font-body: 'Wix Madefor Text', sans-serif;
  --font-mono: 'Sono', monospace;
  --max: 1180px;
  --radius: 14px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 80px; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

::selection{ background: var(--ochre); color: var(--ink); }
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

a{ color: inherit; }
svg{ display: block; width: 100%; height: auto; }

.section-inner{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }

@keyframes riseIn{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* -------------------- navbar (navigation only, no CTA) -------------------- */
.navbar{
  position: sticky; top: 0; z-index: 20;
  background: rgba(247,245,240,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.navbar-inner{
  max-width: var(--max); margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.logo{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-stretch: 115%;
  font-size: 1.2rem; white-space: nowrap;
}
.logo-accent{ color: var(--teal); }

.logo-swatch{ display: inline-flex; gap: 2px; }
.logo-swatch i{ width: 6px; height: 18px; border-radius: 2px; }
.logo-swatch i:nth-child(1){ background: var(--teal); }
.logo-swatch i:nth-child(2){ background: var(--ochre); }
.logo-swatch i:nth-child(3){ background: var(--clay); }

.navbar-links{ list-style: none; display: none; gap: 28px; margin: 0; padding: 0; font-weight: 600; font-size: 0.92rem; }
@media (min-width: 700px){ .navbar-links{ display: flex; } }
.navbar-links a{ text-decoration: none; color: var(--ink-soft); transition: color 0.15s ease; }
.navbar-links a:hover{ color: var(--ink); }

/* -------------------- hero -------------------- */
.hero-inner{
  max-width: var(--max); margin: 0 auto; padding: 60px 32px 0;
  display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center;
}
@media (min-width: 950px){ .hero-inner{ grid-template-columns: 0.95fr 1.05fr; padding: 76px 32px 0; } }

.kicker{
  display: inline-block; font-family: var(--font-mono); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--teal);
  margin-bottom: 18px; animation: riseIn 0.6s ease both;
}

.hero-copy h1{
  font-family: var(--font-display); font-weight: 900; font-stretch: 85%;
  font-size: clamp(2.5rem, 5.6vw, 4.1rem); line-height: 1.0;
  margin: 0 0 22px; animation: riseIn 0.6s ease 0.08s both;
}

.hero-text{ font-size: 1.08rem; color: var(--ink-soft); max-width: 50ch; margin: 0; animation: riseIn 0.6s ease 0.16s both; }

.hero-visual{ animation: riseIn 0.8s ease 0.1s both; }
.hero-visual svg{ filter: drop-shadow(0 24px 36px rgba(31,35,40,0.16)); }

/* -------------------- stats -------------------- */
.stat-strip{
  max-width: var(--max); margin: 56px auto 0; padding: 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line);
}
@media (min-width: 760px){ .stat-strip{ grid-template-columns: repeat(4, 1fr); } }

.stat-block{ padding: 24px 16px 24px 0; display: flex; flex-direction: column; gap: 2px; }
.stat-num{ font-family: var(--font-display); font-weight: 800; font-stretch: 90%; font-size: 1.9rem; color: var(--teal); }
.stat-label{ font-size: 0.86rem; color: var(--ink-soft); }

/* -------------------- section titles -------------------- */
.section-title{
  font-family: var(--font-display); font-weight: 800; font-stretch: 90%;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.08; margin: 0 0 12px;
}
.section-sub{ color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 40px; max-width: 58ch; }

/* -------------------- colours -------------------- */
.colours-section{ padding: 96px 0; background: var(--bg-alt); margin-top: 24px; }

.colours-inner{ display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px){ .colours-inner{ grid-template-columns: 1.1fr 0.9fr; } }

.colours-visual svg{ max-width: 560px; margin: 0 auto; filter: drop-shadow(0 18px 24px rgba(31,35,40,0.18)); }

.colour-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.colour-list li{
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.colour-chip{ width: 34px; height: 22px; border-radius: 4px; border: 1px solid rgba(31,35,40,0.25); }
.colour-name{ font-weight: 600; }
.colour-code{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); }

/* -------------------- products -------------------- */
.products-section{ padding: 96px 0 72px; }

.product-grid{ display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px){ .product-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .product-grid{ grid-template-columns: repeat(3, 1fr); } }

.product-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(31,35,40,0.4); }

.product-body{ padding: 18px 22px 22px; }
.product-card h3{ font-family: var(--font-display); font-weight: 800; font-stretch: 95%; font-size: 1.2rem; margin: 0 0 6px; }
.product-card p{ font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* -------------------- weather -------------------- */
.weather-section{ background: var(--navy); color: #fff; padding: 84px 0; }

.weather-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
@media (min-width: 760px){ .weather-grid{ grid-template-columns: repeat(3, 1fr); } }

.weather-icon{ width: 48px; height: 48px; margin-bottom: 14px; }
.weather-item h3{ font-family: var(--font-display); font-weight: 800; font-stretch: 95%; font-size: 1.2rem; margin: 0 0 6px; }
.weather-item p{ color: rgba(255,255,255,0.74); font-size: 0.94rem; margin: 0; }

/* -------------------- in store -------------------- */
.services-section{ padding: 96px 0 72px; }

.services-list{ border-top: 2px solid var(--ink); }
.service-row{
  display: grid; grid-template-columns: 48px 1fr; gap: 6px 20px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 760px){ .service-row{ grid-template-columns: 60px 0.8fr 1.6fr; align-items: baseline; } }

.service-num{ font-family: var(--font-mono); color: var(--clay); }
.service-row h3{ font-family: var(--font-display); font-weight: 800; font-stretch: 95%; font-size: 1.2rem; margin: 0; }
.service-row p{ color: var(--ink-soft); margin: 0; grid-column: 2; }
@media (min-width: 760px){ .service-row p{ grid-column: auto; } }

/* -------------------- testimonials -------------------- */
.results-section{ padding: 24px 0 96px; }
.results-grid{ display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
@media (min-width: 760px){ .results-grid{ grid-template-columns: repeat(3, 1fr); } }

.result-card{ background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.result-quote{ font-size: 0.98rem; margin: 0 0 22px; }
.result-author{ display: flex; align-items: center; gap: 12px; }
.result-avatar{
  width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.result-name{ display: block; font-weight: 700; font-size: 0.9rem; }
.result-role{ display: block; font-size: 0.82rem; color: var(--ink-soft); }

/* -------------------- footer -------------------- */
.site-footer{ padding: 30px 0; border-top: 1px solid var(--line); }
.footer-inner{ display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px){ .footer-inner{ flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-copy{ color: var(--ink-soft); font-size: 0.85rem; }