:root{
  /* CI color palette derived from logo */
  --bg:#fbfcfb;
  --card:#ffffff;
  --brand-dark:#0f5561; /* deep teal */
  --brand-mid:#2ea6a1;  /* teal accent */
  --brand-warm:#f4e8d2; /* warm beige */
  --muted:#425056;      /* neutral text */
  --radius:18px;
  --max-width:1200px;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
.cozy-body{background:var(--bg);margin:0}
.container{max-width:var(--max-width);margin:0 auto;padding:2rem}
.hero{padding:3.5rem 0;background:linear-gradient(90deg, rgba(46,166,161,0.06), rgba(15,85,97,0.02));border-bottom:1px solid rgba(15,23,42,0.03)}
.cozy-body{background:linear-gradient(180deg,#fcfbf9 0%, #fffefc 100%)}
.cozy-card{background:var(--card);border-radius:22px;box-shadow:0 14px 40px rgba(15,85,97,0.06);border:1px solid rgba(15,85,97,0.04)}
.cozy-input{border:1px solid rgba(66,80,86,0.08);padding:1rem;border-radius:12px;background:transparent;font-size:1.05rem}
.cozy-input:focus{outline:none;box-shadow:0 10px 36px rgba(46,166,161,0.12);border-color:var(--brand-mid)}
.cozy-label{color:var(--muted);font-weight:700;margin-bottom:8px;display:block}
.cozy-btn{background:linear-gradient(180deg,var(--brand-mid),var(--brand-dark));color:#fff;padding:0.95rem 1.2rem;border-radius:16px;box-shadow:0 12px 34px rgba(46,166,161,0.10);border:none}
.cozy-ghost{background:transparent;border:1px solid rgba(66,80,86,0.08);color:var(--muted);padding:.85rem;border-radius:12px}

/* Modern UI additions */
.topbar{background:transparent;padding:.5rem 0}
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.nav-left{display:flex;align-items:center;gap:1rem}
.nav-right{display:flex;align-items:center;gap:.5rem}
.nav a{color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:8px}
.nav a:hover{background:rgba(46,166,161,0.06)}

.hero-card{max-width:1100px;margin:0 auto;padding:2rem;border-radius:24px;background:linear-gradient(180deg, rgba(244,232,210,0.6), rgba(255,255,255,0.6));backdrop-filter: blur(6px);box-shadow:0 20px 50px rgba(15,85,97,0.06);display:flex;gap:2rem;align-items:center}
.hero-copy{flex:1}
.hero-kicker{display:inline-block;background:var(--brand-warm);color:var(--brand-dark);padding:.25rem .6rem;border-radius:999px;font-weight:700;font-size:.9rem}
.hero-strap{font-size:1.125rem;color:var(--muted);margin-top:.5rem}

.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,85,97,0.08)}
.card{transition:transform .28s ease, box-shadow .28s ease}

.testimonials{display:grid;grid-template-columns:1fr;gap:1rem}
.testimonial{padding:1rem;border-radius:16px;background:linear-gradient(180deg,#fff,#fbfbfb);border:1px solid rgba(15,85,97,0.04);box-shadow:0 8px 20px rgba(15,85,97,0.04)}
.testimonial p{font-style:italic;color:var(--muted)}
.testimonial cite{display:block;margin-top:.6rem;font-weight:700;color:var(--brand-dark)}

.footer{padding:2rem 0;background:linear-gradient(180deg,#ffffff,#fbfcfb);border-top:1px solid rgba(15,23,42,0.03);margin-top:2rem}
.footer-columns{display:flex;gap:2rem;flex-wrap:wrap}
.footer a{color:var(--muted)}

/* subtle animations */
@keyframes floaty { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }
.floaty{animation:floaty 6s ease-in-out infinite}

@media (min-width:900px){
  .testimonials{grid-template-columns:repeat(3,1fr)}
  .hero-card{padding:3rem}
}

/* Icon helpers */
.ci-icon{width:32px;height:32px;display:inline-block}
.ci-icon--small{width:20px;height:20px}
.cozy-btn svg{margin-right:10px;vertical-align:middle}

/* focus-visible for keyboard users */
:focus{outline:none}
.focus-ring:focus-visible{box-shadow:0 0 0 4px rgba(46,166,161,0.14);border-radius:12px}

/* Accessibility tweaks for contrast */
body, .cozy-card, input, textarea{color:var(--muted)}
.cozy-btn{color:#fff}
.hero h1{margin:0;font-weight:700;font-size:2.4rem}
.tag{color:var(--muted);margin-top:.4rem}
.header-actions{margin-top:1.25rem}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(107,140,255,0.18)}

.about,.services,.repair,.contact{margin-top:2.25rem;background:var(--card);padding:1.2rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(11,22,60,0.04)}
.services .cards{display:flex;gap:1rem;flex-wrap:wrap}
.card{flex:1;min-width:210px;padding:1rem;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(11,22,60,0.04)}
.card h3{margin-top:0}

.form{display:block;margin-top:1rem}
.form-row{display:flex;gap:1rem}
label{display:block;font-size:0.95rem;color:var(--muted);margin-bottom:0.5rem}
input,textarea{width:100%;padding:.6rem .75rem;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:transparent;font-size:1rem}
.form-actions{margin-top:.8rem;display:flex;gap:.5rem}
.notice{padding:.6rem 1rem;border-radius:10px;margin-bottom:.75rem}
.notice.success{background:linear-gradient(90deg, #e6f4ea, #f0f9f4);border:1px solid #d1f0d9;color:#0b5e2b}

.site-footer{padding:1rem 0;color:var(--muted);text-align:center;margin-top:2rem}

/* Admin table */
table{width:100%;border-collapse:collapse}
th,td{padding:.6rem .8rem;border-bottom:1px solid rgba(15,23,42,0.04);text-align:left}
th{background:#f8fafc;color:var(--muted);font-weight:600}

@media (max-width:720px){.form-row{flex-direction:column}}

/* Accessibility & senior-friendly tweaks */
html { font-size: 18px; }

.hero{padding:3rem 0;border-radius:0 0 24px 24px}
.hero .container{display:flex;gap:1.25rem;align-items:center}
.hero-graphic{width:120px;height:auto;flex:0 0 120px}
.hero h1{font-size:2.25rem;font-family:'Merriweather', serif;color:var(--brand-dark);letter-spacing:0.2px}

.big-btn{padding:1rem 1.25rem;border-radius:14px;font-size:1.05rem}
.accessible-form input, .accessible-form textarea{font-size:1.05rem;padding:1rem;border-radius:12px}
.accessible-form label{font-size:1.05rem;color:#0b2540}

/* Mobile-first repair page */
.repair-page{padding:1.25rem;max-width:720px;margin:1rem auto}
.repair-page header{display:flex;align-items:center;gap:1rem}
.repair-page h1{font-size:1.6rem;margin:0}
.repair-page .note{color:var(--brand-dark);background:var(--brand-warm);padding:.6rem 1rem;border-radius:12px;margin-top:.5rem}

.footer-small{font-size:0.95rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.footer-small a{color:var(--muted);text-decoration:underline 1px rgba(47,160,155,0.12)}

@media (max-width:480px){
  .hero-graphic{width:84px}
  html{font-size:20px}
  .hero h1{font-size:1.6rem}
}