@charset "UTF-8";
/* ==========================================================================
   Paul Rubell, Attorney At Law, P.C.
   Static rebuild of www.paulrubell.com
   Values transcribed from the live site's computed styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, variable)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/montserrat-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/opensans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/opensans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/opensans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks, so swapping in the webfont doesn't shift layout. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  ascent-override: 100.4%;
  descent-override: 26.03%;
  line-gap-override: 0%;
  size-adjust: 96.42%;
}
@font-face {
  font-family: 'Open Sans Fallback';
  src: local('Arial');
  ascent-override: 101.65%;
  descent-override: 27.86%;
  line-gap-override: 0%;
  size-adjust: 105.16%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --blue: #0075bb;          /* rgb(0,117,187)   links, dividers, nav bar     */
  --blue-badge: #0367a6;    /* rgb(3,103,166)   Super Lawyers badge border   */
  --dark: #272725;          /* rgb(39,39,37)    footer + home utility bar    */
  --topbar-inner: #2e2e2e;  /* rgb(46,46,46)    interior utility bar         */
  --gray-body: #6e7072;     /* body copy - 4.97:1 on white (was #888a8c, 3.46) */
  --footer-link: #3f9fe0;   /* 5.16:1 on the dark footer (was #0075bb, 3.04)   */
  --footer-muted: #9a9c9e;  /* 5.43:1 on the dark footer (was #888a8c, 4.32)   */
  --gray-333: #333333;
  --nav-dark: #2f313d;      /* rgb(47,49,61)    home nav + dropdown items    */
  --contact-ink: #3c3e47;   /* rgb(60,62,71)    contact page blocks          */
  --alt-bg: #f9f9f9;        /* practice areas band                           */
  --rule: #d9d9d9;          /* transaction separators                        */
  --page-bg: #eeeeee;
  --mont: 'Montserrat', 'Montserrat Fallback', Arial, sans-serif;
  --sans: 'Open Sans', 'Open Sans Fallback', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--gray-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
hr { border: none; margin: 0; }
b, strong { font-weight: 700; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: #fff;
  color: var(--blue);
  font-family: var(--mont);
  font-size: 14px;
}
.skip-link:focus { left: 0; }

/* Visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.m-header a:focus-visible,
.drawer a:focus-visible,
.m-header a:focus-visible,
.m-header button:focus-visible,
.hero a:focus-visible {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   4. Page shell + grid
   The live site centres a 960px column inside rows that carry their own
   horizontal padding; "full" rows let the column run the row's full width.
   -------------------------------------------------------------------------- */
.site {
  background: #fff;
  position: relative;
  min-height: 900px;
}

.row {
  position: relative;
  width: 100%;
  padding: 15px 40px;
}
.wrap {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
/* Homepage sections previously ran full-bleed; they now share the 960px
   column the interior pages use. */
.row--full > .wrap { max-width: 960px; }

.col { position: relative; width: 100%; }
.c2  { width: 16.66667%; }
.c4  { width: 33.33333%; }
.c5  { width: 41.66667%; }
.c6  { width: 50%; }
.c7  { width: 58.33333%; }
.c10 { width: 83.33333%; }
.c12 { width: 100%; }

/* Duda's gutter model: 0.75% each side, halved at the ends, none when alone. */
.wrap > .col { padding-left: .75%; padding-right: .75%; }
.wrap > .col:first-child { padding-left: 0; padding-right: 1.5%; }
.wrap > .col:last-child  { padding-right: 0; padding-left: 1.5%; }
.wrap > .col:only-child  { padding-left: 0; padding-right: 0; }
.wrap > .col.no-gutter   { padding-left: 0; padding-right: 0; }

/* --------------------------------------------------------------------------
   5. Utility bar
   -------------------------------------------------------------------------- */
.topbar { padding: 5px 40px; background: var(--topbar-inner); }


.topbar .social { text-align: left; }
.topbar .social a { display: inline-block; margin-right: 3px; }


.icon-mail { width: 23px; height: 23px; color: #fff; }


.topbar .contact-line {
  padding: 2px 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  text-align: right;
  color: #fff;
}
.topbar .contact-line a { color: var(--footer-link); }
.topbar .contact-line a:hover { text-decoration: underline; }

.topbar .contact-col { padding-left: 0 !important; }

/* --------------------------------------------------------------------------
   6. Header rows
   -------------------------------------------------------------------------- */
/* Interior pages: solid blue band, nav right, brand column intentionally
   empty (the live site leaves it empty on every page but the home page). */
/* One white nav band on every page. The old site used this on the homepage
   only and left the other six with an empty blue band. */
.navrow {
  padding: 0 40px 10px;
  background: #fff;
}
.navrow > .wrap > .col { padding-left: 0; padding-right: 0; }
.navrow .nav-col { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 768px) {
  .page-inner .site-header { position: relative; z-index: 2; }
}

.brandbar { padding: 15px 0; }
.brandbar .wrap {
  max-width: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
}
.brandbar .name-col  { width: auto; flex: 0 1 auto; padding: 0 0 2px; }
.brandbar .badge-col { width: 80px; flex: 0 0 80px; padding: 0; }

.badge-link { display: block; }
.brand-link { display: block; }
.brand-link:hover .brand-name { color: var(--blue); }
.brand-name, .brand-sub { display: block; }
.badge-img {
  width: 100%;
  height: auto;
  border: 1px solid var(--blue-badge);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
}

.brand-name {
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-333);
  text-align: left;
}
.brand-sub {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-333);
  text-align: left;
}

/* --------------------------------------------------------------------------
   7. Primary navigation
   -------------------------------------------------------------------------- */
.mainnav {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  position: static;
  width: calc(100% - 64px);
  max-width: 416px;
  padding: 12px 0;
  margin: 20px 0 0 64px;
}
.mainnav > ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.mainnav > ul > li {
  display: flex;
  justify-content: flex-start;
  position: relative;
  font-weight: 400;
}
.mainnav > ul > li > a {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: relative;
  padding: 0 15px;
  font-family: var(--mont);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--nav-dark);
}
.mainnav > ul > li > a:hover { color: var(--blue); }

.mainnav .nav-item-text { display: block; white-space: nowrap; }

/* The underline that slides in on hover / for the current page. */
.mainnav > ul > li > a .nav-item-text::before,
.mainnav > ul > li > a .nav-item-text::after,
.drawer nav > ul > li > a .nav-item-text::before,
.drawer nav > ul > li > a .nav-item-text::after {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  border: 0 solid transparent;
  border-top: 2px solid currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease-out, opacity .3s ease-out;
}
.mainnav > ul > li > a .nav-item-text::before,
.drawer nav > ul > li > a .nav-item-text::before {
  margin-bottom: .2em;
  border-top-color: transparent;
}
.mainnav > ul > li > a .nav-item-text::after,
.drawer nav > ul > li > a .nav-item-text::after { margin-top: .2em; }

.mainnav > ul > li > a:hover .nav-item-text::after,
.mainnav > ul > li > a:focus-visible .nav-item-text::after,
.mainnav > ul > li.is-current > a .nav-item-text::after {
  opacity: 1;
  transform: scaleX(1);
}
.mainnav > ul > li.is-current > a { font-weight: 700; }

.nav-chevron {
  display: inline-block;
  width: 19px;
  height: 18px;
  padding-left: 10px;
  vertical-align: top;
  flex: none;
}
.nav-chevron svg { width: 9px; height: 18px; overflow: visible; }

/* Dropdown */
.mainnav .subnav {
  position: absolute;
  top: 100%;
  left: 15px;
  display: flex;
  flex-direction: column;
  min-width: 133.2px;
  background: #fff;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  z-index: 100;
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.mainnav li:hover > .subnav,
.mainnav li:focus-within > .subnav,
.mainnav li.is-open > .subnav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mainnav .subnav > li { display: flex; flex-direction: column; }
.mainnav .subnav > li:not(:last-child) { border-bottom: 1px solid #d1d1d1; }
.mainnav .subnav > li > a {
  display: flex;
  align-items: center;
  padding: 15px 30px 15px 15px;
  font-family: var(--mont);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--nav-dark);
  white-space: nowrap;
}
.mainnav .subnav > li > a:hover { color: var(--blue); }
.mainnav .subnav > li.is-current > a { color: #fff; background: var(--blue); }

/* Mega panel. The drawer reuses this markup and renders it as a plain list,
   so everything specific to the wide panel is scoped to .mainnav .has-mega.
   The li goes position:static so the panel anchors to .mainnav and can be
   wider than the "Practice Areas" item itself. */
.mainnav > ul > li.has-mega { position: static; }
.mainnav .has-mega > .subnav {
  top: 100%;
  left: auto;
  right: 0;
  margin-top: 10px;   /* .navrow's bottom padding: lands flush with the band */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 620px;
  max-width: calc(100vw - 80px);
  padding: 6px;
  border-top: 3px solid var(--blue);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
/* A transparent lip that spans the gap between the nav item and the panel, so
   the pointer never crosses dead space on its way down. */
.mainnav .has-mega > .subnav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  height: 42px;
}
.mainnav .has-mega > .subnav > li { border-bottom: 0; }
.mainnav .has-mega > .subnav > li > a {
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 14px 16px 16px;
  border-radius: 3px;
  white-space: normal;
  transition: background-color .2s ease-out;
}
.mainnav .has-mega > .subnav > li > a:hover,
.mainnav .has-mega > .subnav > li > a:focus-visible { background: var(--alt-bg); }
.mainnav .has-mega > .subnav .nav-item-text { font-weight: 700; }
.mainnav .has-mega .sub-desc {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--gray-body);
}
.mainnav .has-mega > .subnav > li.is-current > a .sub-desc { color: #fff; }

.mainnav .has-mega .subnav-all {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid #e4e4e4;
}
.mainnav .has-mega > .subnav > li.subnav-all > a {
  flex-direction: row;
  align-items: center;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--blue);
  white-space: nowrap;
}
.mainnav .has-mega > .subnav > li.subnav-all > a .nav-item-text { font-weight: 400; }
.mainnav .has-mega > .subnav > li.subnav-all > a .nav-item-text::before,
.mainnav .has-mega > .subnav > li.subnav-all > a .nav-item-text::after { content: none; }
.mainnav .has-mega > .subnav > li.subnav-all > a::after { content: '\2192'; padding-left: 8px; }

/* --------------------------------------------------------------------------
   8. Mobile header + drawer  (hidden until the small breakpoint)
   -------------------------------------------------------------------------- */
.m-header, .drawer, .drawer-overlay, .hamburger { display: none; }

/* --------------------------------------------------------------------------
   9. Home hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 156px 50px 206px;
  background-color: rgba(0, 0, 0, .5);
  overflow: hidden;
  text-align: start;
}
/* Two-slide background rotation, matching the live hero. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  transform: translateY(100%);
}
.hero-slide.is-active { transform: translateY(0); }
.hero-slides.is-animating .hero-slide { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.hero-slide.is-leaving { transform: translateY(-100%); }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .63;
  z-index: 1;
}
.hero > .wrap { position: relative; z-index: 2; }

.hero h1 {
  width: 798px;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 85px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
.hero h2 {
  width: 100%;
  max-width: 100%;
  margin: -8px auto 8px;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
.hero .tagline {
  width: 798px;
  max-width: 100%;
  margin: 23px 0 8px;
  padding: 2px 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-body);
  text-align: left;
}
.hero .tagline span { font-weight: 300; color: #fff; }

.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 57px;
  width: 315px;
  position: relative;
  max-width: 100%;
  margin: 45px 0 10px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-shadow: var(--gray-body) 0 3px 11px 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}
.btn-call .text {
  display: inline-block;
  max-width: 98%;
  padding: 10px 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   10. Home sections
   -------------------------------------------------------------------------- */
.welcome { padding: 60px 40px; background: #fff; text-align: center; }
.welcome .lede {
  width: calc(100% - 208px);
  max-width: 1060px;
  margin: 18px auto 8px;
  padding: 2px 0;
}
.welcome .lede h2 {
  font-family: var(--mont);
  font-size: 35px;
  font-weight: 700;
  color: var(--nav-dark);
  text-align: center;
}
.welcome .lede h2 a { color: var(--blue); }
.welcome .lede h2 a:hover { text-decoration: underline; }

.divider { display: flow-root; width: 41.99px; max-width: 100%; margin: 0 auto; text-align: center; }
.divider hr { border-top: 2px solid var(--blue); margin: 10px 0; }
.divider--left { margin: 0; }
.divider--thick hr { border-top-width: 4px; }
.divider--wide { width: 100%; }
.divider--dotted hr { border-top: 2px dotted var(--blue); }

.welcome .kicker { margin: 8px 0; padding: 2px 0; }
.welcome .kicker p {
  font-size: 26px;
  font-weight: 400;
  text-align: center;
}
.welcome .kicker span {
  font-family: var(--mont);
  color: var(--gray-333);
}
.welcome .body {
  width: calc(100% - 208px);
  max-width: 1060px;
  margin: 21px auto 8px;
  padding: 2px 0;
  text-align: left;
}
.welcome .body p {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: left;
}
.welcome .body p + p { margin-top: 24px; }

/* Practice-area gallery -------------------------------------------------- */
.practice { padding: 60px 40px; background: var(--alt-bg); text-align: center; }
.practice h2 {
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 35px;
  font-weight: 700;
  color: var(--nav-dark);
  text-align: center;
}

.gallery { padding: 10px; margin: 10px 0; }
.gallery-inner { padding: 5px; }
.gallery-row { display: flex; flex-wrap: wrap; }
.gallery-col { width: 33.33333%; }
.gallery-thumb { padding: 5px; }
.gallery-card {
  position: relative;
  display: block;
  overflow: hidden;
}
.gallery-card .card-img {
  display: block;
  width: 100%;
  padding-top: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.gallery-card .caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  background: var(--blue);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.gallery-card .caption-title {
  display: block;
  max-width: 100%;
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}
.gallery-card .caption-text {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  color: #fff;
}
.gallery-card .caption-copy {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

/* Highlighted transactions ----------------------------------------------- */
.transactions { padding: 60px 40px; background: #fff; }
.transactions .intro-col { padding: 0 16px 16px !important; }
@media (min-width: 768px) {
  .transactions .intro-col > div,
  .transactions .intro-col > h2 { position: relative; }
  .transactions .intro-col { align-self: flex-start; position: sticky; top: 24px; }
}
.transactions .intro-col h2 {
  max-width: 480.64px;
  margin: 0 0 16px;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 35px;
  font-weight: 700;
  color: #000;
  text-align: left;
}
.transactions .intro-col .divider { margin: 0; }
.transactions .intro-col p {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-333);
  text-align: left;
}
.transactions .intro-col .intro-body { max-width: 409.64px; margin: 8px 0; padding: 2px 0; }
.transactions .intro-col .intro-body p + p { margin-top: 24px; }

.transactions .list-col { padding: 0 0 0 30px !important; }
.txn { display: flex; flex-wrap: wrap; position: relative; margin: 20px 0; }
.txn:first-child { margin-top: 0; }
.txn:last-child { margin-bottom: 0; }
.txn-rule { padding: 10px 0; margin: 0; }
.txn-rule hr {
  box-sizing: content-box;
  border-top: 1px solid var(--rule);
  min-height: 2px;
  margin: 10px 0;
}
/* The Blue Orb entry's separator sits inside its own column and has no
   leading gap after the preceding rule — reproduced from the live page. */
.txn--flush { margin-top: 0 !important; }
.txn-logo {
  width: 41.66667%;
  min-height: 100px;
  padding: 90px 0;
  border-radius: 8px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.txn-body { width: 58.33333%; padding: 8px 0 8px 24px; }
.txn-body h3 {
  margin: 8px 0 0;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  color: #000;
  text-align: left;
}
.txn-body h3.ink-333 { color: var(--gray-333); }
.txn-body .txn-copy { margin: 8px 0; padding: 2px 0; }
.txn:first-child .txn-copy { margin-bottom: 0; }
.txn-body p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-333);
  text-align: left;
}
.txn-body p + p { margin-top: 22px; }
.txn-body p strong { font-weight: 500; }
.txn-body p.attrib strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   11. Interior pages
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  height: 238px;
  padding: 77px 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .65;
}
/* The about hero attaches its background to the viewport, so `cover` scales
   against the viewport rather than the 238px band. Matches the live site. */
.page-hero--parallax { background-attachment: fixed; }
.page-hero--about { background-position: 50% -29.93px; }

.section { padding: 80px 30px 30px; }
.section--tail { padding: 0 30px 80px; }
.section--pa-intro { padding: 80px 40px 30px; }
.section--pa-list { padding: 30px 40px; }
.section--practice { padding: 80px 40px; }
.section--contact-title { padding: 80px 30px 50px; }
.section--contact-blocks { padding: 0 30px 80px; background: #fff; }
.contact-spacer { height: 100px; background: #fff; }

.page-title {
  margin: 8px 0;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 35px;
  font-weight: 400;
  color: var(--dark);
  text-align: left;
}
.page-title--center { text-align: center; }
.page-title--flush { margin: 0 0 8px; }

.prose {
  margin: 10px 0 0;
  /* modifiers below carry the per-page top margins used by the live site */
  padding: 2px 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-body);
  text-align: left;
}
.prose p + p { margin-top: 24px; }
.prose--gap23 { margin: 23px 0 0; }
.prose--gap8  { margin: 8px 0; }
.prose--15 { margin: 8px 0; }
/* Blocks that reproduce the live page's literal blank lines instead of margins. */
.prose--lines p + p { margin-top: 0; }
.prose--16 { font-size: 16px; font-weight: 400; }
.prose--16 p + p { margin-top: 22px; }
.prose em, .prose i { font-style: italic; }

.subhead {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-body);
}

.mission-title {
  margin: 8px 0;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  color: var(--blue);
  text-align: left;
}

.gutter-30 { padding: 0 30px !important; }


/* Contact page blocks ----------------------------------------------------- */
.contact-block .cb-body { padding: 2px 0; }
.contact-block--address .cb-body,
.contact-block--email .cb-body { margin-bottom: 8px; }
.contact-block p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--contact-ink);
  text-align: center;
}
.contact-block p strong,
.contact-block p b { font-weight: 700; }
/* The live widget is a fixed 154.38px block offset 71.8px from the column's
   left edge, which reads as centred at 1440 and right-of-centre at 768. */
.contact-social { width: 154.38px; margin: 16px 71.8px 0; text-align: center; }
.contact-social a {
  display: inline-block;
  margin-right: 10px;
  color: var(--blue);
  vertical-align: top;
}
.contact-social svg { width: 20px; height: 25px; }

/* Closing call to action ---------------------------------------------------- */
.section--cta { padding: 0 30px 80px; }
.cta-title {
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  color: var(--nav-dark);
}
.cta-copy {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--gray-body);
}
.cta-actions { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 50px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.btn--primary { background: var(--blue); color: #fff; border: 2px solid var(--blue); }
.btn--primary:hover { background: #005c93; border-color: #005c93; }
.btn--ghost { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.btn--ghost:hover { background: var(--blue); color: #fff; }
.contact-block .directions { margin-top: 10px; }
.contact-block .directions a { color: var(--blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: #666; }
.footer-main { padding: 50px 40px; }
.footer-brand .brand-block { margin: 8px 0; padding: 0 0 2px; }
.footer-brand h2 {
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
.footer-brand p {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  text-align: left;
}
.footer-badge { margin-top: 26px; }
.footer-badge img {
  width: 108px;
  height: auto;
  border: 4px solid var(--blue-badge);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .25) 0 3px 11px 0;
}
.footer-contact { padding-left: 30px !important; }
.footer-contact .contact-head { margin: 20px 0 8px; padding: 2px 0; }
.footer-contact h2 {
  font-family: var(--mont);
  font-size: 22px;
  font-weight: 400;
  color: var(--footer-link);
  text-align: right;
}
.footer-address { margin: 8px 0; }
.footer-address p,
.footer-links p {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align: right;
}
.footer-links { margin: 8px 0; }
/* Tap targets: the bare 22px-tall links were below the 24px minimum and sat
   flush against each other. */
.footer-links p + p { margin-top: 6px; }
.footer-links a { display: inline-block; padding: 3px 0; }
.footer-links a { color: var(--footer-link); }
.footer-links a:hover { text-decoration: underline; }
.footer-links .mail { font-style: italic; }

.footer-legal { padding: 15px 40px; }
.copyright {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--footer-muted);
  text-align: center;
}
.copyright a { color: var(--footer-link); text-decoration: underline; }

/* --------------------------------------------------------------------------
   13. Medium screens (768 – 1024): the gallery caption stops being a hover
        overlay and sits underneath the image, exactly as on the live site.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .gallery-card .caption {
    position: relative;
    padding: 15px;
  }
}

/* Above 1025px the caption is a hover/focus overlay sitting on the image, the
   way the old site had it: three photographs that reveal their practice area
   on hover. Below that it stays under the image (block 13 above), so touch
   visitors never lose the labels. The caption text is only made transparent,
   never removed, so it still names the link for assistive technology. */
@media (min-width: 1025px) {
  .gallery-card { position: relative; overflow: hidden; }
  .gallery-card .caption {
    position: absolute;
    inset: 0;
    padding: 15px 25px;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .3s ease-out, transform .3s ease-out;
  }
  .gallery-card:hover .caption,
  .gallery-card:focus-visible .caption,
  .gallery-card:focus-within .caption {
    opacity: 1;
    transform: scale(1);
  }
  .gallery-card .card-img { transition: transform .45s ease-out; }
  .gallery-card:hover .card-img,
  .gallery-card:focus-within .card-img { transform: scale(1.04); }
}

/* --------------------------------------------------------------------------
   14. Small screens (≤ 767): the live site's mobile design
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* --- header swap ---------------------------------------------------- */
  .topbar, .navrow, .navrow--home, .brandbar { display: none; }

  .m-header {
    display: block;
    position: relative;
    z-index: 5;
  }
  .m-header .bar {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: var(--blue);
    min-height: 75px;
  }
  .m-header .bar > div { display: flex; align-items: center; height: 55px; }
  .m-header .slot-left  { width: 16.66667%; padding: 0 15px; }
  .m-header .slot-mid   { width: 66.66667%; padding: 0 10px; justify-content: center; }
  .m-header .slot-right { width: 16.66667%; padding: 0 10px 0 0; justify-content: flex-end; }
  .m-header .wordmark { display: block; margin-top: 6px; }
  .m-header .wordmark img { width: 127px; height: auto; }
  .m-header .phone { display: inline-block; }
  .m-header .phone svg { width: 35px; height: 31px; fill: #fff; }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 17.5px;
    left: 10px;
    width: 40px;
    height: 40px;
    padding: 13px 9px;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 14;
  }
  .hamburger .slice {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
  }
  .hamburger[aria-expanded='true'] .slice:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger[aria-expanded='true'] .slice:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded='true'] .slice:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 75%;
    max-width: 281.25px;
    height: 100%;
    padding: 30px 20px 0;
    background: var(--blue);
    overflow: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 13;
  }
  .drawer.is-open { transform: translateX(0); }

  .drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 6;
  }
  .drawer-overlay.is-visible { opacity: 1; visibility: visible; }

  .drawer nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 5px 0;
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .03em;
    color: #fff;
    text-align: left;
  }
  .drawer .nav-chevron { padding-left: 10px; }
  .drawer .nav-chevron svg { width: 11px; height: 20px; }
  .drawer .subnav { padding-left: 0; }
  .drawer .subnav > li > a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .03em;
    color: #fff;
  }
  .drawer .subnav { display: block; }
  /* The mega panel's extras are desktop-only; the drawer's parent row already
     reaches /practiceareas on its second tap. */
  .drawer .sub-desc,
  .drawer .subnav-all { display: none; }

  .drawer nav { padding-bottom: 15px; }
  .drawer .drawer-foot { display: flow-root; margin-top: auto; padding-bottom: 25px; }
  .drawer .drawer-foot .foot-line { margin: 8px 0; padding: 2px 0; }
  .drawer .drawer-foot .label {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
  }
  .drawer .drawer-foot p {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
  }
  .drawer .drawer-foot .icons { margin: 15px 0 0; }
  .drawer .drawer-foot .icons a {
    display: inline-block;
    margin-right: 11px;
    color: #fff;
  }
  .drawer .drawer-foot .icons svg { width: 25px; height: 30px; }

  /* --- home ------------------------------------------------------------ */
  .hero { padding: 50px 15px; text-align: center; }
  .hero-slide { background-position: 50% 50%; }
  .hero > .wrap > .col { padding: 0 15px !important; }
  .hero h1 { width: auto; margin: 8px 0; font-size: 36px; }
  .hero h2 { margin: 8px 0; font-size: 36px; }
  .hero .tagline { width: auto; margin: 13px 0 8px; font-size: 15px; }
  .btn-call {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 57px;
  }

  .welcome { padding: 50px 0; }
  .welcome > .wrap > .col { padding: 0 15px !important; }
  .welcome .lede { width: 100%; margin: 8px 0; }
  .welcome .lede h2 { font-size: 24px; }
  .divider { width: 65px; }
  .divider--wide { width: 100%; }
  .welcome .kicker { margin: 30px 0 8px; }
  .welcome .kicker p { font-size: 26px; }
  .welcome .body { width: 100%; margin: 30px 0 8px; }
  .welcome .body p { font-size: 15px; }
  .welcome .body p + p { margin-top: 20px; }

  .practice { padding: 15px 0; }
  .practice > .wrap > .col { padding: 0 15px !important; }
  .practice h2 { margin: 0 0 8px; font-size: 24px; }
  .gallery { padding: 0; margin: 0 0 10px; }
  .gallery-inner { padding: 5.5px; }
  .gallery-col { width: 100%; }
  .gallery-thumb { padding: 5.5px; }
  .gallery-card .caption { padding: 15px 10px; }
  .gallery-card .caption-title { font-size: 21px; }

  .transactions { padding: 40px 16px; }
  .transactions .intro-col,
  .transactions .list-col { width: 100%; }
  .transactions .intro-col { padding: 16px 16px 24px !important; }
  .transactions .list-col { padding: 0 15px !important; }
  .transactions .intro-col h2 { max-width: none; margin: 6px 0 0; font-size: 24px; }
  .transactions .intro-col .intro-body { max-width: none; margin: 8px 0 0; }
  .transactions .intro-col p { font-size: 15px; }
  .transactions .intro-col .intro-body p + p { margin-top: 20px; }

  .txn { margin: 20px 0 0; }
  .txn:first-child { margin-top: 0; }
  .txn-logo, .txn-body { width: 100%; }
  .txn-logo { padding: 80px 0; }
  .txn-body { padding: 0; }
  .txn-body h3 { margin: 8px 0; font-size: 23px; }
  .txn-body .txn-copy { margin: 8px 0; }
  .txn:first-child .txn-body h3 { margin: 16px 0 0; }
  .txn:first-child .txn-copy { margin: 4px 0 16px; }
  .txn:first-child + .txn-rule { margin: 12px 0 10px; }

  /* --- interior pages -------------------------------------------------- */
  .page-hero { height: 135px; padding: 50px 25px; background-position: 50% 50% !important; }
  .page-hero--parallax { background-attachment: scroll; }
  .section { padding: 30px 0 10px; }
  .section--practice,
  .section--pa-intro { padding: 50px 0; }
  .section--tail { padding: 0 0 50px; }
  .section--pa-list { padding: 15px 0; }
  .section--contact-title { padding: 30px 0 10px; }
  .section--contact-blocks { padding: 0 0 30px; }
  .section > .wrap > .col,
  .section--practice > .wrap > .col,
  .section--pa-intro > .wrap > .col,
  .section--pa-list > .wrap > .col,
  .section--tail > .wrap > .col,
  .section--contact-title > .wrap > .col,
  .section--contact-blocks > .wrap > .col { padding: 0 15px !important; }
  .gutter-30 { padding: 0 15px !important; }
  .page-title { font-size: 24px; margin: 0 0 8px; }
  .prose { margin: 8px 0; font-size: 15px; }
  .prose--15 { font-size: 15px; }
  .prose--16 { font-size: 16px; }
  .prose--16 { font-size: 16px; }
  .mission-title { font-size: 23px; }

  .services > li { padding: 0; margin: 0 0 10px; }
  .services .biglink { min-height: 100px; }
  .services .list-image { width: 33%; height: 100px; background-position: 50% 49%; }
  .services .list-text { padding: 0 0 0 35%; font-size: 14px; }
  .services .item-name { margin: 0; font-size: 14px; font-weight: 700; }
  .services .item-text { font-size: 14px; }
  .services .link { padding: 0 0 0 35%; margin: 0; }
  .services .button-text { padding: 5px 0; font-size: 14px; line-height: .8; color: var(--gray-body); }
  .services .button-text::after { content: none; }

  .contact-block { width: 100%; padding: 0 15px !important; margin: 0; }
  .contact-block--phone .cb-body   { margin: 8px 0; }
  .contact-block--address .cb-body { margin: 18px 0 8px; }
  .contact-block--email .cb-body   { margin: 8px 0; }
  .contact-social { width: auto; margin: 10px 0 0; }
  .contact-social svg { width: 28px; height: 33px; }
  .contact-social a { margin-right: 0; }
  .contact-spacer { height: 115px; }

  /* --- footer ----------------------------------------------------------- */
  .footer-main { padding: 50px 13px; }
  .footer-main > .wrap > .col { width: 100%; padding: 0 15px !important; }
  .footer-main > .wrap > .footer-contact { padding: 20px 15px 0 !important; }
  .footer-brand .brand-block { margin: 8px 0; padding: 2px 0; }
  .footer-brand h2 { font-size: 23px; }
  .footer-brand p { font-size: 15px; }
  .footer-badge { margin-top: 22px; text-align: center; }
  .footer-badge img { width: 185px; margin: 0 auto; }
  /* The old site hid the street address on phones; it stays visible now. */
  .footer-contact .contact-head { display: none; }
  .footer-address { margin: 8px 0; text-align: center; }
  .footer-address p { text-align: center; }
  .footer-links { margin: 8px 0; padding: 2px 0; text-align: center; }
  .footer-links p { text-align: center; }
  .footer-legal { padding: 15px 0; }
  .footer-legal > .wrap > .col { padding: 0 15px !important; }
}

/* --------------------------------------------------------------------------
   16. Background imagery
   Kept in CSS (rather than inline styles) so each breakpoint can pull a
   size-appropriate file. Widths mirror the layout breakpoints.
   -------------------------------------------------------------------------- */
.hero-slide--1        { background-image: url(../images/hero-home-1920.jpg); }
.hero-slide--2        { background-image: url(../images/hero-home-2-1920.jpg); }
.page-hero--about     { background-image: url(../images/hero-about-1920.jpg); }
.page-hero--practiceareas{ background-image: url(../images/card-business-1440.jpg); }

.card-img--business   { background-image: url(../images/card-business-1000.jpg); }
.card-img--corporate  { background-image: url(../images/card-corporate-1000.jpg); }
.card-img--realestate { background-image: url(../images/card-realestate-1000.jpg); }

.list-image--business   { background-image: url(../images/card-business-640.jpg); }
.list-image--realestate { background-image: url(../images/card-realestate-640.jpg); }
.list-image--corporate  { background-image: url(../images/card-corporate-640.jpg); }

.txn-logo--southstar      { background-image: url(../images/logo-southstar-1222.jpg); }
.txn-logo--sunation       { background-image: url(../images/logo-sunation-1024.png); }
.txn-logo--naboso         { background-image: url(../images/logo-naboso-925.png); }
.txn-logo--indaba         { background-image: url(../images/logo-indaba-1026.png); }
.txn-logo--cyberus        { background-image: url(../images/logo-cyberus-594.png); }
.txn-logo--blueorb        { background-image: url(../images/logo-blueorb-200.jpeg); }
.txn-logo--morganstanley  { background-image: url(../images/logo-morganstanley-854.jpg); }

@media (max-width: 1024px) {
  .hero-slide--1        { background-image: url(../images/hero-home-1024.jpg); }
  .hero-slide--2        { background-image: url(../images/hero-home-2-1024.jpg); }
  .page-hero--about     { background-image: url(../images/hero-about-1024.jpg); }
  .page-hero--practiceareas{ background-image: url(../images/card-business-1000.jpg); }
  .card-img--business   { background-image: url(../images/card-business-640.jpg); }
  .card-img--corporate  { background-image: url(../images/card-corporate-640.jpg); }
  .card-img--realestate { background-image: url(../images/card-realestate-640.jpg); }
  .txn-logo--southstar  { background-image: url(../images/logo-southstar-640.jpg); }
  .txn-logo--sunation   { background-image: url(../images/logo-sunation-640.png); }
  .txn-logo--indaba     { background-image: url(../images/logo-indaba-640.png); }
  .txn-logo--naboso     { background-image: url(../images/logo-naboso-640.png); }
  .txn-logo--morganstanley { background-image: url(../images/logo-morganstanley-640.jpg); }
}

@media (max-width: 767px) {
  .hero-slide--1        { background-image: url(../images/hero-home-640.jpg); }
  .hero-slide--2        { background-image: url(../images/hero-home-2-640.jpg); }
  .page-hero--about     { background-image: url(../images/hero-about-640.jpg); }
  .page-hero--practiceareas{ background-image: url(../images/card-business-640.jpg); }
  .card-img--business   { background-image: url(../images/card-business-640.jpg); }
  .card-img--corporate  { background-image: url(../images/card-corporate-640.jpg); }
  .card-img--realestate { background-image: url(../images/card-realestate-640.jpg); }
}

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* No background rotation when the visitor asks for reduced motion. */
  .hero-slides .hero-slide:not(.is-active) { display: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. RevealFx "Mask Wipe" — the page entrance shared with the other projects.
        A left-to-right mask wipe with a blur settle and a 6px rise. The inline
        head script adds .reveal-arm before the first paint and swaps it for
        .reveal-play on DOMContentLoaded; 700ms later it removes that too, so
        no filter/transform survives to trap fixed-position descendants.
   -------------------------------------------------------------------------- */
.reveal-arm .reveal-fx,
.reveal-play .reveal-fx {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
          mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.reveal-arm .reveal-fx {
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  filter: blur(10px);
  transform: translateY(6px);
}
.reveal-play .reveal-fx {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  filter: blur(0);
  transform: translateY(0);
  transition:
    -webkit-mask-position .5s cubic-bezier(.25, .4, .25, 1),
    mask-position .5s cubic-bezier(.25, .4, .25, 1),
    filter .5s cubic-bezier(.25, .4, .25, 1),
    transform .5s cubic-bezier(.25, .4, .25, 1);
}
/* Belt and braces: the head script already bails on reduce, but a mid-session
   preference change must not leave anything masked. */
@media (prefers-reduced-motion: reduce) {
  .reveal-arm .reveal-fx,
  .reveal-play .reveal-fx {
    -webkit-mask-image: none;
            mask-image: none;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   16. Design pass — 2026
   Same layout, same palette. What changes is the finish: one radius scale,
   one shadow scale, one easing curve, and a media tile that makes seven
   logos of seven different shapes read as a set.
   ========================================================================== */

:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  /* Layered rather than a single blur: a tight contact shadow for the edge,
     a wide ambient one for the lift. */
  --sh-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --sh-md: 0 2px 4px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .08);
  --sh-lg: 0 4px 8px rgba(16, 24, 40, .05), 0 16px 40px rgba(16, 24, 40, .12);
  --hairline: #e6e8ec;
  --ease: cubic-bezier(.25, .4, .25, 1);
}

/* --- type ---------------------------------------------------------------
   Montserrat at display sizes is loose by default. Tightening the tracking
   and balancing the ragged edge is most of the difference between "a heading"
   and "a designed heading". */
.hero h1,
.hero h2,
.page-title,
.practice h2,
.transactions .intro-col h2,
.cta-title,
.txn-body h3,
.welcome .lede h2 {
  letter-spacing: -.022em;
  text-wrap: balance;
}

.page-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.14;
}
.practice h2,
.transactions .intro-col h2 { line-height: 1.12; }
.txn-body h3 { line-height: 1.2; }

/* --- the section accent rule --------------------------------------------
   Was a 42px hairline. Now a short rounded bar that reads as deliberate. */
.divider hr {
  height: 3px;
  min-height: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
}
.divider { width: 56px; }
.divider--thick hr { height: 4px; min-height: 4px; }
.divider--wide { width: 100%; }
.divider--wide hr { height: 1px; min-height: 1px; background: var(--hairline); }
.divider--dotted hr {
  height: 0;
  min-height: 0;
  border-top: 2px dotted var(--blue);
  background: none;
}

/* --- transaction media tiles --------------------------------------------
   The set mixes wordmarks, a stacked logo and one photograph, at seven
   different aspect ratios. One fixed 4:3 tile holds all of them; logos sit
   inside a generous inset (background-origin: content-box makes `contain`
   respect the padding), so a wide wordmark and a squat badge end up the same
   optical size. The photograph opts out and fills the tile edge to edge. */
.txn {
  align-items: flex-start;   /* else the tile stretches to the row and aspect-ratio never applies */
}
.txn-logo {
  width: 41.66667%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  /* Fixed, not percentage: percentage padding resolves against the parent's
     width, which blew the inset out to a third of the tile. */
  padding: 20px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: #fff;
  background-origin: content-box;
  background-size: contain;
  box-shadow: var(--sh-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.txn-logo--photo {
  padding: 0;
  background-origin: padding-box;
  background-size: cover;
  overflow: hidden;
}
.txn { border-radius: var(--r-md); }
.txn:hover .txn-logo {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.txn-rule hr { border-top-color: var(--hairline); }

/* --- practice-area tiles ------------------------------------------------- */
.gallery-thumb { padding: 8px; }
.gallery-card {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.gallery-card:hover,
.gallery-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

/* --- buttons -------------------------------------------------------------
   A press state matters more than a hover state on touch, so both are here. */
.btn {
  box-shadow: var(--sh-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }
.btn-call {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 10px 30px rgba(0, 0, 0, .22);
  background: rgba(0, 0, 0, .14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.btn-call:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, .3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2), 0 16px 40px rgba(0, 0, 0, .28);
}
.btn-call:active { transform: translateY(0); }

/* --- header + nav chrome -------------------------------------------------- */
.badge-img {
  border-radius: 6px;
  box-shadow: var(--sh-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.badge-link:hover .badge-img {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}
.mainnav .has-mega > .subnav {
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-lg);
}
.mainnav .has-mega > .subnav > li > a { border-radius: var(--r-sm); }

/* --- contact page blocks -------------------------------------------------- */
.contact-block {
  padding: 28px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.contact-block:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

/* --- links + focus -------------------------------------------------------- */
.prose a,
.contact-block .directions a,
.welcome .lede h2 a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  transition: color .18s var(--ease);
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: rgba(0, 117, 187, .18); }

@media (prefers-reduced-motion: reduce) {
  .txn:hover .txn-logo,
  .gallery-card:hover,
  .gallery-card:focus-within,
  .btn:hover,
  .btn-call:hover,
  .badge-link:hover .badge-img,
  .contact-block:hover { transform: none; }
}

/* --- small screens -------------------------------------------------------- */
@media (max-width: 767px) {
  .txn-logo {
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 22px 30px;
  }
  .gallery-thumb { padding: 7px; }
  .page-title { font-size: 30px; }
  .contact-block { padding: 22px 18px; }
}

/* --- contact page --------------------------------------------------------
   The blocks are the grid columns themselves, so the gap has to come off the
   column width rather than from padding, and the section's 100px dead band
   (a Duda spacer with nothing in it) tightens up now that the cards carry
   their own weight. */
.contact-spacer { height: 40px; }
.section--contact-blocks > .wrap { gap: 22px; }
.section--contact-blocks > .wrap > .contact-block {
  width: calc(33.33333% - 15px);
  padding: 30px 24px;
}
/* Was a fixed 154px block offset 71.8px from the left, which only read as
   centred at one width. */
.contact-block .contact-social {
  width: auto;
  margin: 18px 0 0;
}
.contact-block .cb-body p a { color: var(--blue); }

@media (max-width: 767px) {
  .contact-spacer { height: 24px; }
  .section--contact-blocks > .wrap { gap: 14px; }
  .section--contact-blocks > .wrap > .contact-block {
    width: 100%;
    padding: 24px 20px !important;
  }
}

/* --- follow-ups ----------------------------------------------------------
   Mega-panel hover was --alt-bg (#f9f9f9), which is the practice-areas band
   tint and too faint to register as a hover on white. Its own token now, so
   darkening it here doesn't darken that band. */
:root { --mega-hover: #e9ecf1; }
.mainnav .has-mega > .subnav > li > a:hover,
.mainnav .has-mega > .subnav > li > a:focus-visible { background: var(--mega-hover); }

/* Taller interior hero band. The static background-position values below are
   only used before the parallax script takes over on desktop. */
.page-hero { height: 400px; }
@media (max-width: 767px) { .page-hero { height: 220px; } }
/* The darker hover tint drops --gray-body to 4.21:1, under AA, so the blurb
   darkens with it. Lighthouse never sees this — it doesn't test hover states. */
.mainnav .has-mega > .subnav > li > a:hover .sub-desc,
.mainnav .has-mega > .subnav > li > a:focus-visible .sub-desc { color: var(--gray-333); }
.mainnav .has-mega > .subnav > li > a:hover .nav-item-text,
.mainnav .has-mega > .subnav > li > a:focus-visible .nav-item-text { color: #005c93; }

/* --- reveal: the hero plate ----------------------------------------------
   Same wipe as .reveal-fx, but mask only. A filter or transform on (or above)
   the hero re-crops its background-attachment: fixed; a mask does not. This is
   what lets the hero band wipe in with the rest of the page instead of sitting
   the animation out. */
.reveal-arm .reveal-plate,
.reveal-play .reveal-plate {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
          mask-image: linear-gradient(to right, #000 0%, #000 25%, transparent 50%);
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.reveal-arm .reveal-plate {
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}
.reveal-play .reveal-plate {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  transition:
    -webkit-mask-position .5s cubic-bezier(.25, .4, .25, 1),
    mask-position .5s cubic-bezier(.25, .4, .25, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-arm .reveal-plate,
  .reveal-play .reveal-plate {
    -webkit-mask-image: none;
            mask-image: none;
    transition: none;
  }
}

/* --- brand lockup --------------------------------------------------------
   The sub-line is set to the measured width of "Paul Rubell" (154.67px at
   Montserrat 700/26px) so the two lines rule to the same edge. Open Sans 400
   at 16px lands within 0.02px of it, so no tracking correction is needed —
   the letter-spacing hook is here only so the pair can be retuned together if
   either face or size changes. */
.brand-sub,
.footer-brand .brand-block p {
  font-size: 16px;
  letter-spacing: 0;
}

/* --- consolidated practice areas -----------------------------------------
   The three areas were separate pages with their own h1; they are now one
   page with a single h1 ("Practice Areas") and three h2 sections addressed
   by #business-law / #corporate-law / #real-estate-law. */
.area-title {
  margin: 8px 0;
  padding: 2px 0;
  font-family: var(--mont);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--dark);
  text-align: left;
  text-wrap: balance;
}
.section--pa-area { padding: 20px 30px 40px; }
/* Deep links must not land with the heading jammed against the viewport top. */
.section--pa-area { scroll-margin-top: 24px; }

/* The closing CTA heading is an h3 now, sized to match. */
.cta-title { font-size: 20px; }

@media (max-width: 767px) {
  .area-title { font-size: 22px; }
  .section--pa-area { padding: 10px 0 30px; }
  .section--pa-area > .wrap > .col { padding: 0 15px !important; }
}