/* Superstition Excavation — built to Jared's mockup.
   Black ground, industrial gold, heavy condensed caps, gold utility bar,
   left-aligned heroes with a white/gold split headline. */
:root {
  --black: #0A0A0A;
  --panel: #101010;
  --panel-2: #141312;
  --gold: #F6B009;
  --gold-hi: #FFC63D;
  --white: #FFFFFF;
  --body: #B9B5AF;
  --dim: #857F79;
  --line: rgba(255,255,255,.08);
  --line-gold: rgba(246,176,9,.30);
  --wrap: 1180px;
}
* { box-sizing: border-box; }
/* The UA rule for [hidden] is display:none, which loses to any explicit
   display on the same element. Anything laid out as grid or flex would stay
   on screen when scripted to hide. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--black); color: var(--body);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2 {
  font-family: "Anton", Impact, sans-serif; font-weight: 400;
  text-transform: uppercase; color: var(--white);
  line-height: .98; letter-spacing: .005em; margin: 0;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3, h4 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--white); margin: 0;
}
h3 { font-size: 1.22rem; } h4 { font-size: 1rem; letter-spacing: .16em; }
p { margin: 0 0 1rem; }
/* Headings carry no bottom margin, so a paragraph that follows one directly
   would butt against it. .sec-sub covers the intro case; this covers the rest. */
h2 + p { margin-top: 18px; }
.gold { color: var(--gold); }
.dim { color: var(--dim); }
.eyebrow {
  display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .26em; font-size: .82rem;
  color: var(--gold); margin-bottom: 14px;
}

/* ── utility bar ───────────────────────────────────────────────────────── */
.utilbar {
  background: var(--gold); color: #17130A;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: .84rem;
}
.utilbar .wrap { padding-top: 9px; padding-bottom: 9px; text-align: center; }
.utilbar a { text-decoration: none; }
.utilbar i { font-style: normal; opacity: .55; margin: 0 8px; }

/* ── header ────────────────────────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 60; background: rgba(10,10,10,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 26px; height: 112px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand .mark { width: 60px; height: 60px; flex: none; }
/* real-artwork lockup, sized generously per Jacob and capped so it cannot
   crowd the nav on smaller desktops */
.brand--img { display: block; }
.brand--img img { display: block; height: clamp(72px, 8.4vw, 96px); width: auto; }
.site-foot .brand--img img { height: 132px; max-width: 100%; object-fit: contain;
  object-position: left center; }
/* hero backdrop uses the wordmark-free crop, so it sits behind the headline
   without repeating the words next to it */
.hero .art--img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Scrim over the left side: the headline is heavy enough to sit on the art,
   but the grey sub-paragraph needs a clean ground to stay readable. */
.hero .art--img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #0A0A0A 4%, rgba(10,10,10,.88) 36%, rgba(10,10,10,0) 66%);
}
.hero .art--img img {
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  width: min(64%, 880px); height: auto; max-width: none; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
}
.brand .bw {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: 1.62rem; line-height: 1;
}
.brand .bw b { color: var(--white); font-weight: 700; }
.brand .bw em { color: var(--gold); font-style: normal; }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 1.02rem; color: #E8E5E1; letter-spacing: .02em;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.head-cta { flex: none; }
.burger { display: none; background: none; border: 1px solid var(--line);
  padding: 9px 11px; border-radius: 3px; cursor: pointer; }
.burger i { display: block; width: 18px; height: 2px; background: var(--gold); margin: 3px 0; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; font-size: .98rem;
  padding: 12px 22px; border: 2px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background .18s, color .18s, transform .1s;
}
.btn-lg { padding: 15px 30px; font-size: 1.06rem; }
.btn-gold { background: var(--gold); color: #17130A; }
.btn-gold:hover { background: var(--gold-hi); }
.btn-outline { border-color: var(--gold); color: var(--gold); }
.btn-outline:hover { background: rgba(246,176,9,.12); }
.btn-dark { background: #17130A; color: var(--gold); }
.btn-darkline { border-color: #17130A; color: #17130A; }
.btn:active { transform: translateY(1px); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: clamp(72px,10vw,132px) 0 clamp(60px,8vw,104px); }
.hero--slim { padding: clamp(54px,7vw,92px) 0 clamp(44px,6vw,74px);
  background: linear-gradient(120deg, #0A0A0A 55%, #1A1405 100%); }
.hero .art { position: absolute; inset: 0; z-index: 0; }
.hero .rays {
  position: absolute; left: 50%; top: -34%; width: min(1700px,170vw); aspect-ratio: 1/1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 168deg at 50% 0%,
    var(--gold) 0deg 5deg, transparent 5deg 12.4deg);
  -webkit-mask-image: radial-gradient(ellipse 58% 46% at 50% 0%, #000 8%, rgba(0,0,0,.6) 34%, transparent 62%);
          mask-image: radial-gradient(ellipse 58% 46% at 50% 0%, #000 8%, rgba(0,0,0,.6) 34%, transparent 62%);
  opacity: .30;
}
.hero .ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.hero .ghost {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center;
  font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
  line-height: .84; white-space: nowrap; z-index: 1; pointer-events: none;
  color: rgba(255,255,255,.038); width: 100%; overflow: hidden;
}
.hero .ghost span:first-child { font-size: clamp(3.4rem, 11.5vw, 10rem); letter-spacing: .01em; }
.hero .ghost span:last-child  { font-size: clamp(2rem, 6.6vw, 5.6rem); letter-spacing: .16em;
  color: rgba(246,176,9,.055); }
.hero-in { position: relative; z-index: 2; max-width: 760px; }
.hero-sub { font-size: clamp(1rem,1.5vw,1.14rem); max-width: 56ch; margin-top: 20px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ── trust strip ───────────────────────────────────────────────────────── */
.trust { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-in { display: grid; grid-template-columns: repeat(4,1fr); }
.t-item { text-align: center; padding: 22px 16px; border-left: 1px solid var(--line); }
.t-item:first-child { border-left: 0; }
.t-item b {
  display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--gold); font-size: 1.02rem;
}
.t-item span { font-size: .93rem; color: var(--body); }

/* ── sections ──────────────────────────────────────────────────────────── */
.sec { padding: clamp(60px,8vw,96px) 0; }
.sec-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-sub { max-width: 62ch; margin-top: 16px; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }

/* ── cards ─────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 38px; }
.card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 26px 24px; }
.card .ico { display: block; width: 30px; height: 30px; color: var(--gold); margin-bottom: 16px; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; font-size: .95rem; }
/* 7 cards in a 3-up grid leaves one orphan: centre it rather than hang it left */
.cards > :last-child:nth-child(3n+1) { grid-column: 2; }

/* ── two-column service list ───────────────────────────────────────────── */
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.svc { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; gap: 15px; align-items: flex-start; }
.svc .ico { flex: none; width: 26px; height: 26px; color: var(--gold); margin-top: 2px; }
.svc h3 { margin-bottom: 4px; }
.svc p { margin: 0; font-size: .95rem; }

/* ── chips ─────────────────────────────────────────────────────────────── */
.chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 34px; }
.chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 17px 12px; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--white); font-size: .96rem;
}

/* ── checklist ─────────────────────────────────────────────────────────── */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.checks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; font-size: 1.04rem; color: var(--white);
}
.checks li::before {
  content: ""; flex: none; width: 19px; height: 19px; margin-top: 2px;
  border: 2px solid var(--gold); border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6B009' stroke-width='4'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ── panels, form, estimate grid ───────────────────────────────────────── */
.est-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start; }
.panel { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 30px 28px; }
.panel h3 { margin-bottom: 14px; font-size: 1.35rem; }
.form { display: grid; gap: 4px; }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
  color: var(--white); margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%; background: #0C0C0C; border: 1px solid var(--line);
  color: var(--white); border-radius: 2px; padding: 12px 14px; font: inherit;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; }
.note { font-size: .86rem; color: var(--dim); margin: 12px 0 0; }
.bignum {
  display: block; font-family: "Anton", sans-serif; font-size: clamp(1.9rem,4vw,2.6rem);
  color: var(--gold); letter-spacing: .01em; margin: 4px 0 16px;
}

/* ── closing band ──────────────────────────────────────────────────────── */
.band { background: var(--gold); color: #17130A; padding: 46px 0; }
.band h2 { color: #17130A; }
.band p { color: #3E3110; margin: 8px 0 0; }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.band-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── footer ────────────────────────────────────────────────────────────── */
.site-foot .brand .mark { width: 66px; height: 66px; }
.site-foot .brand .bw { font-size: 1.7rem; }
.site-foot { background: var(--panel); border-top: 3px solid var(--gold); padding: 52px 0 24px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { color: var(--gold); margin-bottom: 12px; }
.foot-grid p { font-size: .95rem; }
.foot-links { display: grid; gap: 8px; }
.foot-links a { font-size: .95rem; }
.foot-links a:hover { color: var(--gold); }
.foot-bottom {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .88rem;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2,1fr); }
  .cards > :last-child:nth-child(3n+1) { grid-column: auto; }
  .cards > :last-child:nth-child(2n+1) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .chips { grid-template-columns: repeat(3,1fr); }
  .split, .est-grid { grid-template-columns: 1fr; gap: 30px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--panel);
    border-bottom: 1px solid var(--line);
  }
  .nav.open a { padding: 15px 24px; border-top: 1px solid var(--line); }
  .burger { display: block; margin-left: auto; }
  .head-cta { display: none; }
  .cards, .chips, .svc-cols { grid-template-columns: 1fr; }
  .cards > :last-child { grid-column: auto !important; max-width: none !important; }
  .site-head .wrap { height: 90px; }
  .brand .mark { width: 48px; height: 48px; }
  .brand .bw { font-size: 1.3rem; }
  .brand--img img { height: 62px; }
  .site-foot .brand--img img { height: 96px; }
  .hero .art--img img { opacity: .2; right: -26%; width: 128%; }
  .trust-in { grid-template-columns: repeat(2,1fr); }
  .t-item:nth-child(3) { border-left: 0; }
  .t-item { border-top: 1px solid var(--line); }
  .t-item:nth-child(-n+2) { border-top: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .band-in { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── estimate page ─────────────────────────────────────────────────────────
   Conversion page. Most visitors arrive from the yard-sign QR code, so the
   first field has to be on screen without scrolling: no hero, compact top,
   call-or-text strip sized to cost about one thumb of height. */
.est { padding: clamp(26px,4vw,44px) 0 clamp(56px,7vw,84px); }
.est-top { max-width: 62ch; }
.est-top h1 { font-size: clamp(2.1rem,5.4vw,3.5rem); line-height: .96; }
.est-top p { margin-top: 12px; font-size: clamp(1rem,1.5vw,1.12rem); }

.callstrip {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 26px;
  padding: 14px 20px; background: var(--gold); color: #17130A;
  border-radius: 3px; text-decoration: none;
  transition: transform .18s cubic-bezier(.16,1,.3,1), filter .18s;
}
.callstrip:hover { filter: brightness(1.06); transform: translateY(-1px); }
.callstrip:active { transform: translateY(0); }
.callstrip svg { width: 26px; height: 26px; flex: none; }
.callstrip span { display: grid; gap: 2px; }
.callstrip b {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.32rem; line-height: 1; font-weight: 700;
}
.callstrip i { font-style: normal; font-size: .86rem; opacity: .78; }

.est-grid > .form {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 28px 26px;
}
.est-side { padding-top: 4px; }
.est-side h2 { font-size: 1.5rem; margin-bottom: 12px; }
.est-side p { font-size: .97rem; margin-bottom: 12px; }

.field label b { color: var(--gold); font-weight: 700; }
.field label i { font-style: normal; opacity: .6; text-transform: none; letter-spacing: 0; }
.help { display: block; margin-top: 7px; font-size: .84rem; color: var(--dim); line-height: 1.5; }

/* Native file inputs cannot be styled, so the real control is visually hidden
   and the label is the button. Keyboard focus still lands on the input. */
.filefield input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.filebtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 18px; cursor: pointer; text-align: center;
  border: 1px dashed rgba(246,176,9,.5); border-radius: 3px;
  background: rgba(246,176,9,.05); color: var(--gold);
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.02rem; font-weight: 600;
  transition: background .18s, border-color .18s;
}
.filebtn:hover { background: rgba(246,176,9,.11); border-color: var(--gold); }
.filefield input[type=file]:focus-visible + .filebtn { outline: 2px solid var(--gold); outline-offset: 2px; }
.filebtn svg { width: 19px; height: 19px; flex: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn-block { width: 100%; justify-content: center; margin-top: 18px; }
.err {
  margin: 12px 0 0; padding: 11px 14px; font-size: .9rem;
  border-left: 3px solid #E5484D; background: rgba(229,72,77,.09); color: #FFB4B6;
}

.thanks {
  max-width: 620px; margin: 8px auto 0; padding: 44px 32px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px;
}
.thanks svg { width: 46px; height: 46px; color: var(--gold); margin-bottom: 14px; }
.thanks h2 { font-size: 2rem; }
.thanks p { margin-top: 10px; }
/* a phone number that wraps mid-number is unreadable and untappable */
.thanks .bignum { margin-top: 6px; white-space: nowrap; font-size: clamp(1.5rem,6.4vw,2.4rem); }

@media (max-width: 760px) {
  .est-grid > .form { padding: 22px 18px; }
  .callstrip { padding: 13px 16px; }
  .callstrip b { font-size: 1.18rem; }
  .est-side { border-top: 1px solid var(--line); padding-top: 26px; }
}

/* ── QR landing: digital contact card ──────────────────────────────────────
   Scanned from a business card by someone who already met Jared. Three
   thumb-sized actions, no site nav to wander into. Targets are 60px tall,
   comfortably above the 44px minimum for a hand holding a phone outdoors. */
body.bare { display: flex; flex-direction: column; min-height: 100dvh; }
.card-page {
  flex: 1; width: 100%; max-width: 460px; margin: 0 auto;
  padding: clamp(22px,5vw,40px) 22px 30px; text-align: center;
}
.card-logo { display: block; width: min(300px,78%); height: auto; margin: 0 auto 18px; }
.card-name {
  font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
  color: var(--white); font-size: 2.1rem; line-height: 1; margin: 0;
}
.card-role {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; font-size: .84rem;
  color: var(--gold); margin: 8px 0 26px;
}
.tap {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 60px; padding: 14px 18px; margin-bottom: 12px; border-radius: 3px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: 1.24rem;
  border: 2px solid transparent;
  transition: background .18s, transform .1s, border-color .18s;
}
.tap svg { width: 22px; height: 22px; flex: none; }
.tap:active { transform: translateY(1px); }
.tap-gold { background: var(--gold); color: #17130A; }
.tap-gold:hover { background: var(--gold-hi); }
.tap-line { border-color: var(--gold); color: var(--gold); }
.tap-line:hover { background: rgba(246,176,9,.12); }
.card-or {
  position: relative; margin: 22px 0 18px; color: var(--dim); font-size: .84rem;
  text-transform: uppercase; letter-spacing: .18em;
}
.card-or::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}
.card-or span { position: relative; background: var(--black); padding: 0 14px; }
.card-services {
  margin-top: 26px; font-size: .88rem; color: var(--dim); line-height: 1.8;
}
.card-email { margin-top: 10px; font-size: .93rem; }
.card-email a { color: var(--gold); }
.bare-foot {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 22px; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--dim); text-align: center;
}
.bare-foot a { color: var(--gold); }

/* ── ROC licence ───────────────────────────────────────────────────────────
   Arizona requires a licensed contractor to show the licence number in
   advertising, so it appears site-wide in the footer, not only on Contact. */
.roc { color: var(--gold); font-weight: 700; letter-spacing: .02em; }
.roc-line {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--dim); line-height: 1.6;
}
.roc-line b { color: var(--gold); font-weight: 600; }
.bare-foot span:last-child { color: var(--gold); }

/* Licence in the utility bar. On small screens the bar is already two lines,
   so the coverage note gives way rather than pushing the licence to a third. */
@media (max-width: 620px) {
  /* Each separator lives inside the span it introduces, so hiding an item
     takes its divider with it and nothing is left dangling at a line end.
     The licence wraps to its own line, so it needs no leading divider. */
  /* At this width the bar sits exactly on the wrap boundary: with the divider
     before the licence it breaks and leaves the divider dangling, without it
     the words run together. So give the licence its own line on purpose and
     drop both dividers it would otherwise need. */
  .utilbar .ub-area, .utilbar .ub-sep { display: none; }
  .utilbar .ub-roc { display: block; margin-top: 2px; }
  .utilbar { font-size: .78rem; letter-spacing: .08em; }
}
/* A licence number split across two lines reads as two things, not one. */
.utilbar .ub-roc { white-space: nowrap; font-weight: 700; }