/* ─────────────────────────────────────────────────────────────────────────
   rs.css — Romero Studios interior pages.

   Direction: editorial archive. Not a SaaS landing page, a well-made annual
   report. Controlled margins, hard rules, numbered sections, image that
   bleeds off the page, captions that behave like captions.

   v1 failed because all three pages shared one template and the vertical
   rhythm had canyons in it: 4300px of page for 2000px of content, every block
   left-aligned on the same axis, one flat surface throughout. Fixed here by
   tightening the scale, varying the surface, and giving each page its own job:
     /about     a profile piece
     /services  an index you scan
     /stories   an evidence file
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:#0A0908; --panel:#0F0D0B; --panel-2:#141110;
  --line:rgba(212,160,48,.14); --line-2:rgba(212,160,48,.30); --rule:rgba(242,235,216,.10);
  --gold:#D4A030; --gold-l:#E6B947; --gold-d:#8A6418;
  --ink:#F2EBD8; --ink-2:#C6BCA6; --ink-3:#8E836F;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:40px; --s8:48px; --s9:64px; --s10:80px;

  --t-micro:11px; --t-small:14px; --t-body:16.5px; --t-lead:19px; --t-h3:21px;
  --t-h2:clamp(26px,3vw,38px); --t-h1:clamp(38px,5.4vw,68px);

  --r-sm:8px; --r-md:14px; --r-full:999px;
  --ease:cubic-bezier(.25,.1,.25,1); --ease-out:cubic-bezier(0,0,.58,1); --fast:150ms;
  --gut:clamp(20px,5vw,64px); --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--bg);color:var(--ink);
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:var(--t-body);line-height:1.58;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-l);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

h1,h2,h3,.cond{font-family:'Barlow Condensed','Barlow',Impact,sans-serif;
  font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.004em}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* Tightened rhythm. v1 left 250px gaps that read as empty, not airy. */
.band{padding-block:var(--s9)} .band--tight{padding-block:var(--s9)}
/* Surface variation: 4000px of one flat background is what made v1 feel dead */
.panel{background:var(--panel);border-block:1px solid var(--line)}
.panel2{background:var(--panel-2);border-block:1px solid var(--line)}

.marker{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6)}
.marker__n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:var(--t-micro);
  letter-spacing:.18em;color:var(--gold);white-space:nowrap}
.marker__r{flex:1;height:1px;background:var(--rule)}
.eyebrow{font-size:var(--t-micro);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.lead{font-size:var(--t-lead);color:var(--ink-2);max-width:54ch}
.body{color:var(--ink-2);max-width:58ch}
.cap{font-size:var(--t-small);color:var(--ink-3)}

.topbar{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:var(--s4);min-height:58px}
.wordmark{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.11em;font-size:20px;color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.wordmark em{font-style:normal;color:var(--gold)}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.topbar nav a{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding-inline:var(--s3);min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--fast) var(--ease)}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a[aria-current="page"]{color:var(--gold)}
@media (max-width:720px){.topbar nav a.opt{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:50px;
  padding:0 var(--s7);border:0;border-radius:var(--r-full);cursor:pointer;background:var(--gold);
  color:#160F03;font-family:'Barlow',sans-serif;font-weight:800;font-size:14.5px;letter-spacing:.07em;
  text-transform:uppercase;transition:transform var(--fast) var(--ease-out),background var(--fast) var(--ease)}
.btn:hover{background:var(--gold-l);color:#160F03} .btn:active{transform:scale(.98)}
.btn--quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--quiet:hover{background:transparent;color:var(--gold-l);box-shadow:inset 0 0 0 1px var(--gold)}

/* Profile hero: portrait bleeds off the right edge and the text sits over it */
.profile{position:relative;min-height:clamp(540px,80vh,740px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--line)}
.profile__img{position:absolute;inset:0 0 0 auto;width:min(62%,880px)}
.profile__img img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;
  filter:grayscale(1) contrast(1.1) brightness(.72)}
.profile__veil{position:absolute;inset:0;
  background:linear-gradient(95deg,var(--bg) 22%,rgba(10,9,8,.88) 42%,rgba(10,9,8,.15) 70%,rgba(10,9,8,.5) 100%),
             linear-gradient(to top,var(--bg) 2%,transparent 32%)}
.profile__txt{position:relative;width:100%;padding-block:var(--s10) var(--s9)}
.profile h1{max-width:13ch;margin-top:var(--s4)}
.profile .lead{margin-top:var(--s5);max-width:44ch}
@media (max-width:860px){.profile{min-height:0;display:block}
  .profile__img{position:relative;width:100%;height:290px}
  .profile__veil{background:linear-gradient(to top,var(--bg) 6%,rgba(10,9,8,.28) 58%)}
  .profile__txt{padding-block:var(--s7) var(--s8)}}

/* Figures as a ruled band, not four floating numbers */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:var(--s7) var(--s5);border-left:1px solid var(--rule)}
.stat:first-child{border-left:0;padding-left:0}
.stat__v{font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:.84;
  font-size:clamp(34px,4.4vw,58px);color:var(--gold);font-variant-numeric:tabular-nums}
.stat__l{color:var(--ink-3);font-size:var(--t-small);margin-top:var(--s3);max-width:20ch;line-height:1.35}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{padding:var(--s5) var(--s4)}
  .stat:nth-child(odd){border-left:0;padding-left:0}.stat:nth-child(n+3){border-top:1px solid var(--rule)}}

/* Work: the artifact is the hero, alternating sides */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:var(--s7);align-items:center}
.work--flip>.work__txt{order:2}
.work__txt h3{color:var(--ink);font-size:clamp(24px,2.6vw,34px)}
.work__txt .body{margin-top:var(--s4)} .work__txt .btn{margin-top:var(--s6)}
.work+.work{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--rule)}
@media (max-width:900px){.work,.work--flip{grid-template-columns:1fr;gap:var(--s5)}
  .work--flip>.work__txt{order:0}.work+.work{margin-top:var(--s8);padding-top:var(--s8)}}

.shot{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--line-2),0 24px 60px rgba(0,0,0,.55)}
.shot img{width:100%;height:auto;display:block;transition:transform 700ms var(--ease)}
a:hover .shot img,.row:hover .shot img{transform:scale(1.04)}
.shot__bar{position:absolute;inset:0 0 auto 0;height:30px;display:flex;align-items:center;gap:6px;
  padding-inline:var(--s3);background:rgba(8,7,6,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);z-index:2}
.shot__dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.shot__url{margin-left:var(--s2);font-size:11px;color:var(--ink-2);letter-spacing:.02em}
.shot__live{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:5px}
.shot__live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.idx{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:40px 180px 1fr 90px;gap:var(--s5);align-items:center;
  padding-block:var(--s5);border-bottom:1px solid var(--rule);color:inherit;
  transition:background var(--fast) var(--ease)}
.row:hover{background:rgba(212,160,48,.045)}
.row__n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;
  color:var(--gold-d);align-self:start;padding-top:4px}
.row__t{display:block;font-size:clamp(19px,1.8vw,24px);color:var(--ink)}
.row:hover .row__t{color:var(--gold-l)}
.row__d{display:block;color:var(--ink-3);font-size:15px;margin-top:3px;max-width:52ch}
.row__go{font-size:var(--t-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);text-align:right;opacity:0;transform:translateX(-6px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.row:hover .row__go,.row:focus-visible .row__go{opacity:1;transform:none}
.row .shot{border-radius:var(--r-sm)} .row .shot__bar{height:20px}
.row .shot__url,.row .shot__live{display:none} .row .shot__dot{width:5px;height:5px}
@media (max-width:860px){.row{grid-template-columns:32px 1fr;gap:var(--s3)}
  .row__go{display:none}.row .shot{grid-column:1/-1;margin-top:var(--s3)}}

.exhibit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.exhibit>*{background:var(--bg);padding:var(--s7) var(--s6);display:flex;flex-direction:column}
.exhibit .q__who{margin-top:auto}
@media (max-width:900px){.exhibit{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.exhibit{grid-template-columns:1fr}}
.q__mark{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:44px;color:var(--gold-d);
  line-height:.6;display:block;margin-bottom:var(--s3)}
.q__t{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(19px,1.9vw,23px);
  line-height:1.24;color:var(--ink);text-wrap:balance}
.q__who{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.q__name{font-weight:700;color:var(--gold-l);font-size:14.5px;display:block}
.q__where{color:var(--ink-3);font-size:13px;display:block;margin-top:2px}

.tally{display:flex;flex-wrap:wrap;gap:8px}
.tally span{width:26px;height:52px;border-radius:4px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold-d));transform-origin:bottom}
@media (prefers-reduced-motion:no-preference){
  [data-reveal].in .tally span{animation:rise 560ms var(--ease) backwards;
    animation-delay:calc(var(--i,0) * 42ms)}}
@keyframes rise{from{transform:scaleY(.08);opacity:0}to{transform:none;opacity:1}}

.moves{counter-reset:mv;border-top:1px solid var(--rule)}
.move{counter-increment:mv;display:grid;grid-template-columns:72px 1fr;gap:var(--s5);
  padding-block:var(--s7);border-bottom:1px solid var(--rule)}
.move::before{content:counter(mv,decimal-leading-zero);font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:40px;color:var(--gold-d);line-height:.9}
.move h3{color:var(--gold-l)} .move p{color:var(--ink-2);margin-top:var(--s2);max-width:58ch}
@media (max-width:560px){.move{grid-template-columns:48px 1fr;gap:var(--s4)}.move::before{font-size:28px}}

.pull{text-align:center}
.pull p{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,5.2vw,68px);line-height:1.02;color:var(--ink);max-width:17ch;
  margin-inline:auto;text-wrap:balance}
.pull p em{font-style:normal;color:var(--gold)}

.close{text-align:center;display:grid;gap:var(--s5);justify-items:center}
.close p{color:var(--ink-2);max-width:48ch}
.foot{border-top:1px solid var(--line);padding-block:var(--s6);color:var(--ink-3);font-size:13px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center}
.foot a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s1)}
.foot a:hover{color:var(--gold-l)}

[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity 600ms var(--ease),transform 600ms var(--ease);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important}}

/* ── The break: one inverted band per page ────────────────────────────────
   Three thousand pixels of gold-on-black reads as one long note. Flipping the
   palette once per page gives the eye an event and makes the thing it holds
   the thing you remember. Dark ink on gold measures 7.9:1, well over AA. */
.invert {
  background: linear-gradient(170deg, var(--gold-l) 0%, var(--gold) 45%, #B98A22 100%);
  color: #160F03; border-block: 1px solid #8A6418;
}
.invert h2, .invert h3, .invert p, .invert .eyebrow { color: #160F03; }
.invert .eyebrow { opacity: .62 }
.invert.pull p em, .invert .pull p em { color: #160F03; box-shadow: inset 0 -.13em 0 rgba(22,15,3,.32) }
.invert .stat { border-left-color: rgba(22,15,3,.22) }
.invert .stat__v { color: #160F03 }
.invert .stat__l { color: rgba(22,15,3,.72) }
.invert .tally span { background: #160F03; box-shadow: none }
.invert a:not(.btn) { color: #160F03; text-decoration: underline; text-underline-offset: 3px }
.invert .btn { background: #160F03; color: var(--gold-l) }
.invert .btn:hover { background: #241A08; color: var(--gold-l) }
.invert .marker__r { background: rgba(22,15,3,.22) }
.invert .marker__n { color: rgba(22,15,3,.7) }

/* The pull quote earns the whole band */
.invert.pull p, .invert .pull p { color: #160F03 }

/* Quotes arrive in sequence rather than all at once */
@media (prefers-reduced-motion: no-preference) {
  .exhibit > figure { transition-delay: calc(var(--qi, 0) * 70ms) }
}

/* ── The index page opened on plain text, the only first screen with nothing
      to look at. The eleven products scroll past instead. ─────────────────── */
.strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.strip__row { display: flex; gap: var(--s4); width: max-content; animation: slide 64s linear infinite; }
.strip img { width: 208px; height: auto; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 26px rgba(0,0,0,.4);
  opacity: .5; transition: opacity var(--fast) var(--ease); }
.strip:hover img { opacity: .78 }
.strip:hover .strip__row { animation-play-state: paused }
@keyframes slide { from { transform: none } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .strip__row { animation: none } }
@media (max-width: 700px) { .strip img { width: 148px } }

/* ── Every product carries the number that proves it worked. That is the whole
      argument of the page: repeatable, and measurable without a meeting. ──── */
.row{grid-template-columns:36px 170px 1fr 190px 86px}
.row__m{font-size:13px;line-height:1.4;color:var(--ink-3);border-left:1px solid var(--rule);padding-left:var(--s4)}
.row__m b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin-bottom:3px}
.row__m span{color:var(--ink-2)}
@media (max-width:1080px){
  .row{grid-template-columns:36px 150px 1fr 86px}
  .row__m{grid-column:3;border-left:0;padding-left:0;margin-top:var(--s3)}
}
@media (max-width:860px){
  .row{grid-template-columns:30px 1fr}
  .row__m{grid-column:1/-1;border-left:2px solid var(--line-2);padding-left:var(--s4);margin-top:var(--s4)}
}
.ship{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);border-radius:var(--r-full);
  padding:4px 11px;margin-top:var(--s3)}
.new{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#160F03;background:var(--gold);border-radius:3px;padding:2px 6px;margin-left:var(--s2);vertical-align:3px}

/* The index rows live inside the inverted band too. v1 of .invert only covered
   headings and paragraphs, so four whole rows rendered light-on-gold. */
.invert .row{border-bottom-color:rgba(22,15,3,.18)}
.invert .row:hover{background:rgba(22,15,3,.07)}
.invert .idx{border-top-color:rgba(22,15,3,.18)}
.invert .row__n{color:rgba(22,15,3,.55)}
.invert .row__t{color:#160F03}
.invert .row:hover .row__t{color:#160F03;text-decoration:underline;text-underline-offset:4px}
.invert .row__d{color:rgba(22,15,3,.76)}
.invert .row__m{border-left-color:rgba(22,15,3,.2)}
.invert .row__m b{color:rgba(22,15,3,.6)}
.invert .row__m span{color:rgba(22,15,3,.82)}
.invert .ship{color:#160F03;border-color:rgba(22,15,3,.3)}
.invert .row__go{color:#160F03}
.invert .new{background:#160F03;color:var(--gold-l)}
.invert .shot{box-shadow:inset 0 0 0 1px rgba(22,15,3,.25),0 10px 28px rgba(22,15,3,.22)}

/* `.invert a:not(.btn)` (0,2,1) was out-specifying `.invert .row__go` (0,2,0) and
   repainting the row link in mid-brown at 5.07:1. Row links are not prose links. */
.invert a.row__go, .invert .row a[href]{color:#160F03;text-decoration:none}
.invert .row a[href]:hover{text-decoration:underline;text-underline-offset:4px}