/* NH Technologies — Full CSS (Copper scheme)
   Fixes in this drop:
   • Tags (Hero + Feature): no borders, copper separators, consistent spacing, scan-friendly type.
   • Tip of the Month: new background image, NO haze overlay, remove borders in the section.
   • Creation Station POP additions integrated (foil headline, shine, lift, shimmer, sticky CTA, grain option).
   • Everything else preserved (header images, nav, cards, certifications, core domains).
*/

/* =========================
   0) Variables / Theme
   ========================= */
:root{
  --slate-900:#0f1f29; --slate-700:#163242;
  --copper-700:#8f4c27; --copper-600:#a85b30; --copper-500:#c2764b; --copper-300:#e3a173;
  --bg:#f6f8fa; --surface:#ffffff; --surface-2:#f8fafc; --line:rgba(15,23,42,.12);
  --text:#0e1921; --muted:#334454; --muted-2:#4a5d6e;
  --shadow-1:0 10px 24px rgba(15,23,42,.10); --shadow-2:0 18px 40px rgba(15,23,42,.12);
  --radius-lg:20px; --radius-md:14px;
  --title:44px; --h2:18px; --lead:16px;

  /* Header background CSS var (default texture) */
  --header-bg: url("/nelson-heard-site/assets/images/iconsandcircuits.png"),
               url("/assets/images/iconsandcircuits.png");

  /* Creation Station dedicated background (direct file paths; fallbacks) */
  --creation-bg: url("https://nelson-heard-site.s3.amazonaws.com/assets/images/creationstationlight.png");
  --creation-header-bg: url("https://nelson-heard-site.s3.amazonaws.com/assets/images/itlongname.png");

  $1
  /* Inline circuits tiling (SVG data URI) to avoid S3 403s */
  --circuit-tiling: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.14)' stroke-width='1'%3E%3Cpath d='M0 40h280M0 80h280M0 120h280M0 160h280M0 200h280M0 240h280'/%3E%3Cpath d='M40 0v280M80 0v280M120 0v280M160 0v280M200 0v280M240 0v280'/%3E%3Ccircle cx='80' cy='80' r='3' fill='rgba(255,255,255,0.2)'/%3E%3Ccircle cx='200' cy='160' r='3' fill='rgba(255,255,255,0.2)'/%3E%3C/g%3E%3C/svg%3E");
  --copper-glow: 0 0 0 1px color-mix(in srgb, var(--copper-500) 55%, transparent),
                 0 10px 28px color-mix(in srgb, var(--copper-500) 24%, transparent),
                 0 2px 0 rgba(0,0,0,.02);
  --shine: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.18) 58%, transparent 100%);
}

/* =========================
   1) Base / Reset
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  /* FIX (only): removed accidental "background:background:" */
  background:
  url("/assets/images/alldaicons.png");

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
svg{height:1em;width:1em;vertical-align:-.2em}
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:3px solid color-mix(in srgb, var(--copper-500) 60%, white);
  outline-offset:3px;
  border-radius:8px;
}
.shell{max-width:1120px;margin:0 auto;padding:32px}

/* Readable surface over photo bg */
.card{background:linear-gradient(180deg,#fff 0%, rgba(246,249,253,.92) 100%)}

/* =========================
   2) Header — var-based bg
   ========================= */
.header{
  display:flex;align-items:center;gap:12px;justify-content:flex-start;
  padding:6px 10px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:var(--radius-lg);
  background-image: var(--header-bg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow:0 8px 22px rgba(15,23,42,.18), inset 0 0 0 1000px rgba(0,0,0,.06);
}
/* Creation Station: make header ~2x taller and layer tiling pattern */
body.page--creation .header,
body[class*="station"] .header{
  min-height: 320px; /* ~2x typical height */
  padding:24px 18px;
  align-items:flex-end; /* content sits on bottom edge like a hero */
  background-image: var(--creation-header-bg), var(--circuit-tiling);

  background-size: cover, 280px, 280px; /* subtle tiling overlay */
  background-repeat: no-repeat, repeat, repeat;
  background-position:center, center, center;
  background-attachment: fixed, scroll, scroll; /* parallax-ish for main */
  box-shadow: 0 22px 50px rgba(15,23,42,.28), inset 0 -80px 120px rgba(0,0,0,.25);
  border-color: color-mix(in srgb, var(--copper-500) 28%, rgba(15,23,42,.18));
}
@media (max-width:720px){
  body.page--creation .header,
  body[class*="station"] .header{ min-height: 220px; padding:18px 14px; }
}
.header .links{
  order:1;margin-right:auto;
  display:flex;gap:10px;row-gap:8px;
  align-items:center;flex-wrap:wrap;
}
.header .brand{order:2;margin-left:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand--logo .brandMark{height:144px;width:auto;display:block}
.brand--logo .brandWord{display:none}
@media (max-width:1080px){.brand--logo .brandMark{height:120px}}
@media (max-width:800px){.brand--logo .brandMark{height:96px}}
@media (max-width:640px){.brand--logo .brandMark{height:72px}}

/* Per-page header images */
body.page--skills, body.page--certifications{
  --header-bg:
  url("/assets/images/bookandcpu.png");
}
body.page--jobs, body.page--career{
  --header-bg:
  url("/assets/images/pcmeetcloud.png");
}
body.page--freelance{
  --header-bg:
  url("/assets/images/building.png");
}
body.page--creation,
body[class*="station"]{
  /* Use Creation Station light image for PAGE background */
  background-image: var(--creation-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Use the long-name art specifically for the HEADER */
  --header-bg: var(--creation-header-bg);
}


/* Broadened selectors to tolerate variant body classes */
body.page--skills .header, body.page--certifications .header, body[class*="skills"] .header{ background-image: var(--header-bg) !important; }
body.page--jobs .header, body.page--career .header, body[class*="job"] .header, body[class*="career"] .header{ background-image: var(--header-bg) !important; }
body.page--freelance .header, body.page--creation .header, body[class*="freelance"] .header, body[class*="creation"] .header, body[class*="station"] .header{ background-image: var(--header-bg) !important; }

/* =========================
   3) Top Nav — square copper with circuits texture
   ========================= */
.links a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:650;text-decoration:none;
  padding:12px 14px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--copper-600) 55%, transparent);
  color:#fff;
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--slate-700) 40%, transparent),
      color-mix(in srgb, var(--copper-500) 60%, transparent)
    ),
    url("/nelson-heard-site/assets/images/circuits.png"),
    url("/assets/images/circuits.png");
  background-size: 200% 200%, cover, cover;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.links a:hover{transform:translateY(-1px);filter:brightness(1.06) saturate(1.08)}
.links a.ghost{background-image:none;background:#fff;color:var(--text);border-color:var(--line);box-shadow:none}
.links a.ghost:hover{border-color:#d6dce2}

/* =========================
   4) Section Chips — oval copper (buttons)
   ========================= */
.nav-section{display:flex;flex-wrap:wrap;gap:10px}
.nav-section a,.btn-chip{
  display:inline-flex;align-items:center;gap:8px;font-weight:650;text-decoration:none;
  padding:10px 14px;border-radius:9999px;
  border:1px solid color-mix(in srgb,var(--copper-600) 55%, transparent);
  background:linear-gradient(135deg,var(--slate-700) 0%, var(--copper-500) 120%);
  color:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.nav-section a:hover,.btn-chip:hover{transform:translateY(-1px);filter:brightness(1.04) saturate(1.04)}

/* =========================
   5) Typography
   ========================= */
h1{margin:0;letter-spacing:-.02em}
.pageTitle{font-size:var(--title);line-height:1.08;margin:0 0 10px;color:var(--slate-700)}
h2{
  position:relative;margin:0 0 14px;
  font-size:var(--h2);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
h2::after{
  content:"";
  position:absolute;left:0;bottom:-6px;
  width:48px;height:3px;border-radius:6px;
  background:linear-gradient(90deg,var(--copper-500),var(--copper-300));
}
.lead{font-size:var(--lead);line-height:1.75;color:var(--muted-2)}
.muted{color:var(--muted-2)}
.tiny{font-size:12px}

/* =========================
   6) Grid & Cards
   ========================= */
.grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
@media (max-width:960px){
  .grid{grid-template-columns:1fr}
  .span2,.span3{grid-column:auto!important}
}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-2);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--copper-500) 26%, transparent);
  box-shadow:0 30px 60px rgba(15,23,42,.14);
}
.card p{margin:12px 0}
.card p:first-of-type{margin-top:0}
.card p:last-of-type{margin-bottom:0}

/* =========================
   7) Buttons — oval copper
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;font-weight:600;
  border-radius:9999px;padding:10px 14px;color:#fff;
  border:1px solid color-mix(in srgb, var(--copper-600) 55%, transparent);
  background:linear-gradient(135deg,var(--slate-700) 0%, var(--copper-500) 120%);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04) saturate(1.04)}
.btn.ghost{color:var(--text);border:1px solid var(--line);background:#fff;box-shadow:none}
.btn.ghost:hover{border-color:#d6dce2}

/* =========================
   8) Tip of the Month — controls
   ========================= */
.tipCard .tipActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tipCard .osSwitch button,.tipCard .pill,.tipCard a.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:650;text-decoration:none;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--copper-600) 55%, transparent);
  background:linear-gradient(135deg,var(--slate-700) 0%, var(--copper-500) 120%);
  color:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  border-radius:9999px;padding:10px 14px;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.tipCard .osSwitch button:hover,.tipCard .pill:hover,.tipCard a.pill:hover{transform:translateY(-1px);filter:brightness(1.04) saturate(1.04)}
.tipCard .osSwitch button[aria-selected="true"]{border-color: color-mix(in srgb, var(--copper-500) 50%, transparent)}

/* =========================
   9) Certifications — EVEN spacing, NO tiles
   ========================= */
.certTile h2{font-size:var(--h2);letter-spacing:.12em}
.certGrid{
  display:flex;flex-wrap:wrap;
  justify-content:space-evenly;align-items:center;
  gap:24px;margin:8px 0 4px;padding:0;
}
.certBadge{display:contents}
.certGrid img,.certLogo{max-height:56px;width:auto;object-fit:contain;flex:0 1 auto}
.certCaption{margin-top:6px;font-size:12px;color:var(--muted-2);text-align:center;white-space:nowrap}

/* =========================
   10) Core Domains — pill + copper separators
   ========================= */
.coreDomains{display:grid;place-items:center;text-align:center}
.coreDomains .bullets{
  all:unset;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin:8px 0 0 0;
  padding:0;
  list-style:none;
}
.coreDomains .bullets li{
  list-style:none;
  border:1px solid var(--line);
  border-radius:9999px;
  padding:6px 12px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  background:#fff;
}
.coreDomains .bullets li + li{position:relative}
.coreDomains .bullets li + li::before{
  content:"";
  width:6px;height:6px;
  background:var(--copper-500);
  display:inline-block;
  margin-right:10px;
  border-radius:2px;
}
.coreDomains .bullets li:hover{background:color-mix(in srgb, #fff 92%, var(--copper-300))}

/* =========================
   11) Quote block — ad style
   ========================= */
.quoteAd{
  position:relative;
  padding:22px 22px 22px 70px;
  border:1px solid color-mix(in srgb,var(--copper-500) 35%, transparent);
  border-left:6px solid var(--copper-500);
  border-radius:18px;
  background:linear-gradient(180deg,#fff, #f7fafc);
  box-shadow:0 16px 36px rgba(15,23,42,.10);
  font-style:italic;
  color:var(--slate-700);
}
.quoteAd::before{ content:"C";
  position:absolute;
  left:18px;top:-10px;
  font-size:92px;line-height:1;
  color:color-mix(in srgb,var(--copper-500) 70%, white);
  opacity:.85;
}
.quoteAd strong{font-weight:800;color:var(--slate-700)}
.quoteAd .by{display:block;margin-top:10px;font-style:normal;color:var(--muted-2);font-size:13px}

/* =========================
   12) Lists / Activity rows / Footer
   ========================= */
.list{display:flex;flex-direction:column;gap:12px}
.row{
  border-radius:var(--radius-md);
  padding:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 24px rgba(15,23,42,.06);
}
.rowTop{display:flex;justify-content:space-between;gap:12px}
.badge{
  font-size:12px;
  padding:5px 10px;
  border-radius:9999px;
  color:color-mix(in srgb,var(--slate-700) 92%, #fff);
  border:1px solid color-mix(in srgb,var(--copper-500) 24%, transparent);
  background:color-mix(in srgb,var(--copper-500) 14%, #fff2);
}
.footer{padding:18px 30px 38px;color:var(--muted-2)}

/* =========================
   13) Per-page grid helpers
   ========================= */
.page--home .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.page--two  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.page--one  .grid{grid-template-columns:1fr}

/* =========================================================
   TAG SYSTEM — FINAL (no border chips + copper separators)
   ========================================================= */
.tagGrid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.tagGrid.center{
  justify-content:center;
  text-align:center;
}

/* Eye-scan chips: no border, soft fill, crisp type */
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:9999px;
  border:none;
  background:rgba(255,255,255,.78);
  color:var(--slate-700);
  font-weight:750;
  font-size:13px;
  letter-spacing:.01em;
  line-height:1.15;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

/* Copper square separators (hero + feature) */
#heroTags .tag + .tag,
#featureTags .tag + .tag{
  padding-left:18px;
  margin-left:8px;
  position:relative;
}
#heroTags .tag + .tag::before,
#featureTags .tag + .tag::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:7px;
  height:7px;
  background:var(--copper-500);
  border-radius:2px;
  opacity:.95;
}

/* No clumping ever */
#heroTags{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#featureTags{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* =========================================================
   TIP OF THE MONTH — new image, no haze, no borders inside
   Requires: <section class="card tipCard tip--bg2"> … </section>
   ========================================================= */
.tipCard.tip--bg2{
  position:relative;
  overflow:hidden;
  border:none;
}

/* Use a different picture, no overlay haze */
.tipCard.tip--bg2::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    url("/nelson-heard-site/assets/images/iconsandcircuits.png"),
    url("/assets/images/iconsandcircuits.png");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  opacity:.90;
  pointer-events:none;
}

/* No haze layer */
.tipCard.tip--bg2::after{content:none}

.tipCard.tip--bg2 > *{position:relative}

/* Remove borders inside Tip blocks so it feels clean */
.tipCard.tip--bg2 .tipBlock,
.tipCard.tip--bg2 .tipHead{
  border:none;
}

/* Keep text readable on the image without “haze” — just solid surfaces under text blocks */
.tipCard.tip--bg2 .tipBlock{
  background:rgba(255,255,255,.88);
  border-radius:var(--radius-md);
  padding:14px;
  box-shadow:0 14px 28px rgba(15,23,42,.12);
}
.tipCard.tip--bg2 .tipHead{
  background:rgba(255,255,255,.86);
  border-radius:var(--radius-md);
  padding:12px 12px;
  box-shadow:0 12px 24px rgba(15,23,42,.10);
}

/* =========================================================
   Creation Station — POP (integrated)
   Applies on: body.page--freelance OR any body class containing "station"
   ========================================================= */

/* Soft spotlight behind the page to increase contrast + sales-page energy */
body.page--freelance,
body[class*="station"]{ position:relative; }
body.page--freelance::before,
body[class*="station"]::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, color-mix(in srgb, var(--copper-300) 24%, transparent), transparent 70%),
    radial-gradient(900px 520px at 82% 26%, color-mix(in srgb, var(--copper-500) 18%, transparent), transparent 74%),
    radial-gradient(1100px 650px at 50% 92%, color-mix(in srgb, var(--slate-700) 16%, transparent), transparent 70%);
  opacity:.95;
  z-index:-1;
}

/* Header: a bit more depth so it feels “featured” */
body.page--freelance .header,
body[class*="station"] .header{
  box-shadow:0 14px 34px rgba(15,23,42,.22), inset 0 0 0 1000px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--copper-500) 22%, rgba(15,23,42,.18));
  background-attachment: fixed !important; /* hero depth */
}

/* Cards: slightly richer border cue on sales page */
body.page--freelance .card,
body[class*="station"] .card{ border-color: color-mix(in srgb, var(--copper-500) 16%, var(--line)); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease; }
body.page--freelance .card:hover,
body[class*="station"] .card:hover{ border-color: color-mix(in srgb, var(--copper-500) 38%, transparent); box-shadow: var(--copper-glow); transform: translateY(-4px); filter: saturate(1.05); }

/* Hero/Title Copper Foil */
body.page--freelance .pageTitle,
body[class*="station"] .pageTitle{
  background: var(--copper-foil);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 18px 40px rgba(15,23,42,.22);
}
body.page--freelance .pageTitle::after,
body[class*="station"] .pageTitle::after{
  content: ""; display:inline-block; vertical-align:middle; height:1.1em; width:0.9em; margin-left:.18em;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0));
  filter: blur(4px); border-radius:50%; opacity:0; transform: translateY(-.2em);
}
body.page--freelance .pageTitle:hover::after,
body[class*="station"] .pageTitle:hover::after{ opacity:.85; animation: glint 1.6s ease-out forwards; }
@keyframes glint{ 0%{transform:translate(-60%, -.2em) scale(.8)} 60%{transform:translate(10%, -.2em) scale(1)} 100%{transform:translate(110%, -.2em) scale(.6); opacity:0} }

/* Premium Button Shine */
body.page--freelance .links a,
body[class*="station"] .links a,
body.page--freelance .btn,
body[class*="station"] .btn,
body.page--freelance .nav-section a,
body[class*="station"] .nav-section a{ position:relative; overflow:hidden; isolation:isolate; }
body.page--freelance .links a::after,
body[class*="station"] .links a::after,
body.page--freelance .btn::after,
body[class*="station"] .btn::after,
body.page--freelance .nav-section a::after,
body[class*="station"] .nav-section a::after{
  content:""; position:absolute; inset:-2px; background: var(--shine);
  transform: translateX(-120%); opacity:0; pointer-events:none; mix-blend-mode: screen;
}
body.page--freelance .links a:hover::after,
body[class*="station"] .links a:hover::after,
body.page--freelance .btn:hover::after,
body[class*="station"] .btn:hover::after,
body.page--freelance .nav-section a:hover::after,
body[class*="station"] .nav-section a:hover::after{ animation: sweep .9s ease; opacity:1; }
@keyframes sweep{ 0%{ transform: translateX(-120%)} 100%{ transform: translateX(120%)} }

/* Kinetic Tags */
body.page--freelance #heroTags .tag,
body.page--freelance #featureTags .tag,
body[class*="station"] #heroTags .tag,
body[class*="station"] #featureTags .tag{ transition: transform .12s ease, box-shadow .12s ease; }
body.page--freelance #heroTags .tag:hover,
body.page--freelance #featureTags .tag:hover,
body[class*="station"] #heroTags .tag:hover,
body[class*="station"] #featureTags .tag:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.18), 0 0 0 1px color-mix(in srgb, var(--copper-500) 32%, transparent); }

/* Trust shimmer for .row.trust (e.g., logos) */
body.page--freelance .row.trust,
body[class*="station"] .row.trust{ position:relative; overflow:hidden; }
body.page--freelance .row.trust::after,
body[class*="station"] .row.trust::after{ content:""; position:absolute; inset:-1px; background: var(--shine); opacity:0; transform: translateX(-120%); }
body.page--freelance .row.trust:hover::after,
body[class*="station"] .row.trust:hover::after{ animation: sweep 1.2s ease; opacity:1; }

/* Sticky CTA helper (opt‑in) */
.stickyCta{ position:fixed; right:20px; bottom:22px; z-index:70; box-shadow:0 16px 36px rgba(15,23,42,.25); }
@media (max-width:720px){ .stickyCta{ right:12px; bottom:14px; } }

/* Tasteful film grain (opt‑in by adding .grain to body) */
body.page--freelance.grain::after,
body.grain[class*="station"]::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: repeating-radial-gradient(circle at 10% 10%, rgba(0,0,0,.035) 0 1px, transparent 1px 10px),
                    repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply; opacity:.45;
}

/* Copper Underlines wider on sales pages */
body.page--freelance h2::after,
body[class*="station"] h2::after{ width:64px; height:4px; background: linear-gradient(90deg, var(--copper-500), var(--copper-300)); border-radius: 8px; }

/* CTA Pulse (opt‑in) */
.btn.pulse{ animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow: 0 10px 22px rgba(15,23,42,.10) } 50%{ box-shadow: 0 10px 22px rgba(15,23,42,.18), 0 0 0 6px color-mix(in srgb, var(--copper-500) 16%, transparent) } }

/* Sticky container helper for header (optional) */
.stickyTop{ position:sticky; top:10px; z-index:50; }
.stickyTop .header{ transition: box-shadow .18s ease, border-color .18s ease; }
.stickyTop .header:is(:hover, :focus-within){ box-shadow: 0 18px 44px rgba(15,23,42,.26), inset 0 0 0 1000px rgba(0,0,0,.05); border-color: color-mix(in srgb, var(--copper-500) 28%, rgba(15,23,42,.18)); }

/* Accessibility: stronger focus rings on sales pages */
body.page--freelance :where(a,button,[role="button"],input,select,textarea):focus-visible,
body[class*="station"] :where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:4px solid color-mix(in srgb, var(--copper-500) 70%, white); outline-offset:4px;
}

.badge.copper{ border-color: color-mix(in srgb, var(--copper-500) 44%, transparent); background: color-mix(in srgb, var(--copper-500) 18%, #fff2); color: var(--slate-700); font-weight:700; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width:720px){
  .shell{padding:16px}
  .header{flex-wrap:wrap;gap:10px}
  .header .links{width:100%}
  .grid{grid-template-columns:1fr !important}
  .span2,.span3{grid-column:auto !important}
  .card{padding:16px}
  .rowTop{flex-direction:column;align-items:flex-start;gap:6px}
  #heroTags .tag, #featureTags .tag{white-space:normal}
  .tipGrid{grid-template-columns:1fr !important}
}

/* =========================
   Tip of the Month (tip--bg2) — tighten padding/spacing
   ========================= */
.tipCard.tip--bg2{ padding:16px !important; }  /* card itself */

.tipCard.tip--bg2 .tipHead{
  padding:10px 10px !important;
  margin-bottom:10px !important;
}

.tipCard.tip--bg2 .tipActions{
  gap:8px !important;
}

.tipCard.tip--bg2 .tipGrid{
  gap:12px !important;
}

/* Inner blocks: less padding, tighter text rhythm */
.tipCard.tip--bg2 .tipBlock{
  padding:12px !important;
}

/* Reduce default paragraph spacing inside tip blocks */
.tipCard.tip--bg2 .tipBlock p{
  margin:8px 0 !important;
}

/* Bring labels closer to content */
.tipCard.tip--bg2 .tipLabel{
  margin-bottom:6px !important;
}

/* Slightly smaller pills so the header doesn’t feel bloated */
.tipCard.tip--bg2 .osSwitch button,
.tipCard.tip--bg2 .pill,
.tipCard.tip--bg2 a.pill{
  padding:8px 12px !important;
}

/* Mobile: even tighter */
@media (max-width:720px){
  .tipCard.tip--bg2{ padding:14px !important; }
  .tipCard.tip--bg2 .tipBlock{ padding:11px !important; }
}

/* Slate CTA button (Service Request) */
.btn.slate{
  border:1px solid color-mix(in srgb, var(--slate-700) 65%, transparent);
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-700) 120%);
  color:#fff;
}
.btn.slate:hover{ filter: brightness(1.06) saturate(1.02); }

/* Mobile: logo first, links second */
@media (max-width:720px){
  .header{ flex-direction:column; align-items:center; }
  .header .brand{ order:1; margin-left:0; }
  .header .links{ order:2; margin-right:0; width:100%; justify-content:center; }
}
@media (max-width:720px){
  .brand--logo .brandMark{ height:78px; } /* tweak to taste */
  .links a{ padding:10px 12px; }
}

/* =========================================================
   FLOAT PACK — Prezi/Canva vibe (no HTML changes)
   Adds: animated Ken Burns hero, layered sparkles, real 3D lift.
   Targets only Creation Station pages.
   ========================================================= */

/* 1) Turn the header into a 3D stage */
body.page--creation .header,
body[class*="station"] .header{
  position:relative;
  overflow:hidden;
  perspective:1200px;
  transform-style:preserve-3d;
}

/* 2) Move the main hero image to ::before so we can animate it (Ken Burns) */
body.page--creation .header::before,
body[class*="station"] .header::before{
  content:"";
  position:absolute; inset:-6%; /* bleed for zoom */
  background-image: var(--creation-header-bg);
  background-size: cover; background-position:center; background-repeat:no-repeat;
  transform: translateZ(-80px) scale(1.06);
  filter: saturate(1.02) contrast(1.02);
  will-change: transform;
  animation: kbZoom 18s ease-in-out infinite alternate;
  z-index:0;
}

/* 3) Keep the circuits tiling as a light overlay + add sparkles that drift */
body.page--creation .header::after,
body[class*="station"] .header::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(120px 80px at 12% 18%, rgba(255,255,255,.20), transparent 70%),
    radial-gradient(160px 110px at 86% 26%, rgba(227,161,115,.18), transparent 72%),
    radial-gradient(220px 120px at 50% 88%, rgba(22,50,66,.16), transparent 70%),
    var(--circuit-tiling);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size: auto, auto, auto, 280px 280px;
  mix-blend-mode: soft-light;
  animation: drift 22s linear infinite;
  pointer-events:none;
  z-index:1;
}

/* 4) Lift real content above the effects */
body.page--creation .header > *,
body[class*="station"] .header > *{ position:relative; z-index:2; transform: translateZ(40px); }

/* 5) Make the base header background just the tiling (so ::before image shows clearly) */
body.page--creation .header,
body[class*="station"] .header{ background-image: var(--circuit-tiling) !important; background-size: 280px 280px, cover; background-repeat: repeat; }

/* 6) Subtle content hover tilt for interactivity */
body.page--creation .header:hover > *,
body[class*="station"] .header:hover > *{ transform: translateZ(60px); transition: transform .3s ease; }

/* 7) Extra readability: bottom fade vignette retained */
body.page--creation .header,
body[class*="station"] .header{ box-shadow: 0 22px 50px rgba(15,23,42,.28), inset 0 -80px 120px rgba(0,0,0,.25); }

/* Keyframes */
@keyframes kbZoom{ 0%{ transform: translateZ(-80px) scale(1.06) translateX(0) translateY(0) } 100%{ transform: translateZ(-80px) scale(1.12) translateX(-1.5%) translateY(-1.5%) } }
@keyframes drift{ 0%{ background-position: 0 0, 0 0, 0 0, 0 0 } 100%{ background-position: 6px 4px, -8px 6px, 4px -6px, 40px 20px } }