/* Cordan Electric LLC — Warm Heritage design system
   Committed green palette + brass trade-plate signature. No cream bg. */

:root {
  /* palette (oklch) */
  --bg:        oklch(0.975 0.008 150);
  --surface:   oklch(0.995 0.004 150);
  --green:     oklch(0.33 0.05 155);
  --green-deep:oklch(0.26 0.045 155);
  --green-700: oklch(0.40 0.055 155);
  --brass:     oklch(0.70 0.11 80);
  --brass-deep:oklch(0.58 0.10 78);
  --filament:  oklch(0.80 0.14 70);
  --ink:       oklch(0.24 0.02 155);
  --ink-soft:  oklch(0.40 0.02 155);
  --on-green:  oklch(0.96 0.015 120);
  --on-green-soft: oklch(0.84 0.02 120);
  --line:      oklch(0.88 0.012 150);

  /* type */
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* spacing scale (8pt) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --radius:8px;
  --maxw:1120px;

  /* z-index scale */
  --z-sticky:100; --z-overlay:200; --z-modal:300;

  --ease: cubic-bezier(.16,1,.3,1); /* ease-out-expo-ish */
}

* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:1.5rem; }

h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.02em; color:var(--green-deep); text-wrap:balance; }
h1 { font-size:clamp(2.3rem,1.4rem + 3.6vw,4rem); }
h2 { font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem); }
h3 { font-size:1.2rem; letter-spacing:-.01em; }
p { text-wrap:pretty; max-width:68ch; }

/* mono data labels */
.label {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass-deep); font-weight:500;
}

/* ---- buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--body); font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--radius);
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  min-height:48px;
}
.btn-primary { background:var(--brass); color:var(--green-deep); box-shadow:0 1px 0 var(--brass-deep); }
.btn-primary:hover { background:var(--filament); transform:translateY(-2px); box-shadow:0 6px 18px oklch(0.70 0.11 80 / .35); }
.btn-ghost { background:transparent; color:var(--green-deep); border-color:var(--green); }
.btn-ghost:hover { background:var(--green); color:var(--on-green); }
.btn-ondark { background:var(--brass); color:var(--green-deep); }
.btn-ondark:hover { background:var(--filament); transform:translateY(-2px); }
:focus-visible { outline:3px solid var(--brass-deep); outline-offset:2px; border-radius:4px; }

/* ---- header ---- */
header.site {
  position:sticky; top:0; z-index:var(--z-sticky);
  background:oklch(0.26 0.045 155 / .96); backdrop-filter:blur(8px);
  border-bottom:1px solid oklch(0.70 0.11 80 / .35);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.8rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--on-green); }
.brand .mark { width:34px; height:34px; flex:none; }
.brand .mark rect { stroke:var(--brass); }
.brand .mark path { fill:var(--brass); }
.brand b { font-family:var(--display); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
.brand small { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--brass); text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:.3rem; }
.nav-links a { color:var(--on-green-soft); text-decoration:none; font-weight:500; font-size:.95rem; padding:.5rem .8rem; border-radius:6px; transition:color .15s, background .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--on-green); background:oklch(1 0 0 / .07); }
.nav-links a[aria-current="page"] { color:var(--brass); }
.nav .btn { padding:.6rem 1.1rem; min-height:42px; }
.navtoggle { display:none; background:none; border:1px solid oklch(0.70 0.11 80 / .4); color:var(--on-green); border-radius:6px; padding:.45rem .6rem; cursor:pointer; }

/* ---- trade-plate signature ---- */
.plate {
  position:relative; background:var(--green); color:var(--on-green);
  border-radius:10px; padding:clamp(1.6rem,4vw,2.8rem);
  box-shadow:inset 0 0 0 2px var(--brass), inset 0 0 0 6px var(--green),
             inset 0 0 0 7px oklch(0.70 0.11 80 / .5), 0 18px 40px oklch(0.26 0.045 155 / .25);
}
.plate::before, .plate::after,
.plate > .screw { /* corner screws */ }
.screw { position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--filament), var(--brass-deep));
  box-shadow:0 0 0 1px oklch(0.26 0.045 155 / .6); }
.screw.tl{top:13px;left:13px} .screw.tr{top:13px;right:13px}
.screw.bl{bottom:13px;left:13px} .screw.br{bottom:13px;right:13px}

/* section header with engraved brass rule */
.sec { padding-block:var(--s6); }
.sec-head { margin-bottom:var(--s4); }
.sec-head .rule { display:inline-block; width:46px; height:2px; background:var(--brass);
  box-shadow:0 1px 0 oklch(1 0 0 / .5); margin-bottom:.9rem; }
.sec-head p.lead { font-size:1.1rem; color:var(--ink-soft); margin-top:.6rem; }

/* ---- hero ---- */
.hero { background:linear-gradient(180deg, oklch(0.975 0.008 150), var(--bg)); padding-block:var(--s6) var(--s5); }
.hero-grid { display:grid; gap:var(--s5); align-items:center; }
@media(min-width:880px){ .hero-grid{ grid-template-columns:1.05fr .95fr; } }
.hero h1 { margin:.4rem 0 1rem; }
.hero .sub { font-size:1.2rem; color:var(--ink-soft); max-width:48ch; }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.hero .micro { margin-top:1.4rem; font-size:.9rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:1.2rem; }
.hero .micro b { color:var(--ink); }

/* hero enamel plate content */
.hero-plate .est { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.hero-plate .est .label { color:var(--brass); }
.hero-plate .bigname { font-family:var(--display); font-size:clamp(1.8rem,1.2rem+2vw,2.6rem); line-height:1.05; margin:.8rem 0 .3rem; color:var(--on-green); }
.hero-plate .tag { color:var(--on-green-soft); font-style:italic; font-family:var(--display); }
.hero-plate .stat { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid oklch(0.70 0.11 80 / .35); display:flex; align-items:baseline; gap:.6rem; }
.hero-plate .stat .num { font-family:var(--display); font-size:3rem; line-height:1; color:var(--filament); text-shadow:0 0 22px oklch(0.80 0.14 70 / .5); }
.hero-plate .stat .num small { font-size:1.4rem; }
.hero-plate .stat .cap { color:var(--on-green-soft); font-size:.95rem; }

/* ---- trust strip ---- */
.trust { background:var(--green-deep); color:var(--on-green-soft); }
.trust .wrap { display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; justify-content:center; align-items:center; padding-block:1.1rem; font-size:.92rem; }
.trust b { color:var(--brass); font-family:var(--mono); }

/* ---- services ---- */
.svc-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.svc {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.svc:hover { transform:translateY(-3px); box-shadow:0 12px 30px oklch(0.33 0.05 155 / .12); border-color:var(--brass); }
.svc .ic { width:38px; height:38px; color:var(--green); margin-bottom:.9rem; }
.svc h3 { margin-bottom:.5rem; }
.svc p { font-size:.97rem; color:var(--ink-soft); }

/* ---- band (why trust) ---- */
.band { background:var(--green); color:var(--on-green); border-radius:14px; padding:clamp(2rem,5vw,3.5rem); }
.band h2 { color:var(--on-green); }
.band p { color:var(--on-green-soft); }
.pillars { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:var(--s4); }
.pillar .label { color:var(--brass); }
.pillar h3 { color:var(--on-green); margin:.4rem 0; }
.pillar p { font-size:.95rem; }

/* ---- big stats + awards ---- */
.bigstats { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:var(--s4) 0; }
.bigstat .n { display:block; font-family:var(--display); font-size:clamp(2.4rem,1.6rem + 2.4vw,3.4rem); line-height:1; color:var(--filament); text-shadow:0 0 22px oklch(0.80 0.14 70 / .4); }
.bigstat .lab { color:var(--on-green-soft); font-size:.95rem; margin-top:.45rem; display:block; }
.awards { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
.chip { border:1px solid oklch(0.70 0.11 80 / .55); border-radius:999px; padding:.45rem 1rem; font-size:.85rem; color:var(--on-green); }

/* ---- reviews ---- */
.rev-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.review { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; }
.review .stars { color:var(--brass); letter-spacing:2px; }
.review p { font-size:1rem; margin:.7rem 0; color:var(--ink); }
.review .who { font-weight:600; font-size:.92rem; }
.review .who span { font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); font-weight:400; letter-spacing:.08em; text-transform:uppercase; margin-left:.4rem; }

/* ---- CTA section ---- */
.cta-final { text-align:center; }
.cta-final .plate { max-width:760px; margin-inline:auto; text-align:center; }
.cta-final h2 { color:var(--on-green); }
.cta-final p { color:var(--on-green-soft); margin:.8rem auto 1.6rem; }

/* ---- form ---- */
.form { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:clamp(1.4rem,4vw,2.4rem); }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.field label .req { color:var(--brass-deep); }
.field input, .field select, .field textarea {
  width:100%; font:inherit; font-size:1rem; padding:.8rem .9rem; min-height:48px;
  border:1.5px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink);
  transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brass); outline:none; }
.field textarea { min-height:120px; resize:vertical; }
.field .hint { font-size:.82rem; color:var(--ink-soft); margin-top:.35rem; }
.form .two { display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media(min-width:620px){ .form .two{ grid-template-columns:1fr 1fr; } }

/* contact aside */
.contact-grid { display:grid; gap:var(--s4); }
@media(min-width:900px){ .contact-grid{ grid-template-columns:1.2fr .8fr; } }
.info-card { background:var(--green); color:var(--on-green); border-radius:12px; padding:1.8rem; }
.info-card h3 { color:var(--on-green); }
.info-card a { color:var(--brass); text-decoration:none; font-weight:600; }
.info-row { display:flex; gap:.8rem; padding:.9rem 0; border-bottom:1px solid oklch(0.70 0.11 80 / .25); }
.info-row:last-child{border-bottom:none}
.info-row .ic { width:22px; height:22px; color:var(--brass); flex:none; margin-top:.2rem; }
.info-row .label { color:var(--brass); display:block; margin-bottom:.15rem; }

/* gallery */
.gal-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.gal-item { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--green-deep); border:1px solid var(--line); }
.gal-item .ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:var(--on-green-soft); text-align:center; padding:1rem; }
.gal-item .ph .label { color:var(--brass); }
.gal-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gal-item:hover img { transform:scale(1.05); }
.gal-cap { position:absolute; left:0; right:0; bottom:0; padding:1.6rem .9rem .8rem; color:var(--on-green);
  background:linear-gradient(transparent, oklch(0.26 0.045 155 / .9)); }
.gal-cap .label { color:var(--brass); display:block; margin-bottom:.1rem; }
.gal-cap b { font-family:var(--display); font-weight:600; font-size:1.02rem; }
.sub-head { margin:var(--s5) 0 var(--s3); }
.sub-head:first-child { margin-top:0; }
.sub-head .rule { display:inline-block; width:40px; height:2px; background:var(--brass); margin-bottom:.7rem; }

/* page intro */
.page-head { background:var(--green-deep); color:var(--on-green); padding-block:var(--s5); }
.page-head h1 { color:var(--on-green); }
.page-head .label { color:var(--brass); }
.page-head p { color:var(--on-green-soft); margin-top:.8rem; font-size:1.1rem; }
.crumb { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-green-soft); margin-bottom:.8rem; }
.crumb a { color:var(--brass); text-decoration:none; }

/* owners */
.owners { display:grid; gap:1.6rem; grid-template-columns:1fr; margin-top:var(--s4); }
@media(min-width:720px){ .owners{ grid-template-columns:1fr 1fr; } }
.owner { background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.owner img { width:100%; height:340px; object-fit:cover; object-position:center 20%; }
.owner .body { padding:1.6rem; }
.owner h3 { margin-bottom:.15rem; }
.owner .role { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep); margin-bottom:.9rem; display:block; }
.owner p { font-size:.97rem; color:var(--ink-soft); }

/* categorised services */
.svc-cat { margin-top:var(--s5); }
.svc-cat:first-child { margin-top:0; }
.svc-cat > .lead { color:var(--ink-soft); margin:.5rem 0 1.1rem; max-width:72ch; }
.svc-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.svc-list span { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.5rem .85rem; font-size:.9rem; color:var(--ink); }
.svc-cat .catimg { width:100%; max-height:260px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); margin:1rem 0 1.3rem; }

/* prose */
.prose p { margin-bottom:1.1rem; }
.prose h2 { margin:var(--s4) 0 .8rem; }

/* ---- footer ---- */
footer.site { background:var(--green-deep); color:var(--on-green-soft); padding-block:var(--s5) var(--s3); margin-top:var(--s6); }
.foot-grid { display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
footer.site h4 { font-family:var(--display); color:var(--on-green); font-size:1.05rem; margin-bottom:.8rem; font-weight:600; }
footer.site a { color:var(--on-green-soft); text-decoration:none; display:block; padding:.25rem 0; }
footer.site a:hover { color:var(--brass); }
.foot-bottom { border-top:1px solid oklch(0.70 0.11 80 / .25); margin-top:var(--s4); padding-top:1.4rem; font-size:.82rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }

/* ---- reveal motion (JS-gated: visible by default if JS/headless) ---- */
.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.js .stagger > * { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > * { opacity:1; transform:none; }
.stagger.in > *:nth-child(2){transition-delay:.06s}
.stagger.in > *:nth-child(3){transition-delay:.12s}
.stagger.in > *:nth-child(4){transition-delay:.18s}
.stagger.in > *:nth-child(5){transition-delay:.24s}
.stagger.in > *:nth-child(6){transition-delay:.30s}

/* mobile nav */
@media(max-width:820px){
  .navtoggle{display:inline-flex}
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--green-deep); padding:.6rem 1.5rem 1.2rem; gap:.2rem; display:none;
    border-bottom:1px solid oklch(0.70 0.11 80 / .35); }
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem .6rem}
  .nav-links .btn{margin-top:.5rem; justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .reveal,.stagger>*{opacity:1!important; transform:none!important; transition:none!important}
  .btn:hover,.svc:hover{transform:none!important}
}