/* ==========================================================================
   Union Built Sites — Homepage Experience v2
   "Heavy iron, built to hold weight." — industrial, high-contrast,
   tactile. No stock-photo dependency: texture and type carry the design.
   ========================================================================== */
:root{
  --ubs-black:      #0A0C0D;
  --ubs-black-2:    #050607;
  --ubs-steel:      #33393C;
  --ubs-steel-2:    #454D51;
  --ubs-red:        #D31B1B;
  --ubs-red-dark:   #9C1414;
  --ubs-silver:     #C7CBCD;
  --ubs-silver-dim: #7C8285;
  --ubs-amber:      #E3A62B;
  --ubs-paper:      #F2EFE6;
  --ubs-paper-2:    #E6E0D0;
  --ubs-ink:        #16191A;
  --ubs-slate:      #565D60;

  --ubs-display: 'Oswald', 'Arial Narrow', sans-serif;
  --ubs-body:    'Source Sans 3', 'Segoe UI', sans-serif;
  --ubs-mono:    'IBM Plex Mono', monospace;
  --ubs-radius: 3px;
}

/* Tactile grain across the whole page — subtle, not a filter fad. */
body{ position:relative; }
body::before{
  content:"";
  position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ubs-section{ position:relative; overflow:hidden; }
.ubs-section *{ box-sizing:border-box; }
.ubs-eyebrow{
  font-family:var(--ubs-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
.ubs-eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.6; }
.ubs-h2{
  font-family:var(--ubs-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.005em; line-height:.98; margin:16px 0 0;
}
.ubs-accent{ color:var(--ubs-red); }
.ubs-amber-text{ color:var(--ubs-amber); }

.ubs-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ubs-mono); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:18px 32px;
  background:var(--ubs-red); color:#fff; border:1px solid var(--ubs-red);
  border-radius:var(--ubs-radius); text-decoration:none;
  position:relative; overflow:hidden;
  transition:color .3s ease;
}
.ubs-btn::before{
  content:""; position:absolute; inset:0; background:var(--ubs-black);
  transform:translateX(-101%); transition:transform .35s cubic-bezier(.7,0,.2,1); z-index:0;
}
.ubs-btn:hover::before{ transform:translateX(0); }
.ubs-btn span, .ubs-btn::after{ position:relative; z-index:1; }
.ubs-btn::after{ content:"→"; transition:transform .3s ease; }
.ubs-btn:hover::after{ transform:translateX(5px); }
.ubs-btn.ubs-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.3); }
.ubs-btn.ubs-btn--ghost::before{ background:rgba(255,255,255,.1); }

/* rivet dot — small recurring structural motif */
.ubs-rivet{
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--ubs-silver), var(--ubs-steel-2) 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.5);
  display:inline-block;
}

/* brushed-steel panel texture, used behind hero + a few dark accents */
.ubs-brushed{
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px),
    linear-gradient(135deg, #2A2F31, #141718 60%, #1D2123);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ubs-hero{
  background:var(--ubs-black); color:var(--ubs-paper);
  padding:0; min-height:100vh; display:flex; align-items:stretch;
}
.ubs-hero__grid{ display:grid; grid-template-columns:1.15fr 1fr; width:100%; }
.ubs-hero__copy{
  padding:9vh 5vw 8vh 6vw; display:flex; flex-direction:column; justify-content:center;
  max-width:680px; position:relative; z-index:2;
}
.ubs-hero__eyebrow{ color:var(--ubs-amber); margin-bottom:22px; }
.ubs-hero__title{ font-size:clamp(46px, 5.6vw, 84px); color:var(--ubs-paper); }
.ubs-hero__title .ubs-line{ display:block; overflow:hidden; }
.ubs-hero__title .ubs-line-inner{ display:block; }
.ubs-hero__title .ubs-accent{ -webkit-text-stroke:1.5px var(--ubs-red); color:transparent; }
.ubs-hero__lede{
  font-family:var(--ubs-body); font-size:18px; line-height:1.65;
  color:var(--ubs-silver); margin-top:28px; max-width:480px;
}
.ubs-hero__lede strong{ color:var(--ubs-paper); font-weight:600; }
.ubs-hero__checks{
  list-style:none; margin:30px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px 26px;
  font-family:var(--ubs-mono); font-size:12px; letter-spacing:.04em; color:var(--ubs-silver-dim);
}
.ubs-hero__checks li{ display:flex; align-items:center; gap:9px; }
.ubs-hero__checks li::before{ content:""; width:6px; height:6px; background:var(--ubs-amber); }
.ubs-hero__cta{ margin-top:40px; }

.ubs-hero__visual{ position:relative; overflow:hidden; }
.ubs-hero__panel{
  position:absolute; inset:0;
}
.ubs-hero__panel::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 22%, rgba(227,165,43,.16), transparent 45%),
    linear-gradient(0deg, rgba(10,12,13,.9), rgba(10,12,13,.15) 55%);
}
.ubs-hero__monogram{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64%; opacity:.9;
}
.ubs-hero__monogram svg{ width:100%; height:auto; }
.ubs-hero__rivets{ position:absolute; inset:22px; border:1px solid rgba(199,203,205,.18); pointer-events:none; }
.ubs-hero__rivets i{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--ubs-silver), var(--ubs-steel-2) 75%);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.ubs-hero__rivets i:nth-child(1){ top:-4.5px; left:-4.5px; }
.ubs-hero__rivets i:nth-child(2){ top:-4.5px; right:-4.5px; }
.ubs-hero__rivets i:nth-child(3){ bottom:-4.5px; left:-4.5px; }
.ubs-hero__rivets i:nth-child(4){ bottom:-4.5px; right:-4.5px; }

.ubs-hero__photo-frame{
  position:absolute; bottom:8%; right:8%; width:38%;
  background:var(--ubs-paper); padding:10px 10px 34px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  transform:rotate(-2.5deg);
  z-index:3;
}
.ubs-hero__photo-frame .ubs-hero__photo{
  width:100%; aspect-ratio:4/5; background-size:cover; background-position:center;
  filter:grayscale(.35) contrast(1.08);
}
.ubs-hero__photo-frame::before{
  content:"CERTIFIED UNION BUILT"; position:absolute; bottom:10px; left:10px; right:10px;
  font-family:var(--ubs-mono); font-size:9px; letter-spacing:.12em; color:var(--ubs-steel);
  text-align:center;
}
.ubs-hero__seal{ position:absolute; bottom:6%; left:6%; width:104px; height:104px; z-index:4; }
.ubs-seal-ring-text{ font-family:var(--ubs-mono); font-size:7px; letter-spacing:2px; fill:var(--ubs-amber); }
.ubs-seal-core{ fill:var(--ubs-black); stroke:var(--ubs-amber); stroke-width:1.5; }
.ubs-seal-star{ fill:var(--ubs-amber); }

/* ==========================================================================
   TRUST BAR — full-bleed dark ribbon with a running marquee of marks
   ========================================================================== */
.ubs-trust{ background:var(--ubs-steel); color:var(--ubs-paper); padding:64px 0 0; }
.ubs-trust__head{ text-align:center; padding:0 6vw; }
.ubs-trust__eyebrow{ color:var(--ubs-silver-dim); justify-content:center; }
.ubs-trust__row{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.ubs-trust__title{ font-size:clamp(22px,2.6vw,32px); color:var(--ubs-paper); }
.ubs-trust__seal-inline{ width:36px; height:36px; flex:none; }
.ubs-trust__marquee{ margin-top:44px; overflow:hidden; border-top:1px solid rgba(242,239,230,.1); padding:34px 0; }
.ubs-trust__track{ display:flex; align-items:center; gap:64px; width:max-content; will-change:transform; }
.ubs-trust__track img{ height:52px; width:auto; filter:brightness(0) invert(1); opacity:.6; flex:none; }

/* ==========================================================================
   PILLARS — asymmetric cards with a ghost numeral behind each
   ========================================================================== */
.ubs-pillars{ background:var(--ubs-paper); padding:120px 6vw; }
.ubs-pillars__head{ max-width:640px; }
.ubs-pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:60px; background:var(--ubs-paper-2); }
.ubs-card{
  background:var(--ubs-paper); padding:44px 32px 38px; position:relative; overflow:hidden;
}
.ubs-card::before{
  content:attr(data-num); position:absolute; top:-.28em; right:8px;
  font-family:var(--ubs-display); font-size:150px; font-weight:600;
  color:var(--ubs-ink); opacity:.045; line-height:1; pointer-events:none;
}
.ubs-card__bar{ width:36px; height:4px; background:var(--ubs-red); margin-bottom:22px; }
.ubs-card h3{
  font-family:var(--ubs-display); text-transform:uppercase; font-size:20px;
  color:var(--ubs-ink); margin:0 0 14px; position:relative; z-index:1;
}
.ubs-card p{ font-family:var(--ubs-body); color:var(--ubs-slate); line-height:1.65; margin:0; font-size:15px; position:relative; z-index:1; }

/* ==========================================================================
   PROBLEM / SOLUTION
   ========================================================================== */
.ubs-ps{ background:var(--ubs-black); color:var(--ubs-paper); padding:130px 6vw; }
.ubs-ps__grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.ubs-ps .ubs-eyebrow{ color:var(--ubs-red); }
.ubs-ps h2{ color:var(--ubs-paper); font-size:clamp(32px,3.6vw,50px); }
.ubs-ps__intro{ font-family:var(--ubs-body); color:var(--ubs-silver); font-size:16.5px; line-height:1.65; margin-top:20px; max-width:480px; }
.ubs-ps__list{ list-style:none; margin:30px 0 0; padding:0; }
.ubs-ps__list li{
  display:flex; align-items:flex-start; gap:14px;
  font-family:var(--ubs-body); color:var(--ubs-silver);
  padding:15px 0; border-bottom:1px solid rgba(242,239,230,.1); font-size:15.5px;
}
.ubs-ps__x{ flex:none; width:20px; height:20px; margin-top:2px; }
.ubs-ps__x path{ stroke:var(--ubs-red); stroke-width:2.4; fill:none; stroke-dasharray:24; stroke-dashoffset:0; }
.ubs-ps__solution{
  background:linear-gradient(160deg, #2E2114, #1a1410 60%);
  border:1px solid rgba(227,165,43,.25);
  color:var(--ubs-paper); padding:56px 44px; border-radius:var(--ubs-radius);
  position:relative; overflow:hidden;
}
.ubs-ps__solution::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(227,165,43,.18), transparent 55%); }
.ubs-ps__solution p{ font-family:var(--ubs-display); text-transform:uppercase; font-size:clamp(22px,2.2vw,30px); line-height:1.3; position:relative; z-index:1; margin:0; }
.ubs-ps__solution .ubs-amber-text{ display:block; margin-top:8px; }

/* ==========================================================================
   CAPABILITIES
   ========================================================================== */
.ubs-cap{ background:var(--ubs-paper); padding:120px 6vw; }
.ubs-cap__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; }
.ubs-cap__video{
  position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--ubs-black);
  border:1px solid var(--ubs-paper-2);
}
.ubs-cap__video iframe, .ubs-cap__video img{ width:100%; height:100%; object-fit:cover; display:block; }
.ubs-cap__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,12,13,.2); cursor:pointer; }
.ubs-cap__play span{ width:68px; height:68px; border-radius:50%; background:var(--ubs-red); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; }
.ubs-cap .ubs-eyebrow{ color:var(--ubs-red); }
.ubs-cap h2{ color:var(--ubs-ink); font-size:clamp(28px,3vw,40px); }
.ubs-cap__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:34px; background:var(--ubs-paper-2); }
.ubs-tile{
  background:var(--ubs-paper); padding:26px 22px; font-family:var(--ubs-body); font-size:14px; font-weight:600; color:var(--ubs-ink);
  display:flex; flex-direction:column; gap:16px; transition:background .25s ease;
}
.ubs-tile:hover{ background:var(--ubs-black); color:var(--ubs-paper); }
.ubs-tile__icon{ width:26px; height:26px; color:var(--ubs-red); }
.ubs-tile__icon svg{ width:100%; height:100%; }

/* ==========================================================================
   PROCESS — beam-line sequence
   ========================================================================== */
.ubs-process{ background:var(--ubs-black); color:var(--ubs-paper); padding:130px 6vw; text-align:center; }
.ubs-process h2{ color:var(--ubs-paper); }
.ubs-process__eyebrow{ color:var(--ubs-red); justify-content:center; }
.ubs-process__track{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:70px; }
.ubs-process__line{ position:absolute; top:23px; left:calc(12.5%); right:calc(12.5%); height:3px; background:var(--ubs-steel); z-index:0; }
.ubs-process__line-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg, var(--ubs-red), var(--ubs-amber)); }
.ubs-step{ position:relative; z-index:1; padding:0 22px; }
.ubs-step__num{
  width:46px; height:46px; border-radius:50%; background:var(--ubs-black);
  border:2px solid var(--ubs-red); display:flex; align-items:center; justify-content:center;
  font-family:var(--ubs-mono); font-weight:600; color:var(--ubs-red); margin:0 auto 24px;
}
.ubs-step h3{ font-family:var(--ubs-display); text-transform:uppercase; font-size:17px; color:var(--ubs-paper); margin:0 0 10px; }
.ubs-step p{ font-family:var(--ubs-body); color:var(--ubs-silver); font-size:14px; line-height:1.65; margin:0; }
.ubs-process__cta{ margin-top:60px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.ubs-faq{ background:var(--ubs-paper); padding:130px 6vw; }
.ubs-faq__head{ text-align:center; }
.ubs-faq h2{ color:var(--ubs-ink); }
.ubs-faq__eyebrow{ color:var(--ubs-red); justify-content:center; }
.ubs-faq__list{ max-width:840px; margin:56px auto 0; display:block !important; }
.ubs-faq__item{
  display:block !important; width:100% !important;
  border-bottom:1px solid var(--ubs-paper-2);
  border-left:3px solid transparent;
  transition:border-color .25s ease, background .25s ease;
  padding-left:18px; margin-left:-18px;
}
.ubs-faq__item.is-open{ border-left-color:var(--ubs-red); background:rgba(211,27,27,.03); }
.ubs-faq__list .ubs-faq__item .ubs-faq__q{
  width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:20px; padding:24px 4px; background:none !important; border:none !important; border-radius:0 !important;
  cursor:pointer; text-align:left; font-family:var(--ubs-display); text-transform:uppercase;
  font-size:15.5px; letter-spacing:.02em; color:var(--ubs-ink); box-shadow:none !important;
}
.ubs-faq__q .ubs-faq__icon{ position:relative; width:16px; height:16px; flex:none; }
.ubs-faq__q .ubs-faq__icon::before, .ubs-faq__q .ubs-faq__icon::after{ content:""; position:absolute; background:var(--ubs-red); }
.ubs-faq__q .ubs-faq__icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.ubs-faq__q .ubs-faq__icon::after{ left:50%; top:0; height:100%; width:2px; transform:translateX(-50%); transition:transform .25s ease; }
.ubs-faq__item.is-open .ubs-faq__icon::after{ transform:translateX(-50%) rotate(90deg) scale(0); }
.ubs-faq__a{ max-height:0; overflow:hidden; font-family:var(--ubs-body); color:var(--ubs-slate); font-size:14.5px; line-height:1.75; }
.ubs-faq__a-inner{ padding:0 4px 26px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.ubs-final-cta{
  background:var(--ubs-black); color:var(--ubs-paper); padding:150px 6vw; text-align:center; position:relative;
}
.ubs-final-cta__grid-bg{ position:absolute; inset:0; opacity:.05; pointer-events:none; }
.ubs-final-cta h2{ color:var(--ubs-paper); font-size:clamp(34px,4.6vw,60px); position:relative; }
.ubs-final-cta p{ font-family:var(--ubs-body); color:var(--ubs-silver); max-width:580px; margin:22px auto 0; font-size:16.5px; line-height:1.65; position:relative; }
.ubs-final-cta .ubs-btn{ margin-top:40px; position:relative; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .ubs-hero__grid{ grid-template-columns:1fr; }
  .ubs-hero__visual{ min-height:460px; order:-1; }
  .ubs-hero__copy{ padding:64px 6vw; max-width:none; }
  .ubs-pillars__grid, .ubs-ps__grid, .ubs-cap__grid{ grid-template-columns:1fr; }
  .ubs-pillars__grid{ gap:2px; }
  .ubs-process__track{ grid-template-columns:1fr; gap:44px; }
  .ubs-process__line{ display:none; }
  .ubs-cap__tiles{ grid-template-columns:1fr 1fr; }
  .ubs-hero__photo-frame{ width:46%; }
}
@media (max-width: 600px){
  .ubs-hero__checks{ flex-direction:column; gap:9px; }
  .ubs-cap__tiles{ grid-template-columns:1fr; }
  .ubs-hero__photo-frame{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .ubs-section *{ animation:none !important; transition:none !important; }
}