/* ============================================================
   StraightUp Inspections — adapted theme
   Built ON the Berry Design System foundations (type scale,
   spacing, radii, motion all inherited from colors_and_type.css).
   Only the BRAND COLOR tokens are re-mapped to a trust-focused
   palette appropriate for a building-inspection firm:
     charcoal ink · cobalt blue (action) · safety amber (urgency)
   Re-mapping the existing token names means the design-system
   Button/Icon/etc. pick up the new look automatically.
   ============================================================ */

:root {
  /* ---------- INK / NEUTRALS (cool charcoal, no plum) ---------- */
  --ink:    #14181F;
  --fg-1:   #14181F;
  --fg-2:   #515c6b;
  --fg-3:   #8b95a4;

  /* ---------- ACTION (was Berry Purple) → Cobalt ---------- */
  --berry-purple:     #1F4FE0;
  --berry-purple-700: #1B45C6;
  --berry-purple-800: #1539A6;   /* hover / pressed */
  --berry-purple-900: #0F2A78;
  --berry-purple-300: #8DA6F0;
  --berry-purple-100: #E2EAFD;
  --berry-purple-50:  #EEF3FF;

  /* ---------- DARK BANDS / HEADING INK (was Indigo) → Charcoal ---------- */
  --berry-indigo:      #11151C;
  --berry-indigo-mid:  #1B2230;
  --berry-indigo-soft: #2A3342;
  --berry-indigo-100:  #E4E7EC;

  /* ---------- SUCCESS / COMPLIANCE (was Leaf Green) → trust green ---------- */
  --leaf-green:     #16A34A;
  --leaf-green-600: #12873E;
  --leaf-green-700: #0F7434;
  --leaf-green-200: #C9EBD3;
  --leaf-green-50:  #ECF8F0;

  /* ---------- URGENCY ACCENT (new) → Safety amber ---------- */
  --amber:     #F5A623;
  --amber-600: #DE920E;
  --amber-100: #FDEFD2;
  --amber-50:  #FEF6E6;

  /* ---------- SURFACES (cool light) ---------- */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F8FC;
  --bg-warm:   #F3F6FB;
  --surface:   #EEF2F8;
  --surface-2: #E3EAF2;

  --border:        #E4E8EF;
  --border-strong: #D2D9E3;
  --line:          #EDF0F5;

  /* ---------- SEMANTIC ---------- */
  --success:    #12873E;
  --success-bg: #ECF8F0;

  /* ---------- SHADOWS (cool neutral, not plum) ---------- */
  --shadow-xs:  0 1px 2px rgba(17,21,28,0.06);
  --shadow-sm:  0 2px 8px rgba(17,21,28,0.08);
  --shadow-md:  0 10px 26px rgba(17,21,28,0.10);
  --shadow-lg:  0 20px 46px rgba(17,21,28,0.14);
  --shadow-pop: 0 28px 64px rgba(17,21,28,0.18);
  --ring-focus: 0 0 0 3px rgba(31,79,224,0.28);

  --container: 1200px;
  --container-wide: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); }

/* heading ink override (colors_and_type sets headings to --berry-indigo = now charcoal) */
.su h1, .su h2, .su h3, .su h4 { color: var(--berry-indigo); }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- image-slot defaults ---------- */
image-slot {
  --is-bg: var(--surface);
  --is-fg: var(--fg-3);
  display: block;
}

/* ---------- utility ---------- */
.su-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--berry-purple);
}
.su-eyebrow.on-dark { color: var(--amber); }

.su-wrap { max-width: var(--container-wide); margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }

::selection { background: var(--berry-purple); color: #fff; }

/* design-system buttons should never wrap their label (but accordion questions must) */
.su button:not(.su-faq-q) { white-space: nowrap; }
.su-faq-q { white-space: normal; }

/* global guards: never allow sideways scroll; long words/headings wrap */
html, body { overflow-x: hidden; max-width: 100%; }
.su h1, .su h2, .su h3, .su h4, .su p { overflow-wrap: break-word; }

/* ---------- gentle float on hero proof cards ---------- */
@keyframes su-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: no-preference) {
  .su-float { animation: su-floaty 5.5s var(--ease-out) infinite; }
  .su-float.delay { animation-delay: -2.6s; }
}

/* ---------- scroll progress bar ---------- */
.su-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--berry-purple), var(--amber));
  z-index: 60; transition: width .08s linear;
}

/* ---------- sticky mobile action bar ---------- */
.su-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(17,21,28,.1);
  transform: translateY(120%); transition: transform .32s var(--ease-out);
}
.su-stickybar.show { transform: none; }
.su-stickybar a { flex: 1; text-decoration: none; display: block; }
@media (max-width: 880px) { .su-stickybar { display: flex; } body { padding-bottom: 72px; } }

/* ---------- FAQ accordion ---------- */
.su-faq-item { border: 1px solid var(--border); border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow var(--dur), border-color var(--dur); }
.su-faq-item[data-open="true"] { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.su-faq-q { width: 100%; text-align: left; border: none; background: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 22px 24px; font: 700 1.08rem var(--font-display); color: var(--berry-indigo); }
.su-faq-ic { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--berry-purple-50); color: var(--berry-purple); transition: transform var(--dur), background var(--dur); }
.su-faq-item[data-open="true"] .su-faq-ic { transform: rotate(45deg); background: var(--berry-purple); color: #fff; }
.su-faq-a { max-height: 0; overflow: hidden; transition: max-height .36s var(--ease-out); }
.su-faq-a > div { padding: 0 24px 22px; font: 400 15.5px/1.65 var(--font-body); color: var(--fg-2); }

/* ---------- fixed-header anchor offset ---------- */
section[id] { scroll-margin-top: 84px; }

/* ---------- cinematic hero: line-rise headline ---------- */
.su-linemask { display: block; overflow: hidden; padding-bottom: 0.04em; }
.su-line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .su-line { animation: su-lineup .95s var(--ease-out) both; }
  .su-line.l2 { animation-delay: .12s; }
  .su-line.l3 { animation-delay: .24s; }
}
@keyframes su-lineup { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* fade-rise for hero supporting bits (independent of JS reveal) */
@media (prefers-reduced-motion: no-preference) {
  .su-fade { opacity: 0; transform: translateY(16px); animation: su-fadein .8s var(--ease-out) forwards; }
}
@keyframes su-fadein { to { opacity: 1; transform: none; } }

/* scroll cue */
.su-scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none;
  font: 800 10px var(--font-display); letter-spacing: .28em; color: rgba(255,255,255,.62); }
.su-scrollcue .dot { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.4); border-radius: 999px; position: relative; }
.su-scrollcue .dot::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 4px; background: var(--amber); transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) { .su-scrollcue .dot::after { animation: su-scroll 1.7s var(--ease-out) infinite; } }
@keyframes su-scroll { 0% { opacity: 0; top: 7px; } 35% { opacity: 1; } 70% { opacity: 0; top: 22px; } 100% { opacity: 0; } }
@media (max-width: 920px) { .su-scrollcue { display: none; } }

/* image-slot ships a default height:160px on :host — override so our
   aspect-ratio + width:100% slots derive height from the ratio instead of collapsing */
image-slot { height: auto; }

/* image zoom-on-hover wrapper (service cards) */
.su-zoomwrap { overflow: hidden; }
.su-zoomwrap image-slot { transition: transform .65s var(--ease-out); }
.su-zoomwrap:hover image-slot { transform: scale(1.06); }

/* light outline button for dark hero */
.su-btn-light { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px var(--font-body);
  color: #fff; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill); padding: 12px 24px; cursor: pointer; transition: all var(--dur-fast); }
.su-btn-light:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-1px); }

/* ============================================================
   MANIFESTO — 3D mouse-tilt inspection-report scene
   ============================================================ */
.su-mani { position: relative; overflow: hidden; }
.su-mani-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(36px, 5vw, 80px); align-items: center; }

/* pillars row */
.su-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.su-pillar { padding: 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--dur), box-shadow var(--dur); }
.su-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.su-pillar .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--berry-purple-50); color: var(--berry-purple); margin-bottom: 12px; }
.su-pillar h4 { font: 800 1rem var(--font-display); color: var(--berry-indigo); margin: 0 0 3px; }
.su-pillar p { font: 500 12.5px/1.45 var(--font-body); color: var(--fg-2); margin: 0; }

/* 3D scene */
.su-scene { position: relative; perspective: 1300px; min-height: 440px; display: grid; place-items: center; }
.su-tilt { position: relative; width: min(420px, 100%); transform-style: preserve-3d; transition: transform .3s var(--ease-out); will-change: transform; }
.su-layer { position: absolute; inset: 0; }

/* glow */
.su-scene-glow { position: absolute; width: 78%; aspect-ratio: 1; left: 11%; top: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(95,44,114,.34), transparent 65%); filter: blur(18px);
  transform: translateZ(-90px); }
@media (prefers-reduced-motion: no-preference) { .su-scene-glow { animation: su-pulse 6s ease-in-out infinite; } }
@keyframes su-pulse { 0%,100% { opacity: .8; transform: translateZ(-90px) scale(1); } 50% { opacity: 1; transform: translateZ(-90px) scale(1.08); } }

/* depth cards behind the main report */
.su-backcard { border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.su-backcard.b1 { transform: translateZ(-32px) translate(26px, 30px) rotate(4deg); opacity: .85; }
.su-backcard.b2 { transform: translateZ(-58px) translate(-22px, -18px) rotate(-5deg); opacity: .6; }

/* main report card */
.su-report3d { position: relative; border-radius: 22px; background: #fff; border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop); overflow: hidden; transform: translateZ(0); }
.su-report3d .hd { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.su-report3d .dot3 { display: flex; gap: 5px; }
.su-report3d .dot3 i { width: 9px; height: 9px; border-radius: 999px; display: block; }
.su-report3d .body { padding: 16px 18px 18px; }
.su-finding { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.su-finding:last-child { border-bottom: none; }
.su-finding .st { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.su-finding .meta { flex: 1; }
.su-finding .bar { height: 7px; border-radius: 4px; background: var(--line); }

/* floating 3D chips */
.su-chip3d { position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop);
  border: 1px solid var(--border); padding: 11px 14px; display: flex; align-items: center; gap: 9px; }

@media (max-width: 920px) {
  .su-mani-grid { grid-template-columns: 1fr; }
  .su-scene { min-height: 400px; margin-top: 8px; }
  .su-pillars { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG — buttons, cards grid, shared responsive
   ============================================================ */
.su-cta-btn {
  font: 700 14.5px var(--font-body); color: #fff; background: var(--berry-purple);
  border: none; border-radius: var(--r-pill); padding: 12px 24px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background var(--dur-fast), transform var(--dur-fast); min-height: 44px;
}
.su-cta-btn:hover { background: var(--berry-purple-800); transform: translateY(-1px); }
.su-cta-btn-outline {
  font: 700 14.5px var(--font-body); color: #fff; background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--r-pill); padding: 12px 24px;
  cursor: pointer; white-space: nowrap; transition: all var(--dur-fast); min-height: 44px;
}
.su-cta-btn-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.su-blog-grid { grid-template-columns: repeat(3, 1fr); }
.su-insight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.su-insight-card:hover image-slot { transform: scale(1.05); }
.su-insight-card image-slot { transition: transform .6s var(--ease-out); }
@media (max-width: 860px) { .su-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .su-blog-grid { grid-template-columns: 1fr !important; } }

/* header nav toggle — shared by all pages (homepage <style> also sets these) */
@media (max-width: 880px) {
  .su-desk-nav, .su-desk-cta { display: none !important; }
  .su-burger { display: grid !important; }
}