/* ============================================================
   COOPER INSTALLATIONS — Squarespace Custom CSS
   ------------------------------------------------------------
   Paste this entire file into:
     Design  →  Custom CSS

   Every page snippet (see squarespace-handoff/*.html) is wrapped
   in <div class="cooper cooper-{slug}"> so these styles only
   apply to our content and won't fight Squarespace's defaults.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Cooper namespace baseline ---------- */
.cooper {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  color: oklch(0.18 0.01 60);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Shared site.css (prefixed) ---------- */
.cooper {
  --paper:    oklch(0.975 0.006 80);
  --paper-2:  oklch(0.955 0.008 80);
  --paper-3:  oklch(0.93 0.01 75);
  --ink:      oklch(0.18 0.01 60);
  --ink-2:    oklch(0.38 0.01 60);
  --ink-3:    oklch(0.58 0.01 60);
  --rule:     oklch(0.88 0.008 70);
  --rule-2:   oklch(0.82 0.01 70);

  
  --accent:       oklch(0.68 0.19 50);
  --accent-deep:  oklch(0.58 0.18 45);
  --accent-soft:  oklch(0.94 0.05 60);
  --accent-ink:   oklch(0.35 0.12 50);

  --sage:         oklch(0.62 0.05 150);
  --sage-soft:    oklch(0.93 0.03 150);

  --clay:         oklch(0.78 0.06 60);
  --clay-soft:    oklch(0.94 0.03 70);

  --good: oklch(0.55 0.09 150);
  --warn: oklch(0.70 0.12 80);
  --bad:  oklch(0.55 0.14 25);

  --sans:  "Geist", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --container: 1200px;
  --gutter: 28px;
  --radius: 4px;
  --radius-lg: 10px;
}
.cooper *,
.cooper *::before,
.cooper *::after {box-sizing:border-box}
.cooper img,
.cooper svg {display:block;max-width:100%}
.cooper a {color:inherit;text-decoration:none}
.cooper button {font:inherit;cursor:pointer}
.cooper .container {max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.cooper .section {padding:88px 0}
.cooper .section-sm {padding:56px 0}
.cooper .section-lg {padding:120px 0}
@media (max-width: 720px) {
.cooper .section {padding:56px 0}
.cooper .section-lg {padding:72px 0}
.cooper {--gutter: 20px}

}
.cooper .rule {height:1px;background:var(--rule);border:0;margin:0}
.cooper .rule-ink {height:1px;background:var(--ink);border:0;margin:0}
.cooper .eyebrow {font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.cooper .eyebrow .dot {display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:10px;transform:translateY(-2px)}
.cooper h1.display,
.cooper h2.display,
.cooper h3.display {font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;line-height:1.05;margin:0}
.cooper h1.display {font-size:clamp(48px, 7vw, 92px)}
.cooper h2.display {font-size:clamp(36px, 5vw, 64px)}
.cooper h3.display {font-size:clamp(28px, 3.4vw, 42px)}
.cooper .display em {font-style:italic;color:var(--accent)}
.cooper h2.section-title {font-family:var(--serif);font-weight:400;font-size:clamp(32px, 4.5vw, 56px);line-height:1.08;letter-spacing:-0.01em;margin:0 0 12px}
.cooper h2.section-title em {font-style:italic;color:var(--accent)}
.cooper p.lede {font-family:var(--serif);font-size:clamp(20px, 2.2vw, 28px);line-height:1.35;color:var(--ink);margin:0;max-width:28ch}
.cooper p.lede em {font-style:italic;color:var(--accent)}
.cooper p {margin:0 0 1em}
.cooper .muted {color:var(--ink-2)}
.cooper .muted-2 {color:var(--ink-3)}
.cooper .max-prose {max-width:62ch}
.cooper .site-header {position:sticky;top:0;z-index:50;background:color-mix(in oklch, var(--paper) 92%, transparent);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.cooper .site-header .bar {display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.cooper .brand {display:flex;align-items:center;gap:12px}
.cooper .brand img.brand-logo {height:38px;width:auto;display:block}
@media (max-width: 720px) {
.cooper .brand img.brand-logo {height:32px}

}
.cooper .brand .tagline {font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);padding-left:14px;border-left:1px solid var(--rule);line-height:1.4;max-width:160px}
@media (max-width: 1020px) {
.cooper .brand .tagline {display:none}

}
.cooper .nav {display:flex;align-items:center;gap:28px}
.cooper .nav a.nav-link {font-size:14px;color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent;transition:color .18s, border-color .18s}
.cooper .nav a.nav-link:hover {color:var(--ink);border-bottom-color:var(--accent)}
.cooper .nav a.nav-link.active {color:var(--ink);border-bottom-color:var(--ink)}
/* Active-nav highlight driven by the body wrapper class (.cooper-{slug}),
   so the SSI-included header (apps/web/public/partials/header.html) can
   stay byte-identical across every page. Home has no matching nav link. */
.cooper-commercial .nav a.nav-link[href="/commercial"],
.cooper-services   .nav a.nav-link[href="/services"],
.cooper-install-day .nav a.nav-link[href="/install-day"],
.cooper-faq        .nav a.nav-link[href="/faq"],
.cooper-portal     .nav a.nav-link[href*="portal"],
.cooper-about      .nav a.nav-link[href="/about"],
.cooper-contact    .nav a.nav-link[href="/contact"] {color:var(--ink);border-bottom-color:var(--ink)}
.cooper .header-actions {display:flex;align-items:center;gap:14px}
.cooper .phone-link {display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.cooper .phone-link:hover {color:var(--accent)}
.cooper .phone-link svg {width:14px;height:14px}
.cooper .btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;font-size:14px;font-weight:500;letter-spacing:0.01em;border-radius:var(--radius);border:1px solid transparent;transition:background .15s, color .15s, border-color .15s, transform .05s}
.cooper .btn:active {transform:translateY(1px)}
.cooper .btn-primary {background:var(--accent);color:#fff;border-color:var(--accent)}
.cooper .btn-primary:hover {background:var(--accent-deep);border-color:var(--accent-deep)}
.cooper .btn-ink {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cooper .btn-ink:hover {background:#000}
.cooper .btn-ghost {background:transparent;color:var(--ink);border-color:var(--rule-2)}
.cooper .btn-ghost:hover {border-color:var(--ink);background:var(--paper-2)}
.cooper .btn-lg {padding:16px 26px;font-size:15px}
.cooper .btn .arr {width:14px;height:14px;transition:transform .2s}
.cooper .btn:hover .arr {transform:translateX(3px)}
@media (max-width: 860px) {
.cooper .nav {display:none}
.cooper .phone-link {display:none}
.cooper .site-header .bar {height:60px}

}
.cooper .mobile-actions {display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--paper);border-top:1px solid var(--rule);padding:10px 16px;gap:10px}
.cooper .mobile-actions .btn {flex:1}
@media (max-width: 720px) {
.cooper .mobile-actions {display:flex}

}
.cooper .site-footer {background:var(--ink);color:var(--paper);padding:80px 0 32px;margin-top:80px}
.cooper .site-footer a {color:var(--paper)}
.cooper .site-footer .foot-grid {display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid oklch(0.28 0.01 60)}
.cooper .site-footer .col h4 {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:oklch(0.7 0.01 60);font-weight:500;margin:0 0 16px}
.cooper .site-footer .col ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:oklch(0.85 0.005 60)}
.cooper .site-footer .col ul a:hover {color:var(--accent)}
.cooper .site-footer .brand-col p {color:oklch(0.75 0.005 60);font-size:14px;max-width:36ch}
.cooper .site-footer .brand-col .brand-logo-wrap {display:inline-block;background:var(--paper);padding:14px 18px;border-radius:var(--radius-lg)}
.cooper .site-footer .brand-col .brand-logo-wrap img {height:36px;width:auto;display:block}
.cooper .site-footer .states {display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cooper .site-footer .states span {font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border:1px solid oklch(0.32 0.01 60);border-radius:999px;color:oklch(0.85 0.005 60)}
.cooper .site-footer .bottom {display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:oklch(0.6 0.01 60)}
@media (max-width:860px) {
.cooper .site-footer .foot-grid {grid-template-columns:1fr 1fr}

}
@media (max-width:520px) {
.cooper .site-footer .foot-grid {grid-template-columns:1fr}

}
.cooper .card {background:var(--paper);border:1px solid var(--rule);padding:28px;border-radius:var(--radius-lg)}
.cooper .card-dark {background:var(--ink);color:var(--paper);border:none;padding:28px;border-radius:var(--radius-lg)}
.cooper .card-accent {background:var(--accent-soft);border:1px solid color-mix(in oklch, var(--accent) 30%, var(--rule));padding:28px;border-radius:var(--radius-lg)}
.cooper .tag {display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--rule-2);border-radius:999px;color:var(--ink-2);background:var(--paper)}
.cooper .tag.solid {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cooper .tag.accent {background:var(--accent-soft);border-color:color-mix(in oklch, var(--accent) 30%, var(--rule));color:var(--accent-ink)}
.cooper .stat .n {font-family:var(--serif);font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-0.015em}
.cooper .stat .lbl {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.cooper .grid {display:grid}
.cooper .gap-8 {gap:8px}
.cooper .gap-12 {gap:12px}
.cooper .gap-16 {gap:16px}
.cooper .gap-24 {gap:24px}
.cooper .gap-32 {gap:32px}
.cooper .gap-48 {gap:48px}
.cooper .flex {display:flex}
.cooper .flex-wrap {flex-wrap:wrap}
.cooper .items-center {align-items:center}
.cooper .items-end {align-items:flex-end}
.cooper .justify-between {justify-content:space-between}
.cooper .text-center {text-align:center}
.cooper .mt-8 {margin-top:8px}
.cooper .mt-16 {margin-top:16px}
.cooper .mt-24 {margin-top:24px}
.cooper .mt-32 {margin-top:32px}
.cooper .mt-48 {margin-top:48px}
.cooper .mt-64 {margin-top:64px}
.cooper .mb-8 {margin-bottom:8px}
.cooper .mb-16 {margin-bottom:16px}
.cooper .mb-24 {margin-bottom:24px}
.cooper .mb-32 {margin-bottom:32px}
.cooper .mb-48 {margin-bottom:48px}
.cooper ::selection {background:var(--accent);color:#fff}
.cooper :focus-visible {outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ============================================================
   Page-specific styles (prefixed)
   ============================================================ */

/* ============================================================
   Page: home
   ============================================================ */
.cooper .hero {padding:64px 0 56px;position:relative;overflow:hidden}
.cooper .hero .grid {display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;max-width:1200px}
@media (max-width: 900px) {
.cooper .hero .grid {grid-template-columns:1fr;gap:40px}

}
.cooper .hd-badge {display:inline-flex;align-items:center;gap:12px;padding:8px 14px;background:var(--paper);border:1px solid var(--rule-2);border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2)}
.cooper .hd-badge .sq {width:14px;height:14px;background:var(--accent);border-radius:2px;display:inline-block}
.cooper .hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(40px, 5.2vw, 72px);line-height:1.0;letter-spacing:-0.018em;margin:22px 0 0}
.cooper .hero h1 em {font-style:italic;color:var(--accent)}
.cooper .hero .sub {font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.4;color:var(--ink-2);margin:20px 0 0;max-width:42ch}
.cooper .hero .ctas {margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.cooper .hero .meta {margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.cooper .hero .meta > div {padding:14px 14px 14px 0;border-right:1px solid var(--rule)}
.cooper .hero .meta > div:last-child {border-right:none;padding-right:0}
.cooper .hero .meta .n {font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1;letter-spacing:-0.01em}
.cooper .hero .meta .lbl {font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
@media (max-width:720px) {
.cooper .hero .meta {grid-template-columns:1fr 1fr}
.cooper .hero .meta > div:nth-child(2n) {border-right:none}

}
.cooper .hero-photo {width:100%;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:0 1px 0 var(--rule-2), 0 30px 60px -30px oklch(0.3 0.05 40 / 0.3);
    background:var(--paper-2)}
.cooper .hero-photo image-slot {width:100%;height:100%;display:block;border-radius:var(--radius-lg)}
.cooper .hv {aspect-ratio: 4/5;border-radius:var(--radius-lg);position:relative;overflow:hidden;
    background:
      linear-gradient(180deg, oklch(0.78 0.04 60) 0%, oklch(0.62 0.10 50) 100%);
    box-shadow: 0 1px 0 var(--rule-2), 0 30px 60px -30px oklch(0.3 0.05 40 / 0.3)}
.cooper .hv .floor {position:absolute;left:-8%;right:-8%;bottom:0;top:38%;background:
    repeating-linear-gradient(90deg, transparent 0 60px, oklch(0.4 0.04 50 / 0.4) 60px 61px),
    repeating-linear-gradient(0deg, oklch(0.55 0.07 50) 0 40px, oklch(0.50 0.08 45) 40px 42px);
    transform: perspective(900px) rotateX(60deg);transform-origin:center top;border-top:1px solid oklch(0.3 0.06 40 / 0.4)}
.cooper .hv .skyline {position:absolute;left:0;right:0;top:30%;height:1px;background:oklch(0.3 0.05 40 / 0.3)}
.cooper .hv .badge {position:absolute;top:24px;left:24px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:var(--paper);border-radius:999px;box-shadow:0 8px 24px -10px oklch(0.3 0.05 40 / 0.4)}
.cooper .hv .badge .dot {width:8px;height:8px;border-radius:50%;background:var(--good)}
.cooper .hv .badge span {font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink)}
.cooper .hv .stamp {position:absolute;right:20px;bottom:20px;background:var(--ink);color:var(--paper);padding:18px 22px;border-radius:var(--radius-lg);max-width:280px}
.cooper .hv .stamp .k {font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:oklch(0.7 0.01 60)}
.cooper .hv .stamp .v {font-family:var(--serif);font-size:22px;line-height:1.2;margin-top:6px}
.cooper .hv .corner-tag {position:absolute;top:24px;right:24px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;padding:8px 14px;border-radius:2px}
.cooper .focus {background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cooper .focus-cards {grid-template-columns:1.2fr 1fr;gap:20px;margin-top:48px}
@media (max-width: 980px) {
.cooper .focus-cards {grid-template-columns:1fr}

}
.cooper .focus-card {padding:36px;border-radius:var(--radius-lg);position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:420px;transition:transform .25s, box-shadow .25s}
.cooper .focus-card:hover {transform:translateY(-4px);box-shadow:0 30px 60px -30px oklch(0.3 0.05 40 / 0.3)}
.cooper .focus-card.feature {background:var(--ink);color:var(--paper);min-height:480px}
.cooper .focus-card.feature .k {color:var(--accent)}
.cooper .focus-card.standard {background:var(--paper);border:1px solid var(--rule)}
.cooper .focus-card .k {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.cooper .focus-card h3 {font-family:var(--serif);font-size:38px;line-height:1.05;letter-spacing:-0.01em;margin:12px 0 14px;font-weight:400}
.cooper .focus-card.feature h3 {font-size:46px}
.cooper .focus-card h3 em {font-style:italic;color:var(--accent)}
.cooper .focus-card p {margin:0 0 22px;color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:42ch}
.cooper .focus-card.feature p {color:oklch(0.85 0.005 60)}
.cooper .focus-card .features {list-style:none;margin:0 0 28px;padding:0}
.cooper .focus-card .features li {padding:10px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--ink);display:flex;gap:10px;align-items:center}
.cooper .focus-card.feature .features li {border-top-color:oklch(0.3 0.01 60);color:oklch(0.85 0.005 60)}
.cooper .focus-card.feature .features li:last-child {border-bottom:1px solid oklch(0.3 0.01 60)}
.cooper .focus-card.standard .features li:last-child {border-bottom:1px solid var(--rule)}
.cooper .focus-card .features .tick {width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.cooper .focus-card .cta {margin-top:auto;display:flex;align-items:center;gap:12px}
.cooper .focus-card .corner-num {position:absolute;top:24px;right:28px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--ink-3);opacity:0.5}
.cooper .focus-card.feature .corner-num {color:oklch(0.65 0.01 60)}
.cooper .focus-card.feature .pattern {position:absolute;right:-60px;top:-60px;width:280px;height:280px;background:
    radial-gradient(circle at center, oklch(0.68 0.19 50 / 0.18) 0%, transparent 70%);
    border-radius:50%;pointer-events:none}
.cooper .commercial {padding:120px 0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.cooper .commercial .pattern {position:absolute;right:-180px;top:-180px;width:560px;height:560px;background:
    radial-gradient(circle, oklch(0.68 0.19 50 / 0.25) 0%, transparent 70%);
    border-radius:50%;pointer-events:none}
.cooper .commercial .lead {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
@media (max-width: 900px) {
.cooper .commercial .lead {grid-template-columns:1fr;gap:32px}

}
.cooper .commercial .eyebrow {color:var(--accent)}
.cooper .commercial .eyebrow .dot {background:var(--accent)}
.cooper .commercial h2 {font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.5vw,72px);line-height:1.0;letter-spacing:-0.015em;margin:16px 0 0;color:var(--paper)}
.cooper .commercial h2 em {font-style:italic;color:var(--accent)}
.cooper .commercial .lede {font-family:var(--serif);font-size:22px;line-height:1.4;color:oklch(0.86 0.005 60);margin:24px 0 0;max-width:48ch}
.cooper .commercial p.body {color:oklch(0.78 0.005 60);margin:20px 0 0;max-width:54ch;font-size:15.5px;line-height:1.65}
.cooper .commercial .right {display:flex;flex-direction:column;gap:14px}
.cooper .commercial .stat-row {display:flex;gap:0;border-top:1px solid oklch(0.3 0.01 60);border-bottom:1px solid oklch(0.3 0.01 60)}
.cooper .commercial .stat-row > div {flex:1;padding:24px 24px 24px 0;border-right:1px solid oklch(0.3 0.01 60)}
.cooper .commercial .stat-row > div:last-child {border-right:none}
.cooper .commercial .stat-row .n {font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-0.015em;color:var(--paper)}
.cooper .commercial .stat-row .l {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:oklch(0.65 0.01 60);margin-top:10px}
.cooper .commercial .verticals {margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
@media (max-width:900px) {
.cooper .commercial .verticals {grid-template-columns:1fr 1fr}

}
@media (max-width:520px) {
.cooper .commercial .verticals {grid-template-columns:1fr}

}
.cooper .vert {padding:24px;background:oklch(0.22 0.01 60);border:1px solid oklch(0.3 0.01 60);border-radius:var(--radius-lg)}
.cooper .vert h4 {margin:0 0 6px;font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.2;color:var(--paper)}
.cooper .vert p {margin:0;font-size:13px;color:oklch(0.7 0.01 60);line-height:1.5}
.cooper .vert .num {font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--accent);margin-bottom:10px}
.cooper .commercial .cta-row {margin-top:56px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;position:relative;z-index:1}
.cooper .commercial .cta-row .meta {font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:oklch(0.6 0.01 60);margin-left:auto}
.cooper .services-row {grid-template-columns:repeat(6,1fr);gap:2px;background:var(--rule);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--rule)}
@media (max-width:900px) {
.cooper .services-row {grid-template-columns:repeat(3,1fr)}

}
@media (max-width:520px) {
.cooper .services-row {grid-template-columns:repeat(2,1fr)}

}
.cooper .service-tile {background:var(--paper);padding:28px 20px;transition:background .2s;display:flex;flex-direction:column;gap:16px;min-height:180px}
.cooper .service-tile:hover {background:var(--accent-soft)}
.cooper .service-tile .icon {width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-size:16px}
.cooper .service-tile h4 {margin:0;font-size:16px;font-weight:500}
.cooper .service-tile p {margin:0;font-size:13px;color:var(--ink-3)}
.cooper .reviews {grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media (max-width:900px) {
.cooper .reviews {grid-template-columns:1fr}

}
.cooper .review {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:28px}
.cooper .review .stars {color:var(--accent);letter-spacing:2px;font-size:14px}
.cooper .review blockquote {font-family:var(--serif);font-size:20px;line-height:1.4;margin:14px 0 20px;color:var(--ink)}
.cooper .review .who {font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}
.cooper .trust {background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:48px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px}
@media (max-width:720px) {
.cooper .trust {grid-template-columns:1fr 1fr;padding:32px}

}
.cooper .trust .n {font-family:var(--serif);font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-0.015em}
.cooper .trust .l {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:oklch(0.7 0.01 60);margin-top:8px}
.cooper .final-cta {background:var(--accent);color:#fff;border-radius:var(--radius-lg);padding:64px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
@media (max-width: 820px) {
.cooper .final-cta {grid-template-columns:1fr;padding:40px}

}
.cooper .final-cta h3 {font-family:var(--serif);font-size:clamp(32px,4vw,48px);line-height:1.1;margin:0;font-weight:400;letter-spacing:-0.01em}
.cooper .final-cta .actions {display:flex;gap:12px;flex-wrap:wrap}
.cooper .final-cta .btn-white {background:#fff;color:var(--accent);border-color:#fff}
.cooper .final-cta .btn-white:hover {background:oklch(0.97 0.01 80)}
.cooper .final-cta .btn-outline {background:transparent;color:#fff;border-color:#fff}
.cooper .final-cta .btn-outline:hover {background:rgba(255,255,255,0.1)}


/* ============================================================
   Page: commercial
   ============================================================ */
.cooper .c-hero {background:var(--ink);color:var(--paper);padding:88px 0 96px;position:relative;overflow:hidden}
.cooper .c-hero .pattern {position:absolute;right:-200px;top:-200px;width:600px;height:600px;
    background:radial-gradient(circle, oklch(0.68 0.19 50 / 0.22) 0%, transparent 70%);
    border-radius:50%;pointer-events:none}
.cooper .c-hero .pattern2 {position:absolute;left:-160px;bottom:-200px;width:480px;height:480px;
    background:radial-gradient(circle, oklch(0.68 0.19 50 / 0.10) 0%, transparent 70%);
    border-radius:50%;pointer-events:none}
.cooper .c-hero .inner {position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end}
@media (max-width:980px) {
.cooper .c-hero .inner {grid-template-columns:1fr;gap:40px}

}
.cooper .c-hero .eyebrow {color:var(--accent)}
.cooper .c-hero .eyebrow .dot {background:var(--accent)}
.cooper .c-hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(56px,8vw,116px);line-height:0.96;letter-spacing:-0.018em;margin:24px 0 0;color:var(--paper)}
.cooper .c-hero h1 em {font-style:italic;color:var(--accent)}
.cooper .c-hero .lede {font-family:var(--serif);font-size:24px;line-height:1.35;color:oklch(0.85 0.005 60);margin:24px 0 0;max-width:48ch}
.cooper .c-hero p.body {color:oklch(0.78 0.005 60);margin:18px 0 0;max-width:54ch;font-size:15.5px}
.cooper .c-hero .ctas {margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.cooper .c-hero .meta-strip {margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid oklch(0.3 0.01 60);border-bottom:1px solid oklch(0.3 0.01 60)}
.cooper .c-hero .meta-strip > div {padding:22px 20px 22px 0;border-right:1px solid oklch(0.3 0.01 60)}
.cooper .c-hero .meta-strip > div:last-child {border-right:none}
.cooper .c-hero .meta-strip .n {font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-0.015em;color:var(--paper)}
.cooper .c-hero .meta-strip .l {font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:oklch(0.65 0.01 60);margin-top:10px}
@media (max-width:720px) {
.cooper .c-hero .meta-strip {grid-template-columns:1fr 1fr}
.cooper .c-hero .meta-strip > div:nth-child(2n) {border-right:none}

}
.cooper .c-hero .panel {background:oklch(0.22 0.01 60);border:1px solid oklch(0.3 0.01 60);border-radius:var(--radius-lg);padding:32px}
.cooper .c-hero .panel h3 {font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.15;margin:0 0 8px;color:var(--paper)}
.cooper .c-hero .panel .p-eyebrow {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cooper .c-hero .panel ul {list-style:none;margin:18px 0 24px;padding:0}
.cooper .c-hero .panel ul li {padding:10px 0;border-top:1px solid oklch(0.3 0.01 60);color:oklch(0.85 0.005 60);font-size:14px;display:flex;gap:10px;align-items:center}
.cooper .c-hero .panel ul li:last-child {border-bottom:1px solid oklch(0.3 0.01 60)}
.cooper .c-hero .panel ul li::before {content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0}
.cooper .c-hero .panel .btn {width:100%}
.cooper .partner {background:var(--paper-2);border-bottom:1px solid var(--rule);padding:32px 0}
.cooper .partner .inner {display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.cooper .partner .l {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.cooper .partner .hd {display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:22px;color:var(--ink)}
.cooper .partner .hd .sq {width:24px;height:24px;background:var(--accent);border-radius:3px;display:inline-block}
.cooper .partner .x {font-family:var(--serif);font-size:22px;color:var(--ink-3);font-style:italic}
.cooper .sec-head {margin-bottom:48px}
.cooper .sec-head h2 {font-family:var(--serif);font-weight:400;font-size:clamp(36px,5vw,64px);line-height:1.0;letter-spacing:-0.015em;margin:14px 0 8px}
.cooper .sec-head h2 em {font-style:italic;color:var(--accent)}
.cooper .verticals-lg {grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px) {
.cooper .verticals-lg {grid-template-columns:1fr}

}
.cooper .vlg {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:36px;position:relative;overflow:hidden}
.cooper .vlg .num {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent)}
.cooper .vlg h3 {font-family:var(--serif);font-size:32px;line-height:1.1;margin:10px 0 12px;font-weight:400;letter-spacing:-0.005em}
.cooper .vlg .lede {color:var(--ink-2);font-size:16px;margin:0 0 20px;line-height:1.55}
.cooper .vlg ul {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
@media (max-width:520px) {
.cooper .vlg ul {grid-template-columns:1fr}

}
.cooper .vlg ul li {padding:6px 0;font-size:13.5px;color:var(--ink);display:flex;gap:8px;align-items:center}
.cooper .vlg ul li::before {content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;flex-shrink:0}
.cooper .vlg .badge {position:absolute;top:24px;right:24px;background:var(--paper-2);font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:var(--ink-3)}
.cooper .proc {grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
@media (max-width:900px) {
.cooper .proc {grid-template-columns:1fr 1fr}

}
@media (max-width:520px) {
.cooper .proc {grid-template-columns:1fr}

}
.cooper .proc > div {padding:32px 24px 32px 0;border-right:1px solid var(--rule)}
.cooper .proc > div:last-child {border-right:none;padding-right:0}
.cooper .proc .n {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent)}
.cooper .proc h4 {font-family:var(--serif);font-size:24px;font-weight:400;margin:12px 0 8px;line-height:1.2}
.cooper .proc p {margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.cooper .mats {grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px) {
.cooper .mats {grid-template-columns:1fr 1fr}

}
.cooper .mat {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px;min-height:180px}
.cooper .mat .swatch {height:48px;border-radius:var(--radius);border:1px solid var(--rule)}
.cooper .mat h5 {margin:0;font-size:16px;font-weight:500}
.cooper .mat p {margin:0;font-size:13px;color:var(--ink-3);line-height:1.5}
.cooper .sw-lvt {background:linear-gradient(90deg, oklch(0.5 0.04 60) 0%, oklch(0.6 0.05 55) 100%)}
.cooper .sw-sheet {background:oklch(0.6 0.03 200)}
.cooper .sw-carp {background:repeating-linear-gradient(45deg, oklch(0.5 0.03 240) 0 4px, oklch(0.45 0.03 240) 4px 6px)}
.cooper .sw-rubber {background:oklch(0.3 0.01 60)}
.cooper .sw-poly {background:linear-gradient(90deg, oklch(0.65 0.05 80) 0%, oklch(0.55 0.06 70) 100%)}
.cooper .sw-tile {background:repeating-linear-gradient(45deg, oklch(0.88 0.01 70) 0 16px, oklch(0.78 0.015 70) 16px 32px)}
.cooper .sw-wd {background:repeating-linear-gradient(0deg, oklch(0.42 0.04 55) 0 8px, oklch(0.48 0.05 50) 8px 10px)}
.cooper .sw-static {background:linear-gradient(90deg, oklch(0.4 0.03 220) 0%, oklch(0.5 0.04 210) 100%)}
.cooper .quote-block {background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:64px;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
@media (max-width:820px) {
.cooper .quote-block {grid-template-columns:1fr;padding:40px}

}
.cooper .quote-block .q {font-family:var(--serif);font-size:96px;line-height:1;color:var(--accent)}
.cooper .quote-block blockquote {font-family:var(--serif);font-size:clamp(24px,3vw,32px);line-height:1.35;margin:0 0 24px;color:var(--paper);font-weight:400}
.cooper .quote-block .who {font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:oklch(0.7 0.01 60)}
.cooper .quote-block .who b {color:var(--paper);font-weight:500}
.cooper .quote-cta {padding:96px 0;background:var(--accent);color:#fff}
.cooper .quote-cta .wrap {display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
@media (max-width:900px) {
.cooper .quote-cta .wrap {grid-template-columns:1fr}

}
.cooper .quote-cta h2 {font-family:var(--serif);font-size:clamp(40px,5vw,64px);line-height:1.0;margin:0;font-weight:400;letter-spacing:-0.015em;color:#fff}
.cooper .quote-cta p {color:oklch(0.95 0.04 50);font-size:17px;margin-top:16px;max-width:48ch}
.cooper .quote-cta .actions {display:flex;flex-direction:column;gap:14px}
.cooper .quote-cta .actions .btn {justify-content:flex-start;background:#fff;color:var(--accent);border-color:#fff;font-size:16px;padding:18px 22px}
.cooper .quote-cta .actions .btn:hover {background:oklch(0.97 0.01 80)}
.cooper .quote-cta .actions .btn .l {display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;font-weight:500}
.cooper .quote-cta .actions .btn .v {font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:400;letter-spacing:-0.005em}


/* ============================================================
   Page: services
   ============================================================ */
.cooper .page-hero {padding:64px 0 48px;border-bottom:1px solid var(--rule)}
.cooper .page-hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.5vw,88px);line-height:1.0;letter-spacing:-0.015em;margin:16px 0 0}
.cooper .page-hero h1 em {font-style:italic;color:var(--accent)}
.cooper .svc {display:grid;grid-template-columns:320px 1fr;gap:60px;padding:72px 0;border-bottom:1px solid var(--rule);align-items:start}
.cooper .svc:last-child {border-bottom:none}
@media (max-width:820px) {
.cooper .svc {grid-template-columns:1fr;gap:24px}

}
.cooper .svc .art {aspect-ratio:1;border-radius:var(--radius-lg);position:relative;overflow:hidden;border:1px solid var(--rule)}
.cooper .svc .art image-slot {position:absolute;inset:0;width:100%;height:100%;display:block}
.cooper .svc .art .label {position:absolute;left:18px;bottom:18px;background:var(--paper);padding:8px 14px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;z-index:2}
.cooper .svc .num {font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.cooper .svc h2 {font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-0.01em;margin:10px 0 14px}
.cooper .svc h2 em {font-style:italic;color:var(--accent)}
.cooper .svc .lede {font-family:var(--serif);font-size:22px;line-height:1.3;margin:0 0 24px;max-width:50ch;color:var(--ink-2)}
.cooper .svc .two {display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}
@media (max-width:640px) {
.cooper .svc .two {grid-template-columns:1fr}

}
.cooper .svc h4 {margin:0 0 10px;font-size:12px;font-family:var(--mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.cooper .svc ul {margin:0;padding-left:18px;color:var(--ink);font-size:15px}
.cooper .svc ul li {margin-bottom:8px}
.cooper .svc .specs {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cooper .art-carpet {background:
    repeating-linear-gradient(0deg, oklch(0.82 0.04 60) 0 2px, oklch(0.78 0.05 60) 2px 4px),
    repeating-linear-gradient(90deg, transparent 0 1px, oklch(0.72 0.05 60 / 0.3) 1px 2px),
    oklch(0.82 0.04 60)}
.cooper .art-laminate {background:
    linear-gradient(180deg, oklch(0.75 0.05 70) 0%, oklch(0.65 0.06 60) 100%);
    background-size: 100% 33%}
.cooper .art-laminate::before,
.cooper .art-laminate::after {content:"";position:absolute;left:0;right:0;height:1px;background:oklch(0.4 0.05 50 / 0.3)}
.cooper .art-laminate::before {top:33%}
.cooper .art-laminate::after {top:66%}
.cooper .art-lvp {background:
    linear-gradient(90deg, oklch(0.45 0.03 60) 0%, oklch(0.55 0.04 55) 50%, oklch(0.45 0.03 60) 100%);
    background-size: 50% 25%}
.cooper .art-tile {background:
    linear-gradient(45deg, oklch(0.88 0.01 70) 25%, transparent 25%, transparent 75%, oklch(0.88 0.01 70) 75%),
    linear-gradient(45deg, oklch(0.88 0.01 70) 25%, oklch(0.78 0.015 70) 25%, oklch(0.78 0.015 70) 75%, oklch(0.88 0.01 70) 75%);
    background-size:40px 40px;background-position:0 0, 20px 20px}
.cooper .art-hardwood {background:
    repeating-linear-gradient(0deg, oklch(0.42 0.04 55) 0 40px, oklch(0.48 0.05 50) 40px 42px, oklch(0.42 0.04 55) 42px 84px);
    position:relative}
.cooper .art-hardwood::before {content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 80px, oklch(0.3 0.04 50 / 0.4) 80px 81px)}
.cooper .art-stair {background:
    linear-gradient(180deg, oklch(0.7 0.06 40) 0%, oklch(0.6 0.08 35) 100%);
    position:relative}
.cooper .art-stair::before {content:"";position:absolute;inset:0;background:
    repeating-linear-gradient(0deg, transparent 0 60px, oklch(0.3 0.05 30 / 0.4) 60px 62px)}
.cooper .bottom-band {background:var(--paper-2);border-top:1px solid var(--rule);padding:72px 0}
.cooper .bottom-band h3 {font-family:var(--serif);font-size:clamp(32px,4vw,48px);font-weight:400;margin:0;line-height:1.1}
.cooper .bottom-band h3 em {font-style:italic;color:var(--accent)}


/* ============================================================
   Page: install-day
   ============================================================ */
.cooper .page-hero {padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.cooper .page-hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.5vw,88px);line-height:1.0;letter-spacing:-0.015em;margin:16px 0 0}
.cooper .page-hero h1 em {font-style:italic;color:var(--accent)}
.cooper .page-hero .kpis {display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.cooper .page-hero .kpis > div {padding:20px 20px 20px 0;border-right:1px solid var(--rule)}
.cooper .page-hero .kpis > div:last-child {border-right:none}
@media (max-width:720px) {
.cooper .page-hero .kpis {grid-template-columns:1fr 1fr}

}
.cooper .tl {position:relative;padding:40px 0}
.cooper .tl::before {content:"";position:absolute;left:52px;top:0;bottom:0;width:1px;background:var(--rule);z-index:0}
@media (max-width:720px) {
.cooper .tl::before {left:20px}

}
.cooper .phase {display:grid;grid-template-columns:120px 1fr;gap:32px;padding:40px 0;position:relative;z-index:1}
@media (max-width:720px) {
.cooper .phase {grid-template-columns:56px 1fr;gap:20px}

}
.cooper .phase .n {position:relative}
.cooper .phase .n .dot {width:24px;height:24px;background:var(--paper);border:2px solid var(--ink);border-radius:50%;position:absolute;left:40px;top:6px}
.cooper .phase.active .n .dot {background:var(--accent);border-color:var(--accent)}
@media (max-width:720px) {
.cooper .phase .n .dot {left:8px}

}
.cooper .phase .n .num {font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--ink-3);padding-left:80px}
@media (max-width:720px) {
.cooper .phase .n .num {padding-left:34px}

}
.cooper .phase .body h2 {font-family:var(--serif);font-size:clamp(28px,3.2vw,44px);font-weight:400;line-height:1.1;letter-spacing:-0.01em;margin:0 0 8px}
.cooper .phase .body h2 em {font-style:italic;color:var(--accent)}
.cooper .phase .body .lede {color:var(--ink-2);max-width:58ch;font-size:17px;margin:0 0 24px}
.cooper .phase .body .details {background:var(--paper-2);border-left:3px solid var(--accent);padding:20px 24px;margin:16px 0;border-radius:0 var(--radius) var(--radius) 0}
.cooper .phase .body .details h4 {margin:0 0 10px;font-size:13px;font-family:var(--mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.cooper .phase .body .details ul {margin:0;padding-left:18px;color:var(--ink);font-size:15px}
.cooper .phase .body .details ul li {margin-bottom:6px}
.cooper .phase .body .meta {display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}
.cooper .phase .body .meta b {color:var(--ink);font-weight:500}
.cooper .checklist {background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:48px;margin:60px 0}
.cooper .checklist h3 {font-family:var(--serif);font-size:36px;margin:0 0 24px;font-weight:400}
.cooper .checklist .grid {grid-template-columns:1fr 1fr;gap:16px 32px}
@media (max-width:720px) {
.cooper .checklist .grid {grid-template-columns:1fr}

}
.cooper .checklist li {list-style:none;padding:10px 0;border-bottom:1px solid oklch(0.3 0.01 60);color:oklch(0.88 0.005 60);display:flex;gap:12px;align-items:flex-start}
.cooper .checklist li::before {content:"□";color:var(--accent);font-size:18px;line-height:1.2}


/* ============================================================
   Page: faq
   ============================================================ */
.cooper .page-hero {padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.cooper .page-hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.5vw,88px);line-height:1.0;letter-spacing:-0.015em;margin:16px 0 0}
.cooper .page-hero h1 em {font-style:italic;color:var(--accent)}
.cooper .tabs {display:flex;gap:6px;border-bottom:1px solid var(--rule);margin-top:48px;flex-wrap:wrap}
.cooper .tab {padding:14px 22px;font-size:14px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--ink-3);font-family:var(--sans);font-weight:500;transition:color .15s, border-color .15s}
.cooper .tab:hover {color:var(--ink)}
.cooper .tab.active {color:var(--ink);border-bottom-color:var(--accent)}
.cooper .tab .count {font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:6px}
.cooper .tab.active .count {color:var(--accent)}
.cooper .panel {display:none;padding:40px 0}
.cooper .panel.active {display:block}
.cooper details {border-bottom:1px solid var(--rule);padding:24px 0}
.cooper details:first-child {border-top:1px solid var(--rule)}
.cooper summary {list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;font-family:var(--serif);font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-0.005em;color:var(--ink)}
.cooper summary::-webkit-details-marker {display:none}
.cooper summary .ic {width:28px;height:28px;border:1px solid var(--rule-2);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:transform .2s, border-color .2s, background .2s}
.cooper summary .ic::before {content:"";width:10px;height:1px;background:var(--ink)}
.cooper summary .ic::after {content:"";width:1px;height:10px;background:var(--ink);position:absolute;transition:transform .2s, opacity .2s}
.cooper summary {position:relative}
.cooper details[open] summary .ic {background:var(--accent);border-color:var(--accent)}
.cooper details[open] summary .ic::before {background:#fff}
.cooper details[open] summary .ic::after {opacity:0}
.cooper details .a {padding-top:14px;color:var(--ink-2);max-width:68ch;font-size:16px;line-height:1.6}
.cooper details .a p {margin:0 0 1em}
.cooper details .a p:last-child {margin-bottom:0}
.cooper .quick {background:var(--accent-soft);border:1px solid color-mix(in oklch, var(--accent) 30%, var(--rule));padding:32px 40px;border-radius:var(--radius-lg);margin-top:48px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media (max-width:640px) {
.cooper .quick {grid-template-columns:1fr;padding:24px}

}
.cooper .quick h3 {font-family:var(--serif);font-size:28px;line-height:1.15;margin:0;font-weight:400;color:var(--accent-ink)}


/* ============================================================
   Page: portal
   ============================================================ */
.cooper .portal {padding:80px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;min-height:calc(100vh - 68px - 80px)}
@media (max-width:900px) {
.cooper .portal {grid-template-columns:1fr;padding:48px 0;gap:32px}

}
.cooper .portal h1 {font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,72px);line-height:1.0;letter-spacing:-0.015em;margin:16px 0 0}
.cooper .portal h1 em {font-style:italic;color:var(--accent)}
.cooper .portal .feats {list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:0}
.cooper .portal .feats li {padding:14px 0;border-top:1px solid var(--rule);font-size:15px;display:flex;gap:14px;align-items:center}
.cooper .portal .feats li:last-child {border-bottom:1px solid var(--rule)}
.cooper .portal .feats .ic {width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.cooper .login-card {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:40px;box-shadow:0 30px 60px -40px oklch(0.3 0.05 40 / 0.25)}
.cooper .login-card h2 {font-family:var(--serif);font-size:32px;font-weight:400;margin:0 0 8px;letter-spacing:-0.005em}
.cooper .login-card p.sub {color:var(--ink-2);margin:0 0 24px;font-size:14px}
.cooper .field {margin-bottom:16px}
.cooper .field label {display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.cooper .field input {width:100%;padding:14px 16px;border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--paper);font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s}
.cooper .field input:focus {border-color:var(--accent);outline:none}
.cooper .login-card .btn-primary {width:100%;padding:15px;font-size:15px}
.cooper .login-card .divider {display:flex;align-items:center;gap:14px;margin:28px 0;color:var(--ink-3);font-size:12px;letter-spacing:0.05em}
.cooper .login-card .divider::before,
.cooper .login-card .divider::after {content:"";flex:1;height:1px;background:var(--rule)}
.cooper .login-card .alt {display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-top:20px}
.cooper .login-card .alt a {color:var(--accent);border-bottom:1px solid currentColor}
.cooper .preview-dash {background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:28px;margin-top:24px}
.cooper .preview-dash .lbl {font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.cooper .preview-dash .job {display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.cooper .preview-dash .job .t {font-family:var(--serif);font-size:20px}
.cooper .preview-dash .job .st {font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--good)}
.cooper .preview-dash .steps {display:flex;justify-content:space-between;margin-top:20px;gap:4px}
.cooper .preview-dash .steps .s {flex:1;text-align:center}
.cooper .preview-dash .steps .s .bar {height:4px;background:var(--rule);border-radius:2px;margin-bottom:8px}
.cooper .preview-dash .steps .s.done .bar {background:var(--accent)}
.cooper .preview-dash .steps .s .k {font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}
.cooper .preview-dash .steps .s.done .k {color:var(--accent)}


/* ============================================================
   Page: about
   ============================================================ */
.cooper .page-hero {padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.cooper .page-hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(52px,7vw,108px);line-height:0.98;letter-spacing:-0.015em;margin:16px 0 0}
.cooper .page-hero h1 em {font-style:italic;color:var(--accent)}
.cooper .story {padding:80px 0;display:grid;grid-template-columns:200px 1fr;gap:48px}
@media (max-width:720px) {
.cooper .story {grid-template-columns:1fr;gap:16px}

}
.cooper .story h2 {margin:0;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding-top:8px}
.cooper .story .body {max-width:62ch;font-size:18px;line-height:1.7;color:var(--ink)}
.cooper .story .body p {margin:0 0 1.2em}
.cooper .story .body p:first-child::first-letter {font-family:var(--serif);font-size:5em;float:left;line-height:0.9;padding-right:14px;padding-top:6px;color:var(--accent)}
.cooper .timeline {background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:72px 0}
.cooper .tl-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:0}
@media (max-width:900px) {
.cooper .tl-grid {grid-template-columns:1fr 1fr}

}
@media (max-width:520px) {
.cooper .tl-grid {grid-template-columns:1fr}

}
.cooper .tl-grid > div {padding:28px 24px;border-right:1px solid var(--rule);position:relative}
.cooper .tl-grid > div:last-child {border-right:none}
.cooper .tl-grid .yr {font-family:var(--serif);font-size:36px;line-height:1;color:var(--accent);margin-bottom:12px}
.cooper .tl-grid h4 {margin:0 0 6px;font-size:15px;font-weight:500}
.cooper .tl-grid p {margin:0;font-size:13px;color:var(--ink-3)}
.cooper .leaders {grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
@media (max-width:820px) {
.cooper .leaders {grid-template-columns:1fr}

}
.cooper .leader {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:28px}
.cooper .leader .face {aspect-ratio:4/3;border-radius:var(--radius);margin-bottom:20px;
    background:linear-gradient(135deg, var(--clay-soft) 0%, var(--accent-soft) 100%);
    display:grid;place-items:center;font-family:var(--serif);font-size:64px;color:var(--accent);letter-spacing:-0.02em}
.cooper .leader h4 {margin:0 0 4px;font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-0.005em}
.cooper .leader .title {font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.cooper .leader p {margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.cooper .values {grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;margin-top:40px}
@media (max-width:820px) {
.cooper .values {grid-template-columns:1fr}

}
.cooper .value {padding:36px;border-right:1px solid var(--rule)}
.cooper .value:last-child {border-right:none}
.cooper .value .n {font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--accent)}
.cooper .value h3 {font-family:var(--serif);font-size:28px;font-weight:400;margin:8px 0 10px;line-height:1.15}
.cooper .value p {margin:0;color:var(--ink-2);font-size:14.5px}
@media (max-width:820px) {
.cooper .values .value {border-right:none;border-bottom:1px solid var(--rule)}
.cooper .values .value:last-child {border-bottom:none}

}


/* ============================================================
   Page: contact
   ============================================================ */
.cooper .page-hero {padding:64px 0 40px;border-bottom:1px solid var(--rule)}
.cooper .page-hero h1 {font-family:var(--serif);font-weight:400;font-size:clamp(48px,6.5vw,88px);line-height:1.0;letter-spacing:-0.015em;margin:16px 0 0}
.cooper .page-hero h1 em {font-style:italic;color:var(--accent)}
.cooper .lanes {grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media (max-width:900px) {
.cooper .lanes {grid-template-columns:1fr}

}
.cooper .lane {padding:32px;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column;gap:16px}
.cooper .lane.primary {background:var(--accent);color:#fff;border-color:var(--accent)}
.cooper .lane.primary .k {color:oklch(0.96 0.02 40)}
.cooper .lane .k {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.cooper .lane h3 {font-family:var(--serif);font-size:28px;font-weight:400;margin:0;line-height:1.1}
.cooper .lane p {margin:0;font-size:14px;color:var(--ink-2)}
.cooper .lane.primary p {color:oklch(0.96 0.02 40)}
.cooper .lane .num {font-family:var(--serif);font-size:32px;letter-spacing:-0.01em}
.cooper .lane .actions {margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.cooper .lane.primary .btn {background:#fff;color:var(--accent);border-color:#fff}
.cooper .lane.primary .btn:hover {background:oklch(0.97 0.01 80)}
.cooper .form-section {padding:80px 0;background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cooper .form-wrap {display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:820px) {
.cooper .form-wrap {grid-template-columns:1fr}

}
.cooper .form-wrap h2 {font-family:var(--serif);font-size:clamp(32px,4vw,52px);font-weight:400;line-height:1.1;margin:0 0 12px}
.cooper .form-wrap h2 em {font-style:italic;color:var(--accent)}
.cooper .form {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:32px}
.cooper .form .row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px) {
.cooper .form .row {grid-template-columns:1fr}

}
.cooper .field {margin-bottom:16px}
.cooper .field label {display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.cooper .field input,
.cooper .field select,
.cooper .field textarea {width:100%;padding:12px 14px;border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--paper);font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s}
.cooper .field input:focus,
.cooper .field select:focus,
.cooper .field textarea:focus {border-color:var(--accent);outline:none}
.cooper .field textarea {resize:vertical;min-height:120px}
.cooper .radios {display:flex;gap:8px;flex-wrap:wrap}
.cooper .radio {flex:1;min-width:140px}
.cooper .radio input {position:absolute;opacity:0;pointer-events:none}
.cooper .radio span {display:block;padding:12px 14px;border:1px solid var(--rule-2);border-radius:var(--radius);font-size:13px;text-align:center;cursor:pointer;transition:all .15s}
.cooper .radio input:checked + span {background:var(--accent);color:#fff;border-color:var(--accent)}
.cooper .form button[disabled] {opacity:0.7;cursor:not-allowed}
.cooper .form-status {min-height:20px;margin:8px 0 16px;font-size:14px;color:var(--ink-2)}
.cooper .form-status.is-success {color:oklch(0.46 0.11 145)}
.cooper .form-status.is-error {color:oklch(0.56 0.21 26)}
.cooper .hours {background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:28px;margin-top:24px}
.cooper .hours h4 {font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.cooper .hours ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cooper .hours li {display:flex;justify-content:space-between;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--rule)}
.cooper .hours li:last-child {border-bottom:none}
.cooper .hours li b {font-weight:500}


/* ============================================================
   About-page hero override
   ============================================================ */
.cooper.cooper-about .page-hero h1 {
  font-size: clamp(52px, 7vw, 108px);
}

/* ============================================================
   Hero photo placeholder (home page)
   Replace .hero-photo-placeholder in 01-home.html with a real
   Squarespace Image Block or <img> tag.
   ============================================================ */
.cooper .hero-photo-placeholder,
.cooper .img-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      oklch(0.93 0.01 75) 0 14px,
      oklch(0.955 0.008 80) 14px 28px);
  color: oklch(0.58 0.01 60);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 10px;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}

/* End of Cooper custom CSS */