/* Base reset and theme */
:root{
  --bg: #0b0c0e;
  --text: #e9ecf1;
  --muted:#9aa3af;
  --card:#15171a;
  /* Dark theme: brand in logo-like yellow */
  --brand:#facc15; /* yellow-400-ish */
  --brand-ink:#1a1200; /* for outlines/borders on yellow */
  --btn-ink:#171717; /* dark text on bright yellow */
  /* Link color: blueish turquoise */
  --link:#22d3ee; /* cyan-300 */
  --link-hover:#06b6d4; /* cyan-500 */
  --border:#2a2f36;
}
:root.light{
  --bg: #ffffff;
  --text: #0b0c0e;
  --muted:#556070;
  --card:#f6f7f9;
  --brand:#0ea5e9; /* keep blue accent in light mode */
  --brand-ink:#05243b;
  --btn-ink:#ffffff; /* white text on blue button in light mode */
  --link:#0ea5e9; /* turquoise/blue for raw links in light mode */
  --link-hover:#0284c7;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg); color:var(--text);
}
img{max-width:100%; height:auto;}
.container{max-width:1100px; margin-inline:auto; padding: clamp(12px, 3vw, 24px);}
.container a:not(.btn){ color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.container a:not(.btn):hover{ color: var(--link-hover); }
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:var(--brand);color:#000;padding:.5rem .75rem;border-radius:.25rem}

/* Header */
.site-header{border-bottom:1px solid var(--border); position:sticky; top:0; backdrop-filter:saturate(180%) blur(6px); background:color-mix(in oklab, var(--bg), transparent 10%); z-index:10;}
.header-inner{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:700}
.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid var(--text);border-radius:6px}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-toggle{display:none}

/****** Layout ******/
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap: clamp(16px, 4vw, 36px); min-height: 70svh;}
.hero-copy h1{font-size: clamp(28px, 6vw, 56px); margin:0 0 8px}
.logo{filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); max-width:420px; border-radius: 12px}
:root.light .logo{filter: drop-shadow(0 6px 24px rgba(0,0,0,.35))}
:root:not(.light) .logo{
  /* Lighter glow on dark backgrounds */
  filter:
    drop-shadow(0 8px 28px rgba(255,255,255,.14))
    drop-shadow(0 0 14px color-mix(in oklab, var(--brand), transparent 85%));
}
/* Dark-mode: photographic hero background */
:root:not(.light) #home.hero{
  position: relative; /* ensure ::before overlays are positioned */
  overflow: hidden;
  /* background-image: url('/certian.jpg'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Readability overlay above image, below content */
:root:not(.light) #home.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,.15) 0 35%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
/* Keep hero content above overlays */
#home.hero > *{ position: relative; z-index: 1; }
.section{padding-block: clamp(32px, 6vw, 84px)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}

/* Pop styling for service cards */
#services .card.pop{position:relative;overflow:hidden;isolation:isolate;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
#services .card.pop{--pop: color-mix(in oklab, var(--brand), #fff 18%);}
#services .card.pop::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:.12;pointer-events:none;
  background:
    /* diagonal stripes */
    repeating-linear-gradient(45deg, var(--pop) 0 2px, transparent 2px 14px),
    /* subtle dots */
    radial-gradient(circle at 12px 12px, var(--pop) 2px, transparent 3px);
  background-size: auto, 24px 24px;
  mix-blend-mode: normal;
  z-index:-1;
}
#services .card.pop::after{content:"";position:absolute;left:-20%;right:-20%;top:-2px;height:6px;border-top-left-radius:12px;border-top-right-radius:12px;
  background:linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--link), var(--brand) 40%), var(--brand));opacity:.9;filter:saturate(1.1)}
#services .card.pop:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.18);border-color:color-mix(in oklab, var(--brand), var(--border) 50%)}

/* slight variety per position */
#services .grid .card.pop:nth-child(3n)::before{opacity:.14; background-size:auto, 28px 28px}
#services .grid .card.pop:nth-child(3n+2)::before{opacity:.10; background-size:auto, 20px 20px}

@media (prefers-reduced-motion: reduce){
  #services .card.pop{transition:none}
  #services .card.pop:hover{transform:none}
}

/* Card media header (optional) */
#services .card.pop.has-media{padding-top:0}
#services .card.pop .card-media{height:140px;margin:-18px -18px 12px;border-bottom:1px solid var(--border);border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden;position:relative}
#services .card.pop .card-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}

/* Pattern variants */
#services .card.pop .card-media.pattern-stripes{background:
  repeating-linear-gradient(135deg, color-mix(in oklab, var(--brand), #fff 5%) 0 10px, transparent 10px 22px),
  linear-gradient(180deg, color-mix(in oklab, var(--brand), #000 85%), color-mix(in oklab, var(--brand), #000 75%));}

#services .card.pop .card-media.pattern-dots{background:
  radial-gradient(circle at 10px 10px, color-mix(in oklab, var(--brand), #fff 10%) 2px, transparent 3px) 0 0/22px 22px,
  radial-gradient(circle at 0 0, color-mix(in oklab, var(--brand), #fff 6%) 2px, transparent 3px) 11px 11px/22px 22px,
  linear-gradient(180deg, color-mix(in oklab, var(--brand), #000 85%), color-mix(in oklab, var(--brand), #000 75%));}

/* Memphis 90s pattern */
#services .card.pop .card-media.pattern-90s{background:
  /* squiggle */
  radial-gradient(20px 8px at 12% 30%, color-mix(in oklab, var(--link), #fff 10%) 50%, transparent 52%),
  radial-gradient(20px 8px at 18% 36%, color-mix(in oklab, var(--brand), #fff 20%) 50%, transparent 52%),
  /* triangles via conic gradients */
  conic-gradient(from 45deg at 82% 26%, color-mix(in oklab, var(--link), #000 20%) 0 90deg, transparent 90deg 360deg),
  conic-gradient(from -35deg at 72% 70%, color-mix(in oklab, var(--brand), #000 20%) 0 90deg, transparent 90deg 360deg),
  /* base */
  linear-gradient(180deg, color-mix(in oklab, var(--brand), #000 85%), color-mix(in oklab, var(--brand), #000 70%));}

/* Icon section */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.icon-card{display:grid;gap:10px;align-content:start}
.icon-wrap{display:inline-grid;place-items:center;width:96px;height:96px;border-radius:12px;background:color-mix(in oklab, var(--brand), transparent 85%);color:var(--brand);}
.icon-svg{display:block}
.js-draw .icon-svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;}
.icon-card.draw .icon-svg [pathLength]{animation:dash 900ms ease-out forwards;}
@keyframes dash{to{stroke-dashoffset:0}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:.6rem .9rem;border-radius:.6rem;border:1px solid var(--border);color:var(--text);text-decoration:none;background:transparent}
.btn:hover{border-color:color-mix(in oklab, var(--brand), var(--border));}
.btn-primary{background:var(--brand);color:var(--btn-ink);border-color:var(--brand-ink);}
.btn-primary:hover{filter:brightness(1.05)}

/* Heading inline emoji styling */
#services .card h3{display:flex;align-items:center;gap:.5ch;margin-top:4px}
#services .card h3 .emoji{font-size:1.15em;line-height:1;}

/* Form */
.form .field{display:grid;gap:6px;margin-bottom:12px}
.form input,.form textarea{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.6rem .7rem}
.form input:focus,.form textarea:focus{outline:2px solid color-mix(in oklab, var(--brand), #fff 15%)}
.actions{display:flex;gap:10px}

/* Footer */
.site-footer{border-top:1px solid var(--border);}
.site-footer p{margin:0}

/* Small screens */
@media (max-width: 800px){
  .hero{grid-template-columns:1fr}
  .site-nav{display:none}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav-open .site-nav{display:flex;position:absolute;right:12px;top:58px;background:var(--card);border:1px solid var(--border);padding:12px;border-radius:10px}
  /* Ensure hero image doesn’t overflow viewport */
  .logo{width:100%;max-width:100%;height:auto}
  .hero-media{justify-self:center}
}

/* Pins */
.pins-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.pin-search{flex:1 1 260px;max-width:520px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.55rem .7rem}
.pins-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pin{display:grid;gap:8px}
.pin .pin-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.pin .pin-title{margin:0}
.pin .pin-link{color:inherit;text-decoration:none}
.pin .pin-link:hover{color:var(--link)}
.muted{color:var(--muted)}

/* Tag cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);border-radius:999px;
  padding:.28rem .6rem;line-height:1;color:var(--text);
  text-decoration:none;background:transparent;cursor:pointer;
}
.tag[data-selected="true"]{background:color-mix(in oklab, var(--brand), transparent 85%);border-color:color-mix(in oklab, var(--brand), var(--border) 40%)}
.tag .count{color:var(--muted);font-size:.85em}
.h-subtle{font-size:1rem;font-weight:600;color:var(--muted);margin:0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* Screen reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}