/* ==========================================================================
   RJ & Co. Holdings — VISUAL LAYER
   Loaded after site.css. Depth, material and ornament for a dark monochrome
   site, built from CSS and SVG only — no photography, no libraries.
   ========================================================================== */

:root{
  /* A metal is a gradient, not a colour. Flat #cbb079 reads as brown; these
     stops give it a dark edge, a body and a specular highlight. */
  --metal: linear-gradient(100deg,
    #7d6434 0%, #a98c53 18%, #cbb079 38%,
    #f2e3bd 50%, #cbb079 62%, #a98c53 82%, #7d6434 100%);
  --metal-soft: linear-gradient(100deg,
    rgba(125,100,52,0) 0%, rgba(203,176,121,.55) 30%,
    rgba(242,227,189,.90) 50%, rgba(203,176,121,.55) 70%, rgba(125,100,52,0) 100%);
}

/* ---------- Film grain -----------------------------------------------------
   A perfectly flat dark field is what most reliably reads as cheap on screen:
   it bands across gradients and has no surface. A near-invisible noise plate
   gives the whole page tooth. Kept under the nav (z-index 100) and inert. */
body::after{
  content:"";
  position:fixed;
  inset:-40%;                 /* oversized so the drift never exposes an edge */
  z-index:3;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  will-change:transform;
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(-1.2%,.9%)}
  66%{transform:translate(.9%,-1.2%)}
}
@media (prefers-reduced-motion: reduce){ body::after{animation:none} }

/* ---------- Ambient depth --------------------------------------------------
   Two colour temperatures, not one: a warm pool reads as light, a cold pool
   behind it reads as air. Every gradient is off-centre — centred glows read
   as "product shot", off-centre ones as light falling across a room. */
.hero::before{
  background:
    radial-gradient(44% 34% at 62% -6%,  rgba(203,176,121,.19), transparent 64%),
    radial-gradient(28% 22% at 14% 14%,  rgba(203,176,121,.06), transparent 66%),
    radial-gradient(70% 55% at 16% 96%,  rgba(38,56,92,.40),    transparent 68%),
    radial-gradient(92% 70% at 56% 132%, rgba(22,32,54,.55),    transparent 72%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 62%,var(--bg-3) 100%);
}
.hero::after{
  background:radial-gradient(125% 120% at 46% 40%, transparent 50%, rgba(0,0,0,.60) 100%);
}
.hero{border-bottom:0}
.hero > .shell{position:relative;z-index:2}

/* The join between two dark sections is where a dark site goes muddy.
   One hairline of light holds the edge. */
.hero-edge{
  position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4;
  background:var(--metal-soft);
  opacity:.55;
}

/* Flat band fills get their own asymmetric bloom, or they read as dead space
   next to the hero. */
.band-3{
  background:
    radial-gradient(55% 45% at 88% -6%, rgba(203,176,121,.055), transparent 70%),
    radial-gradient(45% 40% at 4% 106%, rgba(203,176,121,.03),  transparent 70%),
    var(--bg-3);
}
.band-2{
  background:
    radial-gradient(50% 40% at 6% -8%, rgba(203,176,121,.045), transparent 68%),
    var(--bg-2);
}

/* ---------- The seal -------------------------------------------------------
   Replaces a raster watermark that sat dead-centre behind the headline at 4.5%
   opacity — at that size and softness it read as a compression artefact, and
   it fought the gradient-clipped h1 for contrast. Bled off the corner with
   real linework, it reads as a struck seal. */
.hero-mono{display:none}

.seal{
  position:absolute;z-index:0;
  top:-16%;right:-11%;
  width:min(46vw,540px);height:auto;
  opacity:.13;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 0 60px rgba(203,176,121,.12));
}
.hero.center .seal{top:-22%;right:-8%}
@media (max-width:760px){
  .seal{width:78vw;top:-8%;right:-26%;opacity:.09}
}

/* ---------- Rules ---------------------------------------------------------- */
.divider .bar{background:var(--metal-soft);opacity:.9}
.divider .dot{
  background:var(--gold-hi);
  box-shadow:0 0 14px rgba(203,176,121,.75),0 0 3px rgba(242,227,189,.9);
}

/* ---------- Metallic type --------------------------------------------------
   Applied only to tracked-out labels and numerals. Body copy stays solid —
   gradient-clipped paragraphs cost too much legibility. */
.eyebrow,.tagline,.card .num,.company .site,.sector-head .idx,
.timeline .yr,.quote cite,.signature{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.card .num{font-size:.78rem;letter-spacing:.3em}
.sector-head .idx{font-size:1rem}

/* Digits shouldn't jitter across a stat row. */
.stat .n,.card .num,.timeline .yr{font-variant-numeric:lining-nums tabular-nums}

/* The founder sign-off was a hand-rolled inline style duplicating .eyebrow. */
.signature{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  padding-left:.28em;
}

/* ---------- Cards ----------------------------------------------------------
   Was a 1px grey box — the most generic component on the site, reused across
   four grids. A lit gradient hairline plus reveal-on-hover corner brackets
   reads as a vitrine frame instead. */
.card{
  border:0;
  background:linear-gradient(160deg,
    rgba(255,255,255,.035),rgba(255,255,255,.006) 42%,transparent 70%);
  position:relative;
  isolation:isolate;
}
.card::before{                    /* gradient hairline frame */
  content:"";position:absolute;inset:0;z-index:-1;
  padding:1px;
  background:linear-gradient(155deg,
    rgba(203,176,121,.40) 0%,
    rgba(244,241,234,.10) 26%,
    rgba(255,255,255,.045) 55%,
    rgba(203,176,121,.13) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  transition:background .5s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 70px -34px rgba(203,176,121,.38);
}
.card:hover::before{
  background:linear-gradient(155deg,
    rgba(242,227,189,.72) 0%,
    rgba(203,176,121,.30) 30%,
    rgba(255,255,255,.07) 60%,
    rgba(203,176,121,.28) 100%);
}

/* Corner brackets — the same vocabulary used on the hero shell, so the two
   read as one system rather than two decorations. */
.card .br{
  position:absolute;width:15px;height:15px;
  border:1px solid var(--gold-deep);
  opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.card .br-tl{top:0;left:0;border-right:0;border-bottom:0}
.card .br-br{bottom:0;right:0;border-left:0;border-top:0}
.card:hover .br{opacity:.85}

/* ---------- Sector glyphs --------------------------------------------------
   One 24px line-icon per sector, repeated on the home grid and the sectors
   page — the thread that ties the two layouts together. */
.glyph{
  width:30px;height:30px;flex:none;
  opacity:.9;
  margin-bottom:1.1rem;
}
.sector-head .glyph{margin:0 0 0 .1rem;width:34px;height:34px}

/* ---------- Company rows ---------------------------------------------------- */
.company{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,
    rgba(203,176,121,.26),rgba(244,241,234,.07) 45%,transparent 88%) 1;
  border-left:2px solid transparent;
  padding-left:0;
  transition:background .4s ease,border-left-color .4s ease,padding-left .4s ease;
}
.company:hover{
  background:linear-gradient(90deg,rgba(203,176,121,.04),transparent 62%);
  border-left-color:var(--gold-deep);
  padding-left:1rem;
}
.company:last-child{border-bottom:0}

/* Entries with no published profile collapse to a single column. Left in the
   two-column grid they leave a blank right cell that reads as a placeholder
   that shipped — which undercuts the whole register. */
.company--minimal{grid-template-columns:1fr}
.company--minimal .name{
  flex-direction:row;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}

/* Label, not a badge. Borders on everything is what makes a card set look
   templated. */
.tag{
  border:0;border-bottom:1px solid var(--line-soft);
  padding:.12rem 0;margin-top:0;
}

/* ---------- Sector rhythm ---------------------------------------------------
   Five near-identical blocks read as one long scroll. An outlined numeral per
   sector gives the page a beat you can feel. Outlined, not filled — a solid
   ghost at this size turns into wallpaper. */
.sector-block{position:relative}
.sector-block::before{
  content:attr(data-num);
  position:absolute;top:-2.6rem;right:-.4rem;z-index:0;
  font-family:var(--serif);
  font-size:clamp(6rem,15vw,12.5rem);
  line-height:1;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(203,176,121,.13);
  pointer-events:none;user-select:none;
}
.sector-block > *{position:relative;z-index:1}

/* A closing caption per sector, so the reader feels progress through the list. */
.sector-foot{
  margin-top:1.4rem;text-align:right;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-2);
}

/* ---------- Hero shell brackets --------------------------------------------- */
.hero .shell::before,.hero .shell::after{
  content:"";position:absolute;width:22px;height:22px;
  border:1px solid rgba(203,176,121,.22);
  pointer-events:none;
}
.hero .shell::before{top:-1.6rem;left:-1.6rem;border-right:0;border-bottom:0}
.hero .shell::after{bottom:-1.6rem;right:-1.6rem;border-left:0;border-top:0}
@media (max-width:760px){ .hero .shell::before,.hero .shell::after{display:none} }

/* ---------- Typography ------------------------------------------------------
   The home hero is the one moment that should outsize the utility pages.
   The contrast between one large statement and several calm pages is itself
   a hierarchy cue. */
.hero.center h1{font-size:clamp(2.6rem,1.2rem + 5.2vw,5.5rem)}

/* ---------- Buttons ---------------------------------------------------------
   The sheen sweeps on hover — that is what separates a metallic fill from a
   flat mustard rectangle. */
.btn-solid{
  background:var(--metal);
  background-size:220% 100%;
  background-position:18% 0;
  border-color:transparent;
  color:#0a0d12;
  font-weight:500;
  transition:background-position .7s cubic-bezier(.22,.61,.36,1),
             box-shadow .4s ease,transform .4s ease;
}
.btn-solid:hover{
  background-position:88% 0;
  box-shadow:0 8px 34px -12px rgba(203,176,121,.7);
  transform:translateY(-1px);
  color:#0a0d12;
}
.btn:not(.btn-solid){backdrop-filter:blur(2px)}
.btn:not(.btn-solid):hover{
  background:rgba(203,176,121,.10);
  border-color:rgba(203,176,121,.60);
  color:var(--ink);
}

/* ---------- Header ----------------------------------------------------------- */
.site-head{
  background:rgba(10,13,18,.72);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(203,176,121,.30) 50%,transparent) 1;
}
.nav-list a::after{background:var(--metal)}

/* ---------- Stats ------------------------------------------------------------ */
.stats{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(203,176,121,.30),transparent 70%) 1;
}
.stat .n{
  background:linear-gradient(180deg,#fffdf8 0%,#cfc7b4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Timeline --------------------------------------------------------- */
.timeline::before{
  background:linear-gradient(180deg,
    rgba(203,176,121,.45),rgba(244,241,234,.08) 40%,transparent 96%);
}
.timeline li::before{
  background:var(--gold-hi);
  box-shadow:0 0 12px rgba(203,176,121,.7);
}

/* ---------- Quote ------------------------------------------------------------ */
.quote{position:relative}
.quote::before{
  content:attr(data-ghost);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);
  font-size:clamp(7rem,20vw,15rem);
  line-height:1;letter-spacing:.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(203,176,121,.10);
  z-index:0;pointer-events:none;user-select:none;
}
.quote > *{position:relative;z-index:1}

/* ---------- Footer ----------------------------------------------------------- */
.site-foot{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(203,176,121,.28) 50%,transparent) 1;
}

/* ---------- Grid rhythm ------------------------------------------------------
   Both card grids on the home page hold six items. At a 17rem track the shell
   fits four columns, so six items break as 4 + 2 and leave an orphan row.
   A wider track gives three columns, and six items land as two clean rows. */
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,20.5rem),1fr))}

/* ---------- Company rule, corrected -----------------------------------------
   border-image paints every border that has a width, so the 2px hover accent
   on the left was rendering the top rule's gradient down the side of every
   row. Paint the rule as a background layer instead and leave the left border
   free to do its own job. */
.company{
  border-top:0;
  border-bottom:0;
  border-image:none;
  border-left:2px solid transparent;
  background-image:linear-gradient(90deg,
    rgba(203,176,121,.26),rgba(244,241,234,.07) 45%,transparent 88%);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 0;
  transition:border-left-color .4s ease,padding-left .4s ease,background-color .4s ease;
}
.company:hover{
  background-color:rgba(203,176,121,.035);
  border-left-color:var(--gold-deep);
  padding-left:1rem;
}

/* ==========================================================================
   CORRECTIONS — from a research pass on dark-premium and metallic technique.
   Later rules win, so these override the block above.
   ========================================================================== */

/* 1. BLEND MODE. `overlay` branches on backdrop luminance. This ground sits at
      about 5%, so overlay collapses to multiply and the grain can only ever
      darken — soot, not silver. `screen` is the correct operator here.
   2. STATIC, not animated. Animated grain reads as a showreel rather than a
      holding company, and blending plus animating a full-viewport layer is the
      worst performance pairing on the page.
   3. sRGB. SVG filters interpolate in linearRGB by default, which blows the
      noise out far too hot; and raw turbulence emits colour noise, which reads
      as a cheap sensor, so it has to be desaturated in the filter itself. */
body::after{
  inset:0;
  opacity:.055;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
  animation:none;
  contain:strict;
}
@media (min-resolution:2dppx){
  body::after{background-size:150px 150px;opacity:.045}
}

/* 4. NO GRADIENT-CLIPPED TEXT BELOW DISPLAY SIZE. A seven-stop ramp needs
      roughly eight device pixels per band to resolve. Every label on this site
      is 11–16px, where the ramp cannot render and instead reads as a rendering
      fault. Marcellus is a flared serif with fine terminals, which makes it
      worse. Flat gold at these sizes, always. */
.eyebrow,.tagline,.card .num,.company .site,.sector-head .idx,
.timeline .yr,.quote cite,.signature,.foot-brand .tagline{
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:var(--gold);
}
.stat .n{
  background:linear-gradient(180deg,#fffdf8 0%,#cfc7b4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 5. GRADIENT FALLOFF. `transparent` is rgba(0,0,0,0), so a stop that fades to
      it interpolates toward black and leaves a visible halo. End stops are
      written at explicit zero alpha, and a cool fill opposite the warm one
      stops the whole thing turning sepia — that complementary light is what
      makes gold read as metal catching light rather than a brown tint. */
.hero::before{
  background:
    radial-gradient(ellipse 46% 34% at 62% -6%,
      rgba(203,176,121,.16) 0%, rgba(203,176,121,.085) 30%,
      rgba(203,176,121,.03) 56%, rgba(203,176,121,0) 78%),
    radial-gradient(ellipse 40% 34% at 10% 22%,
      rgba(96,124,178,.10) 0%, rgba(96,124,178,.04) 45%, rgba(96,124,178,0) 76%),
    radial-gradient(ellipse 76% 58% at 18% 98%,
      rgba(38,56,92,.34) 0%, rgba(38,56,92,.12) 48%, rgba(38,56,92,0) 78%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 62%,var(--bg-3) 100%);
}

/* 6. VIGNETTE. Capped, and darkened along the ground's own hue rather than to
      pure black, which greys the edge out. */
.hero::after{
  background:radial-gradient(125% 120% at 46% 40%,
    rgba(4,6,9,0) 50%, rgba(4,6,9,.28) 80%, rgba(4,6,9,.45) 100%);
}

.band-3{
  background:
    radial-gradient(ellipse 55% 45% at 88% -6%,
      rgba(203,176,121,.05) 0%, rgba(203,176,121,.02) 44%, rgba(203,176,121,0) 72%),
    var(--bg-3);
}
.band-2{
  background:
    radial-gradient(ellipse 50% 40% at 6% -8%,
      rgba(96,124,178,.05) 0%, rgba(96,124,178,.018) 46%, rgba(96,124,178,0) 74%),
    var(--bg-2);
}

/* 7. GOLD BUDGET. The category convention is 3–5% of the surface, and the
      houses that do this best never fill a large area. One filled call to
      action per page earns its place as the primary affordance; every repeat
      on the same page steps down to an outline. */
.quote .btn-solid,
section:not(.hero) .quote .btn-solid{
  background:transparent;
  border:1px solid rgba(203,176,121,.55);
  color:var(--ink);
  box-shadow:none;
}
.quote .btn-solid:hover{
  background:rgba(203,176,121,.10);
  border-color:rgba(203,176,121,.75);
  color:var(--ink);
  box-shadow:none;
  transform:translateY(-1px);
}

/* 8. PRINT. background-clip:text prints as an invisible block, and these pages
      will be printed by lawyers and registrars. */
@media print{
  .stat .n{background:none;-webkit-text-fill-color:#000;color:#000}
  body::after{display:none}
  .seal,.sector-block::before,.quote::before{display:none}
}

/* ==========================================================================
   MOBILE
   Verified at a true 375px viewport driven through the DevTools protocol —
   Chrome's --window-size does not set the layout viewport in headless mode
   (it reported 489px CSS width for a 375px window), which made the first
   round of screenshots misleading.
   ========================================================================== */

@media (max-width:760px){

  /* The sector watermark is anchored to the right edge. There is no room for
     it at this width, so it was being clipped into a half-numeral. The gold
     index beside the heading already carries the number. */
  .sector-block::before{display:none}

  /* Metadata separators are drawn as a left border, which is correct on one
     line and wrong the moment the list wraps — every item that starts a new
     row shows a stray vertical tick. Stack them instead. */
  .meta-list{flex-direction:column;gap:.35rem}
  .meta-list li + li{padding-left:0;border-left:0}

  /* Buttons stacked at different widths read as an accident. */
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .hero.center .btn-row{align-items:stretch}

  /* The ghost behind the quote has the same clipping problem as the numeral. */
  .quote::before{font-size:clamp(5rem,26vw,8rem);opacity:.7}

  /* Give the seal a little more presence now that it is the only ornament
     left in the hero, but keep it clear of the headline. */
  .seal{width:86vw;top:-6%;right:-30%;opacity:.10}

  /* Sector jump links read better as a tighter cluster than as full-width
     stacked buttons. */
  .hero nav.btn-row{flex-direction:row;flex-wrap:wrap;gap:.55rem}
  .hero nav.btn-row .btn{
    flex:1 1 auto;padding:.7rem 1rem;font-size:.7rem;letter-spacing:.14em;
  }
}

/* The company grid stacks below 820px; make sure the name block keeps its
   own rhythm rather than colliding with the description above it. */
@media (max-width:819px){
  .company{gap:.85rem}
  .company .name{margin-bottom:.15rem}
  .company--minimal .name{gap:.7rem}
  .company:hover{padding-left:.6rem}
}