/* ==========================================================================
   Similius about page — Urenus look & feel
   Target:  https://us.similius.com/about-us/     (WordPress page ID 31)
   Model:   https://urenus.com/pages/about-us
   Markup:  similius-about-page.html  (pasted into a Custom HTML block)

   Paste into Appearance → Customize → Additional CSS.

   WHY THIS FILE EXISTS
   The Urenus design was already pasted into this page — markup AND its
   <style> block, straight into the page content. WordPress ran wpautop over
   the content, which turned every newline inside the <style> into <br /> and
   every blank line into </p><p>. That is not valid CSS, so the browser threw
   nearly all of it away and the page rendered as unstyled prose.

   CSS cannot live in post content for that reason. It belongs here, where
   WordPress leaves it alone.

   The scope stays `#urenus-about` — that is the id already on the live
   wrapper, so keeping it means the markup edit is only about fixing content,
   not re-tagging every element. Rename both together later if you like.

   CHANGES vs the Urenus original, all deliberate:
     1. font-family: inherit, not the ui-sans-serif stack — keeps DM Sans.
     2. font-weight 800 -> 700; Blocksy only loads DM Sans at 400/500/600/700.
     3. The gallery's "URENUS" corner label reads "SIMILIUS".
     4. .watermark dropped — nothing in the Similius markup uses it.
     5. Container reset added; Blocksy insets page content by 64px, Urenus by
        ~36px, and 36px is what similius-contact-page.css already uses.
   ========================================================================== */


/* --- 0. Page gutter ---------------------------------------------------- */
/* Blocksy's constrained layout gives .entry-content > * a 63.7px side margin
   at 1440px, so the hero and closing bands stop well short of the edge.
   Urenus insets its bands by ~36px. This matches the contact page. */

/* The 63.7px comes from an !important auto-margin on .entry-content's direct
   children, so a plain override loses — measured: max-width and padding took
   effect, margin-inline did not. Same trap as the Brizy root container on the
   contact page. */
body.page-id-31 #urenus-about {
  width: auto;
  max-width: none;
  margin-inline: 0 !important;
  padding-inline: min(2.6vw, 38px);
}


/* --- 1. Tokens + base -------------------------------------------------- */

#urenus-about {
  --ink: #1a1b2e;
  --muted: #5a5c7d;
  --surface-1: #ffffff;
  --surface-2: #f4f5f7;
  --surface-3: #edeff2;
  --brand: #2b2c48;
  --brand-2: #4a4c75;
  --brand-light: #e9eaf2;
  --radius: 12px;
  --maxw: 1100px;
  --shadow-sm: 0 1px 2px rgba(43, 44, 72, 0.05);
  --shadow: 0 10px 30px rgba(43, 44, 72, 0.08);

  font-family: inherit;   /* DM Sans, already the site font */
  color: var(--ink);
  line-height: 1.7;
  background: var(--surface-1);
}

#urenus-about,
#urenus-about * { box-sizing: border-box; }

#urenus-about .container {
  width: min(100% - 2rem, var(--maxw));
  margin: 0 auto;
}


/* --- 2. Hero ----------------------------------------------------------- */

#urenus-about .hero {
  position: relative;
  isolation: isolate;
  padding: 4rem 0 3rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--brand-light);
}

#urenus-about .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 10% 20%, var(--brand-light), transparent 60%);
}

#urenus-about .eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-2);
}

#urenus-about h1 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand);
}

#urenus-about .intro {
  max-width: 900px;
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: var(--muted);
}


/* --- 3. Section cards -------------------------------------------------- */

#urenus-about section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--brand-light);
}

#urenus-about .section-card {
  padding: 2rem;
  border: 1px solid var(--brand-light);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

#urenus-about .section-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

#urenus-about h2 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--brand);
  letter-spacing: -0.01em;
}

#urenus-about p {
  margin: 0 0 1.2rem;
  color: var(--muted);
}

#urenus-about p:last-child { margin-bottom: 0; }

#urenus-about strong { color: var(--brand); }


/* --- 4. Bulleted lists ------------------------------------------------- */
/* Urenus replaces the browser bullet with a navy dot. Both <ul>s in the
   markup carry class="why-list"; the fallback below catches any plain <ul>
   added later in the editor so it never reverts to grey disc bullets. */

#urenus-about .why-list,
#urenus-about .section-card ul {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

#urenus-about .why-list li,
#urenus-about .section-card ul li {
  position: relative;
  margin-bottom: 0.9rem;
  padding-left: 1.5rem;
  color: var(--muted);
}

#urenus-about .why-list li::before,
#urenus-about .section-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}


/* --- 5. Framed image (the dynamizer gif) ------------------------------- */

#urenus-about .machine-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 1rem 0 1.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--brand-light);
  box-shadow: var(--shadow);
  background: var(--surface-1);
}

#urenus-about .machine-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* --- 6. Closing band --------------------------------------------------- */

#urenus-about .closing {
  padding: 4rem 0;
  background: var(--surface-2);
  border-bottom: none;
}


/* --- 7. Gallery (optional) --------------------------------------------- */
/* Similius publishes no facility photography, so the gallery markup is
   commented out in similius-about-page.html. These rules are harmless while
   unused — un-comment the markup and drop in photos and it works as-is. */

#urenus-about .gallery-section {
  position: relative;
  overflow: hidden;
  padding: clamp(3.75rem, 7vw, 6.5rem) 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(74, 76, 117, 0.10), transparent 30%),
    linear-gradient(180deg, #f8f8fb 0%, #ffffff 48%, #f5f6f9 100%);
}

#urenus-about .gallery-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -250px;
  right: -190px;
  border: 1px solid rgba(74, 76, 117, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

#urenus-about .gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

#urenus-about .gallery-heading h2 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

#urenus-about .gallery-intro {
  max-width: 520px;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--brand-2);
  font-size: 0.98rem;
}

#urenus-about .gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.25rem);
}

#urenus-about .gallery-item {
  --ratio: 4 / 3;
  position: relative;
  grid-column: span 4;
  aspect-ratio: var(--ratio);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(43, 44, 72, 0.10);
  border-radius: clamp(14px, 1.5vw, 20px);
  background-color: #e8e9ee;
  background-image:
    linear-gradient(rgba(21, 22, 39, 0.16), rgba(21, 22, 39, 0.16)),
    var(--gallery-bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 40px rgba(32, 33, 58, 0.10);
  isolation: isolate;
}

/* Blurred bleed of the same image behind the contained photo */
#urenus-about .gallery-item::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  background: inherit;
  filter: blur(20px) saturate(0.9);
  transform: scale(1.06);
  opacity: 0.78;
}

#urenus-about .gallery-item::after {
  content: "SIMILIUS";
  position: absolute;
  right: 0.8rem;
  bottom: 0.65rem;
  z-index: 3;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: rgba(18, 19, 35, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.90);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

#urenus-about .gallery-item img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.45s ease, filter 0.45s ease;
}

#urenus-about .gallery-item:nth-child(1)  { --ratio: 16 / 8.6; grid-column: span 8; }
#urenus-about .gallery-item:nth-child(2)  { --ratio: 4 / 4.3;  grid-column: span 4; }
#urenus-about .gallery-item:nth-child(6),
#urenus-about .gallery-item:nth-child(11) { --ratio: 16 / 9;   grid-column: span 8; }
#urenus-about .gallery-item:nth-child(7),
#urenus-about .gallery-item:nth-child(12) { --ratio: 4 / 4.15; grid-column: span 4; }
#urenus-about .gallery-item:nth-child(14) { grid-column: span 8; justify-self: center; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  #urenus-about .gallery-item:hover {
    box-shadow: 0 22px 54px rgba(32, 33, 58, 0.16);
    transform: translateY(-3px);
  }

  #urenus-about .gallery-item:hover img {
    transform: scale(1.018);
    filter: saturate(1.03) contrast(1.015);
  }
}


/* --- 8. Responsive ----------------------------------------------------- */

@media (max-width: 980px) {
  #urenus-about .gallery-heading {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #urenus-about .gallery-intro { max-width: 700px; }

  #urenus-about .gallery-item,
  #urenus-about .gallery-item:nth-child(n) {
    --ratio: 4 / 3;
    grid-column: span 6;
    width: 100%;
  }

  #urenus-about .gallery-item:nth-child(1),
  #urenus-about .gallery-item:nth-child(6),
  #urenus-about .gallery-item:nth-child(11) {
    --ratio: 16 / 9;
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  #urenus-about .hero { padding: 3rem 0 2.5rem; }
  #urenus-about section { padding: 2rem 0; }
  #urenus-about .section-card { padding: 1.5rem; }
  #urenus-about .closing { padding: 3rem 0; }

  #urenus-about .gallery-section { padding: 3.25rem 0; }
  #urenus-about .gallery-heading { margin-bottom: 1.5rem; }

  #urenus-about .gallery-heading h2 {
    font-size: clamp(1.85rem, 9vw, 2.45rem);
    line-height: 1.08;
  }

  #urenus-about .gallery-intro {
    padding-left: 1rem;
    font-size: 0.94rem;
  }

  #urenus-about .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  #urenus-about .gallery-item,
  #urenus-about .gallery-item:nth-child(n) {
    --ratio: 4 / 3;
    grid-column: 1;
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(32, 33, 58, 0.10);
  }

  #urenus-about .gallery-item:nth-child(1),
  #urenus-about .gallery-item:nth-child(6),
  #urenus-about .gallery-item:nth-child(11) { --ratio: 16 / 10; }

  #urenus-about .gallery-item::after {
    right: 0.65rem;
    bottom: 0.55rem;
    font-size: 0.54rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #urenus-about *,
  #urenus-about *::before,
  #urenus-about *::after {
    transition: none !important;
  }
}