*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;overflow-x:hidden;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto}a{transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}.rrw-nav{gap:1rem;position:relative;z-index:100;padding-top:.25rem!important;padding-bottom:.25rem!important}/* nav logo sized by the h-24 utility (set in shared.js) — no forced box, no cover-crop, no scale */.rrw-nav a{white-space:nowrap}.rrw-nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.75rem 1.25rem}.rrw-nav-links a{font-size:.8125rem}.rrw-nav-cta{flex-shrink:0}.rrw-page-label{max-width:72rem;margin:0 auto;padding:0 1.5rem .75rem;font-size:.75rem;letter-spacing:.14em}.rrw-section{scroll-margin-top:6rem}.rrw-card{height:100%;display:flex;flex-direction:column}.rrw-card a:last-child{margin-top:auto}.rrw-price-grid{align-items:stretch}.rrw-price-grid>*{min-width:0}.rrw-footer{line-height:1.6}@media(max-width:767px){.rrw-nav{align-items:flex-start;gap:.875rem}.rrw-nav-links{display:none}.rrw-nav-cta{font-size:.75rem;padding:.8125rem .875rem}.rrw-page-label{padding-left:1.5rem;padding-right:1.5rem}.rrw-price-grid{grid-template-columns:repeat(1,minmax(0,1fr))}.rrw-price-grid>*{border-right:0!important;border-bottom:1px solid currentColor}.rrw-price-grid>*:last-child{border-bottom:0}.rrw-mobile-stack{display:flex;flex-direction:column;align-items:stretch}.rrw-mobile-stack>a{width:100%;text-align:center}}@media(min-width:768px) and (max-width:1023px){.rrw-nav-links{gap:.5rem .75rem}.rrw-nav-links a{font-size:.8125rem}.rrw-nav-cta{font-size:.75rem;padding:.625rem .75rem}}@media(min-width:768px){.rrw-nav{justify-content:flex-start}.rrw-nav>div[class~="md:flex"]{margin-left:auto}}
/* Mega menu */
.rrw-mega-wrap{position:relative}
.rrw-mega{display:none}
.rrw-mega.open{display:block;position:absolute;left:50%;margin-left:-50vw;width:100vw;top:100%;z-index:100;background:#f8f8f8!important;box-shadow:0 4px 12px rgba(0,0,0,.15);border-bottom:4px solid #000}
.rrw-mega-inner{max-width:80rem;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.rrw-mega-col{padding:2rem 2rem;border-right:2px solid #000}
.rrw-mega-col:last-child{border-right:none}
.rrw-mega-heading{font-size:.875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#000;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.rrw-mega-heading svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:#e34b32}
.rrw-mega-link{display:block;padding:.75rem 0;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.06)}
.rrw-mega-link:hover{color:#e34b32}.rrw-mega-link:last-child{border-bottom:none}
.rrw-mega-desc{font-size:.75rem;color:#666;text-transform:none;letter-spacing:normal;font-weight:400;margin-top:.25rem;line-height:1.4;white-space:normal}
.rrw-mega-foot{border-top:2px solid #000;padding:1rem 1.5rem;font-size:.75rem;color:#000;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:767px){.rrw-mega{position:static;border-bottom:none;display:none}.rrw-mega.open{display:block}.rrw-mega-inner{grid-template-columns:1fr;gap:0}.rrw-mega-col{border-right:none;border-bottom:1px solid rgba(0,0,0,.1);padding:1rem 0 0}.rrw-mega-col:last-child{border-bottom:none}}
/* Desktop nav adapts to the width it is displayed on: menu links wrap and tighten instead of overflowing the bar. */
@media(min-width:768px){.rrw-nav>div[class~="md:flex"]{flex-wrap:wrap;justify-content:flex-end}}
@media(min-width:768px) and (max-width:1279px){.rrw-nav>div[class~="md:flex"]{gap:.5rem 1rem}}
/* Portfolio work-samples gallery.
   The page switcher is a radio group styled with plain CSS: the checked input
   unhides the matching panel through a general sibling selector, so it works
   with no JavaScript and degrades to the first panel (Home) if a selector ever
   fails to match. Each panel is one browser window: a fixed-height box that
   scrolls through the full-page capture, so a 3,500px screenshot still occupies
   the same space as a 1,300px one. Phone captures were dropped because the
   handset column doubled the height of the section to show a second view of a
   page the window already shows. */
.rrw-sample-body{position:relative;padding:0 2rem 2rem}
.rrw-shot-input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.rrw-shot-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.rrw-shot-tab{display:inline-block;border:2px solid #000;background:#f8f8f8;padding:.375rem .75rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;cursor:pointer}
.rrw-shot-tab:hover{background:#000;color:#fff}
/* The switcher is radio + ~ with no script, so it needs one rule per page
   index. Eight indices are covered (the longest sample is six); a sample with
   more pages than that would silently show the first capture for its extra
   tabs, so add another pair of rules when it happens. */
.rrw-shot-input:nth-of-type(1):checked ~ .rrw-shot-tabs label:nth-of-type(1),
.rrw-shot-input:nth-of-type(2):checked ~ .rrw-shot-tabs label:nth-of-type(2),
.rrw-shot-input:nth-of-type(3):checked ~ .rrw-shot-tabs label:nth-of-type(3),
.rrw-shot-input:nth-of-type(4):checked ~ .rrw-shot-tabs label:nth-of-type(4),
.rrw-shot-input:nth-of-type(5):checked ~ .rrw-shot-tabs label:nth-of-type(5),
.rrw-shot-input:nth-of-type(6):checked ~ .rrw-shot-tabs label:nth-of-type(6),
.rrw-shot-input:nth-of-type(7):checked ~ .rrw-shot-tabs label:nth-of-type(7),
.rrw-shot-input:nth-of-type(8):checked ~ .rrw-shot-tabs label:nth-of-type(8){background:#000;color:#fff}
.rrw-sample:has(.rrw-shot-input:focus-visible) .rrw-shot-tabs{outline:3px solid #f59e0b;outline-offset:3px}
.rrw-shot-panels{margin-top:1.25rem}
.rrw-shot-panel{display:none}
.rrw-shot-panel:first-child{display:block}
.rrw-shot-input:nth-of-type(1):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(1):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(1){display:block}
.rrw-shot-input:nth-of-type(2):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(2):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(2){display:block}
.rrw-shot-input:nth-of-type(3):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(3):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(3){display:block}
.rrw-shot-input:nth-of-type(4):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(4):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(4){display:block}
.rrw-shot-input:nth-of-type(5):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(5):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(5){display:block}
.rrw-shot-input:nth-of-type(6):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(6):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(6){display:block}
.rrw-shot-input:nth-of-type(7):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(7):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(7){display:block}
.rrw-shot-input:nth-of-type(8):checked ~ .rrw-shot-panels > .rrw-shot-panel{display:none}
.rrw-shot-input:nth-of-type(8):checked ~ .rrw-shot-panels > .rrw-shot-panel:nth-child(8){display:block}
/* The window fills the card, so the tab row above it, the window, and the caption
   below all share one left edge. The capture is generated at this exact width
   (1140px) so it is never scaled past 1:1. */
.rrw-shot-stage{margin:0}
.rrw-shot-figure{margin:0;min-width:0}
.rrw-shot-window{border:2px solid #000;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.10)}
.rrw-shot-bar{display:flex;align-items:center;gap:.5rem;border-bottom:2px solid #000;background:#f0eee9;padding:.4rem .6rem}
.rrw-shot-dots{display:flex;gap:.2rem;flex:0 0 auto}
.rrw-shot-dots>i{display:block;width:.5rem;height:.5rem;border:1px solid #000;border-radius:999px;background:#fff}
.rrw-shot-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.65rem;color:rgba(0,0,0,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrw-shot-hint{flex:0 0 auto;margin-left:auto;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(0,0,0,.45)}
.rrw-shot-frame{height:26rem;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#000 #e5e5e5;overscroll-behavior:contain}
.rrw-shot-frame img{display:block;width:100%;height:auto}
.rrw-shot-frame::-webkit-scrollbar{width:10px}
.rrw-shot-frame::-webkit-scrollbar-track{background:#e5e5e5}
.rrw-shot-frame::-webkit-scrollbar-thumb{background:#000}
/* Selected work reuses the work-samples card shell, but at grid density with one
   lead graphic per project instead of a scrollable desktop/phone pair: only some
   of these are sites, and there are no full-page captures for them. Cards flex
   column so the graphic sits on a shared baseline across a row. The list holds
   exactly three projects, so it runs three across once there is room for a
   readable text column and one row on phones. Between those it runs two across,
   where the last row holds the third card on its own. */
.rrw-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem}
@media(max-width:1199px){.rrw-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rrw-work-grid>.rrw-sample{display:flex;flex-direction:column}
.rrw-work-grid .rrw-sample-body{margin-top:auto}
.rrw-shot-plate{border:2px solid #000;background:#fff;aspect-ratio:16/10;overflow:hidden}
.rrw-shot-plate img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.rrw-shot-frame:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
.rrw-shot-caption{margin-top:.5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(0,0,0,.55)}
.rrw-shot-caption a{text-decoration:underline}
.rrw-shot-caption a:hover{color:#e34b32}
@media(max-width:767px){.rrw-sample-body{padding:0 1.25rem 1.25rem}.rrw-shot-tabs{gap:.375rem}.rrw-shot-tab{padding:.3rem .55rem;font-size:.6875rem}.rrw-shot-hint{display:none}.rrw-shot-frame{height:17rem}.rrw-work-grid{grid-template-columns:minmax(0,1fr)}}