@charset "utf-8";
/* =========================================================================
   Ben Barnes Group — static rebuild
   Type, colour and layout values carried over from the original site.

   Layout note: percentage padding on a flex item resolves against the flex
   CONTAINER's width, not the item's own. Every column therefore holds an
   .inner wrapper, and all percentage padding lives on that wrapper so the
   proportions match the original column-relative values.
   ========================================================================= */

/* ---- tokens ------------------------------------------------------------ */
:root{
  --black:#000000;
  --white:#ffffff;
  --text:#252525;
  --accent:#431f0b;          /* button / link brown */
  --steel:#7e9aa9;
  --offwhite:#f6f6f6;
  --line:#d6d6d6;
  --navy:#0b1e33;            /* hero tagline band */
  --mute:#767676;            /* office detail copy (original #c4c4c4 was 1.9:1 on white) */

  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:"Archivo",Georgia,serif;
  --max:1700px;

  /* Section headings: uppercase Georgia wants real tracking and tight leading
     — the original's 35px/40px at 0.5px sat cramped and undersized on a wide
     screen. Fluid so it holds from 1024 to 2560. */
  --h-size:clamp(28px, 2.15vw, 44px);
  --h-lh:1.1;
  --h-ls:0.085em;

  /* Body: 1.4 leading was tight for a 20px serif, and letter-spacing works
     against lowercase serif text. Measure is capped so it never runs long. */
  --body-size:20px;
  --body-lh:1.62;
  --body-ls:0;
  --measure:34em;

  --disp-size:clamp(34px, 3.4vw, 62px);            /* "Contact us"       */
  --disp-lh:1.06;
  --btn-size:16px;                                 /* buttons            */
  --hdr-h:145px;                                   /* header overlay     */
  --ink:7,15,26;                                   /* scrim base, navy-black */
}
@media (max-width:1024px){
  :root{ --hdr-h:115px; }
}
@media (max-width:767px){
  :root{ --body-size:18px; --hdr-h:80px; }
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--offwhite);
  color:var(--text);
  font:400 var(--body-size)/var(--body-lh) var(--serif);
  letter-spacing:var(--body-ls);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; border:0; }
a{ color:inherit; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:400; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--white); color:var(--black); padding:14px 22px;
  font:400 14px/1 var(--serif); letter-spacing:1px; text-transform:uppercase;
}
.skip:focus{ left:0; }

/* ---- shared layout ----------------------------------------------------- */
/* Sections run edge to edge, as they do on the original — every top-level
   section there is full-width. Only the two genuinely boxed rows on the
   contact page take the 1700px cap, via .row--boxed. */
.row{
  display:flex; flex-wrap:wrap; align-items:stretch; width:100%;
}
.row--boxed{ max-width:var(--max); margin:0 auto; }
@media (max-width:1024px){ .row--boxed{ max-width:1024px; } }
@media (max-width:767px){  .row--boxed{ max-width:767px; } }
.col{ display:flex; flex-direction:column; min-width:0; }
.col > .inner{ display:flex; flex-direction:column; flex:1 1 auto; }
.col.v-top    > .inner{ justify-content:flex-start; }
.col.v-center > .inner{ justify-content:center; }
.col.v-bottom > .inner{ justify-content:flex-end; }

.section{ position:relative; display:flex; }
.section > .row{ min-height:100vh; position:relative; z-index:2; }
@media (max-width:1024px){ .section > .row{ min-height:600px; } }

/* full-bleed photo sections: the image sits on its own layer so it can be
   parallaxed without dragging the copy along with it. The layer is flush with
   the section — the drift is applied to background-position inside the crop
   that `cover` already discards, so the framing at rest is unchanged. */
.photo-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.photo-bg .layer{
  position:absolute; inset:0;
  background-position:0% 0%; background-size:cover; background-repeat:no-repeat;
  will-change:background-position;
}
/* Scrim. The copy sits in the left column, so the shading is directional:
   dense enough to carry text on the left, clearing to nothing on the right so
   the photograph still reads. Tinted with the brand navy rather than flat
   black. Two stops do the work — a wide ramp plus a soft floor for the
   occasional light subject (a pale suit) drifting under the text. */
.photo-bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(96deg,
      rgba(var(--ink),.93) 0%,
      rgba(var(--ink),.88) 22%,
      rgba(var(--ink),.62) 44%,
      rgba(var(--ink),.22) 66%,
      rgba(var(--ink),0)   84%),
    linear-gradient(to top, rgba(var(--ink),.34), rgba(var(--ink),0) 55%);
}
@media (max-width:767px){
  /* stacked: the copy covers the full width, so the scrim has to as well */
  .photo-bg::after{
    background:
      linear-gradient(to bottom, rgba(var(--ink),.62), rgba(var(--ink),.86)),
      linear-gradient(96deg, rgba(var(--ink),.5), rgba(var(--ink),.2));
  }
}

/* ---- typography -------------------------------------------------------- */
.h-section{
  font:400 var(--h-size)/var(--h-lh) var(--serif);
  letter-spacing:var(--h-ls); text-transform:uppercase;
}
/* a short rule sets the heading off from the photograph behind it and gives
   each section a consistent, institutional entry point */
.h-section::before{
  content:""; display:block; width:58px; height:1px;
  background:currentColor; opacity:.5;
  margin-bottom:clamp(18px, 1.6vw, 30px);
}
.copy{
  font:400 var(--body-size)/var(--body-lh) var(--serif);
  letter-spacing:var(--body-ls);
  max-width:var(--measure);
}
.copy + .copy{ margin-top:1.15em; }
.on-dark, .on-dark .h-section, .on-dark .copy{ color:var(--white); }
/* copy set over a photograph needs a touch of weight to hold its edges */
.on-dark .copy{ color:rgba(255,255,255,.93); text-shadow:0 1px 14px rgba(0,0,0,.45); }
.on-dark .h-section{ text-shadow:0 2px 22px rgba(0,0,0,.45); }

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-block; text-decoration:none;
  font:400 var(--btn-size)/1 var(--serif);
  letter-spacing:1px; text-transform:uppercase;
  padding:18px 39px 19px; border:1px solid currentColor; border-radius:0;
  background:transparent; color:var(--accent);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover, .btn:focus-visible{ background:var(--accent); color:var(--white); }
.btn--light{ color:var(--white); }
.btn--light:hover, .btn--light:focus-visible{ background:var(--white); color:var(--black); }
.btn--dark{ color:var(--black); padding:18px 44px 17px; }
.btn--dark:hover, .btn--dark:focus-visible{ background:var(--accent); color:var(--white); border-color:var(--accent); }
@media (max-width:1024px){ .btn{ padding:15px 37px; } }
@media (max-width:767px){ .btn{ padding:16px 28px 13px 30px; } }

/* =========================================================================
   Header — sits over the top of the hero
   ========================================================================= */
.site-header{
  position:relative; z-index:20;
  padding:0 4%; margin-bottom:calc(-1 * var(--hdr-h));
}
.site-header .row{
  min-height:var(--hdr-h); align-items:center; flex-wrap:nowrap; gap:16px;
}
.site-header .logo{ width:15%; flex:0 1 auto; min-width:0; }
.site-header .logo img{ width:100%; }
.site-header .spacer{ flex:1 1 auto; min-width:0; }
.site-header .cta{ display:flex; justify-content:flex-end; flex:0 0 auto; }
@media (max-width:767px){
  .site-header{ padding:0 6%; }
  .site-header .logo{ width:auto; max-width:44%; }
  /* the hero photograph runs full width here, so the brown rule/label the
     desktop header uses against white would disappear into it */
  .site-header .cta .btn{
    padding:13px 18px 11px; letter-spacing:.8px; font-size:14px; color:var(--white);
  }
  .site-header .cta .btn:hover, .site-header .cta .btn:focus-visible{
    background:var(--white); color:var(--black);
  }
}

/* -- header on a light page (contact) ----------------------------------
   No photograph to sit over, so it stops overlapping, sheds the negative
   margin, and carries the black mark. */
.site-header--onlight{
  margin-bottom:0; background:var(--white);
  border-bottom:1px solid var(--line);
}
.site-header--onlight .row{ min-height:clamp(92px, 8.4vw, 128px); }
@media (max-width:767px){
  .site-header--onlight .cta .btn{ color:var(--accent); }
  .site-header--onlight .cta .btn:hover,
  .site-header--onlight .cta .btn:focus-visible{
    background:var(--accent); color:var(--white);
  }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero > .row{ min-height:97vh; }
@media (max-width:1024px){ .hero > .row{ min-height:600px; } }

.hero .photo{
  width:59.956%;
  background:top center/cover no-repeat #0b1e33;
  background-image:url("/img/barnes-portrait.jpg");
  background-image:image-set(url("/img/barnes-portrait.avif") type("image/avif"),
                             url("/img/barnes-portrait.jpg") type("image/jpeg"));
}
.hero .tagline{ background:var(--navy); width:100%; padding:15px 5%; text-align:center; }
.hero .tagline p{
  margin:0; color:var(--white);
  font:400 18px/32px var(--serif); letter-spacing:6.3px; text-transform:uppercase;
}
.hero .intro{ width:40%; background:var(--white); }
.hero .intro > .inner{ padding:10%; align-items:center; text-align:center; }
.hero .intro img{ width:79.5%; margin:0 auto; }
.hero .intro h1{
  margin-top:36px;
  font:500 1.7em/32px var(--serif); letter-spacing:1.5px; text-transform:uppercase;
  color:var(--black);
}
@media (max-width:1024px){
  .hero .photo{ background-position:bottom center; }
  .hero .tagline p{ font-size:22px; letter-spacing:5px; }
  .hero .intro h1{ font-size:22px; }
}
@media (max-width:767px){
  .hero .photo{ background-position:center left; }
  .hero .tagline p{ font-size:20px; letter-spacing:3.6px; line-height:28px; }
  .hero .intro h1{ font-size:20px; }
}

/* =========================================================================
   Copy panels — Expertise / Approach / Commitment
   Inner padding is 24%/20% of the column; the child percentages below resolve
   against that padded box, matching how the original measured them.
   ========================================================================= */
/* 17% rather than the original's 20% — at 1440 that column gave a 41-character
   measure, which is too narrow to read comfortably at 20px. The copy is
   centred in the column rather than pinned to the top, which the scrim made
   necessary: top-aligned it left a large dead field of shading beneath. */
.panel > .inner{ padding:13% 17%; }
.panel .h-section{ margin-bottom:clamp(22px, 2vw, 36px); }
.panel .btn{ align-self:flex-start; margin-top:clamp(28px, 2.6vw, 46px); }

.expertise .panel{
  width:59.956%;
  background:linear-gradient(160deg, #0a0f16 0%, var(--black) 42%, var(--black) 100%);
}
.expertise .plate{ width:40%; overflow:hidden; position:relative; }
.expertise .plate .layer{
  position:absolute; inset:-10% 0;
  background:top center/cover no-repeat;
  background-image:url("/img/archival-barnes-connally.jpg");
  background-image:image-set(url("/img/archival-barnes-connally.avif") type("image/avif"),
                             url("/img/archival-barnes-connally.jpg") type("image/jpeg"));
  will-change:transform;
}

.approach .photo-bg .layer{
  background-image:url("/img/barnes-biden.jpg");
  background-image:image-set(url("/img/barnes-biden.avif") type("image/avif"),
                             url("/img/barnes-biden.jpg") type("image/jpeg"));
}
.approach .panel{ width:47.877%; }
.approach .fill{ width:52.079%; }

.commitment .photo-bg .layer{
  background-image:url("/img/barnes-lbj-podium.jpg");
  background-image:image-set(url("/img/barnes-lbj-podium.avif") type("image/avif"),
                             url("/img/barnes-lbj-podium.jpg") type("image/jpeg"));
}
.commitment .panel{ width:43.622%; }
.commitment .fill{ width:56.334%; }

/* =========================================================================
   Results — copy sits in the dark foot of the photograph
   ========================================================================= */
.results .photo-bg .layer{
  background-image:url("/img/barnes-pelosi-lbj-award.jpg");
  background-image:image-set(url("/img/barnes-pelosi-lbj-award.avif") type("image/avif"),
                             url("/img/barnes-pelosi-lbj-award.jpg") type("image/jpeg"));
  background-position:50% 0%;
}
/* the copy sits in the foot of the frame, so this scrim is bottom-up rather
   than directional — held off full black at the top so the faces still read */
.results .photo-bg::after{
  background:linear-gradient(to top,
    rgba(var(--ink),.96) 0%,
    rgba(var(--ink),.92) 24%,
    rgba(var(--ink),.62) 48%,
    rgba(var(--ink),.30) 72%,
    rgba(var(--ink),.14) 100%);
}
.results .band{ width:100%; }
.results .band > .inner{ padding:3%; justify-content:flex-end; }
.results .well{ padding:4% 4% 5%; }
.results h2{
  font:400 var(--h-size)/var(--h-lh) var(--serif);
  letter-spacing:var(--h-ls); text-transform:uppercase; color:var(--white);
  text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.results h2::before{
  content:""; display:block; width:58px; height:1px;
  background:currentColor; opacity:.5; margin-bottom:clamp(18px, 1.6vw, 30px);
}
.results h2 .lede{
  display:block; margin-top:clamp(18px, 1.5vw, 28px); text-transform:none;
  font:400 var(--body-size)/var(--body-lh) var(--serif); letter-spacing:var(--body-ls);
  /* full-bleed, this ran to ~180 characters a line at 1920 */
  max-width:38em;
  color:rgba(255,255,255,.93); text-shadow:0 1px 14px rgba(0,0,0,.45);
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer .row{ min-height:500px; align-items:stretch; }
.site-footer .fcol{ display:flex; flex-direction:column; min-width:0; }
.site-footer .fcol > .inner{ display:flex; flex-direction:column; flex:1 1 auto; }

.site-footer .brand{ width:32%; background:var(--white); }
.site-footer .brand > .inner{ padding:15px 35px; justify-content:center; }
.site-footer .brand img{ width:100%; max-width:286px; padding-bottom:22px; }
.site-footer .brand .blurb{ margin-bottom:23px; color:var(--text); }
.site-footer .brand .copyright{
  font:400 12px/24px var(--sans); letter-spacing:0; text-transform:capitalize; color:var(--black);
}
.site-footer .links{ width:18%; background:var(--offwhite); }
.site-footer .links > .inner{ padding:100px 0 0 35px; }
.site-footer .office{ width:22%; }
.site-footer .office > .inner{ padding:100px 0 0 35px; }
.site-footer .office--last{ width:28%; }
.site-footer h2{
  font:700 16px/24px var(--serif); letter-spacing:.5px; text-transform:uppercase;
  color:var(--black); padding-bottom:15px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ padding-bottom:1px; margin-top:1px; }
.site-footer .fmeta, .site-footer li a{
  font:400 16px/28px var(--serif); letter-spacing:1.5px; text-transform:uppercase;
}
.site-footer li a{ color:var(--black); text-decoration:none; transition:color .2s ease; }
.site-footer li a:hover, .site-footer li a:focus-visible{ color:var(--steel); }
.site-footer .fmeta{ color:var(--text); }
.site-footer .fmeta a{ color:inherit; text-decoration:none; }
.site-footer .fmeta a:hover, .site-footer .fmeta a:focus-visible{ color:var(--accent); text-decoration:underline; }

/* =========================================================================
   Contact page

   No photographic hero. The homepage already spends a full screen on the one
   photograph with a hard resolution ceiling, and repeating it here pushed the
   phone number below the fold for no gain. The page opens as letterhead: title,
   the two ways to reach the firm, then each office beside its own map.
   ========================================================================= */
.c-head{ background:var(--white); }
.c-head > .row{
  padding:clamp(60px, 6.5vw, 124px) clamp(24px, 5vw, 92px) clamp(66px, 7vw, 130px);
  gap:clamp(40px, 5vw, 104px); align-items:flex-start;
}
.c-head .title-col{ flex:1 1 380px; min-width:0; }
.c-head .ways-col{ flex:1 1 520px; min-width:0; padding-top:clamp(6px, 1.4vw, 22px); }
.c-head h1{
  font:400 var(--disp-size)/var(--disp-lh) var(--serif);
  text-transform:capitalize; color:var(--black);
  margin-bottom:clamp(20px, 1.8vw, 32px);
}
.c-head h1::before{
  content:""; display:block; width:58px; height:1px;
  background:var(--accent); margin-bottom:clamp(22px, 2vw, 36px);
}
.c-head .copy{ color:var(--text); }

/* one row per contact route: hairline, label, the value at display size */
.reach{
  display:grid; grid-template-columns:1fr auto; align-items:end;
  gap:0 20px; text-decoration:none; color:var(--black);
  border-top:1px solid var(--line);
  padding:clamp(20px, 1.8vw, 30px) 0 clamp(18px, 1.6vw, 26px);
  transition:border-color .3s ease, color .3s ease;
}
.reach:last-of-type{ border-bottom:1px solid var(--line); }
.reach .k{
  grid-column:1; display:block;
  font:400 13px/1 var(--serif); letter-spacing:.19em; text-transform:uppercase;
  color:var(--mute); margin-bottom:14px;
  transition:color .3s ease;
}
.reach .v{
  grid-column:1; display:block; overflow-wrap:anywhere;
  font:400 clamp(20px, 1.62vw, 31px)/1.2 var(--serif); letter-spacing:.01em;
}
.reach .go{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  font:400 22px/1 var(--serif); color:var(--accent);
  transition:transform .3s ease;
}
.reach:hover, .reach:focus-visible{ border-color:var(--accent); color:var(--accent); }
.reach:hover .k, .reach:focus-visible .k{ color:var(--accent); }
.reach:hover .go, .reach:focus-visible .go{ transform:translateX(7px); }

/* -- offices: each address sits beside its own map ----------------------
   Previously the DC address appeared three times on this page (in the offices
   block, again on a card floating over a full-bleed map, and again in the
   footer). Now it is stated once, next to the map it belongs to. Austin is a
   PO box, so it gets no map - a pin there is a sorting facility. */
.c-where{ background:var(--offwhite); padding:clamp(60px, 6.5vw, 118px) 0; }
.c-where > .row{ padding:0 clamp(24px, 5vw, 92px); }
/* direct flex children of the row, so both need a full-width basis */
.c-where .h-section{ flex:1 1 100%; color:var(--black); margin-bottom:clamp(30px, 3vw, 54px); }
.c-where .office-row{ flex:1 1 100%; }

/* a grid, not flex, so the office with no map still sits on the same column
   as the one that has one - both cards line up down the page */
.office-row{
  display:grid; grid-template-columns:minmax(0,41fr) minmax(0,59fr);
  align-items:stretch; width:100%;
  gap:clamp(28px, 3.4vw, 64px);
}
.office-row + .office-row{ margin-top:clamp(34px, 3.6vw, 64px); }
/* the card stretches to the map's height, so centre its content rather
   than leaving a void under the last line */
.office-row .addr{ min-width:0; background:var(--white); display:flex; align-items:center; }
.office-row .addr .pad{ padding:clamp(28px, 2.6vw, 46px); width:100%; }
.office-row .map{ min-width:0; background:var(--white); }
/* no filter: greyscaling Google's already-pale basemap washes it out */
.office-row .map iframe{
  display:block; width:100%; height:100%; min-height:clamp(260px, 26vw, 360px);
  border:0;
}
.office-row h3{
  font:400 clamp(19px, 1.35vw, 26px)/1.2 var(--serif);
  letter-spacing:.07em; text-transform:uppercase; color:var(--black);
  margin-bottom:clamp(14px, 1.2vw, 20px);
}
.office-row .detail{
  margin:0; font:400 16px/1.8 var(--serif); letter-spacing:.01em; color:var(--text);
}
.office-row .detail + .detail{ margin-top:10px; color:var(--mute); }
.office-row .detail a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.office-row .detail a:hover, .office-row .detail a:focus-visible{ color:var(--accent); border-color:currentColor; }
.office-row .directions{
  display:inline-block; margin-top:clamp(18px, 1.6vw, 26px);
  text-decoration:none; color:var(--accent);
  font:400 13px/1 var(--serif); letter-spacing:.19em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:6px;
  transition:color .25s ease;
}
.office-row .directions:hover, .office-row .directions:focus-visible{ color:var(--black); }
/* .office-row--nomap simply leaves the second grid column empty */

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1024px){
  .panel > .inner{ padding:12% 10%; }
  .panel .h-section{ padding-bottom:5%; }
  .panel .copy:last-of-type{ margin-bottom:10%; }
  .results .band > .inner{ padding:10% 10% 0; }

  .c-head .title-col, .c-head .ways-col{ flex:1 1 100%; }
  .c-head .ways-col{ padding-top:0; }

  .site-footer .brand > .inner{ padding:8% 16%; text-align:center; }
  .site-footer .brand img{ margin:0 auto; padding:0 0 6%; }
  .site-footer .links > .inner{ padding:24% 7% 10% 20%; text-align:center; }
  .site-footer .office > .inner{ padding:24% 7% 10% 20%; text-align:center; }
  .site-footer .office--last > .inner{ padding:24% 8% 10%; }
}

@media (max-width:767px){
  .section > .row, .hero > .row{ min-height:0; }

  .hero .photo{ width:100%; min-height:70vh; }
  .hero .intro{ width:100%; }
  .hero .intro > .inner{ padding:14% 12%; }

  .expertise .panel, .approach .panel, .commitment .panel{ width:100%; }
  .panel > .inner{ padding:16% 10%; }
  .expertise .plate{ width:100%; min-height:70vh; }
  .approach .fill, .commitment .fill{ display:none; }
  .approach > .row, .commitment > .row{ min-height:80vh; }

  .results .band > .inner{ padding:12% 8%; }
  .results .well{ padding:0; }
  .results > .row{ min-height:80vh; }

  /* the email address is the longest string on the site — let it wrap rather
     than push the row wider than a 320px viewport */
  .reach .v{ font-size:19px; }
  .reach .go{ font-size:19px; }

  .office-row{ grid-template-columns:1fr; }
  .office-row .addr .pad{ padding:9% 8%; }
  .office-row .map iframe{ min-height:250px; }

  .site-footer .row{ min-height:0; }
  .site-footer .brand{ width:100%; }
  .site-footer .brand > .inner{ padding:24% 8%; text-align:center; }
  .site-footer .links{ width:100%; }
  .site-footer .links > .inner{ padding:8% 7%; text-align:center; }
  .site-footer .office{ width:100%; }
  .site-footer .office > .inner{ padding:8% 7%; text-align:center; }
  .site-footer .office--last > .inner{ padding:8%; }
}

/* =========================================================================
   Scroll behaviour — content is visible by default and only ever hidden
   once JS has confirmed it can reveal it again.
   ========================================================================= */
html.anim .rv{ opacity:0; transform:translateY(14px); }
html.anim .rv.is-in{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s ease;
}
@media (prefers-reduced-motion:reduce){
  html.anim .rv, html.anim .rv.is-in{ opacity:1; transform:none; transition:none; }
  .photo-bg .layer, .expertise .plate .layer{ transform:none !important; }
}
@media print{
  .photo-bg .layer, .expertise .plate .layer{ transform:none !important; }
}