/* ============================================================
   Tully & Holland - prototype stylesheet
   Brand: crimson #A50021 + Garamond titles + Arial body
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* --- The brand ampersand -------------------------------------
   Garamond Book Italic is the firm's authentic swash ampersand.
   Scoping the @font-face to unicode-range U+0026 means every "&"
   in a title renders in it automatically, with no extra markup,
   while all other characters fall through to EB Garamond.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'TH Ampersand';
  src: url('../fonts/GaramondBook-Italic.ttf') format('truetype');
  unicode-range: U+0026;
  font-display: swap;
}
/* Full Garamond Book Italic, for the tagline lockup */
@font-face {
  font-family: 'Garamond Book Italic';
  src: url('../fonts/GaramondBook-Italic.ttf') format('truetype');
  font-display: swap;
}

:root{
  --crimson:#A50021;
  --crimson-dark:#7E0019;
  --ink:#1C1B1A;
  --graphite:#5A5A5A;
  --grey:#808080;
  --hairline:#DDDDDD;
  --paper:#FFFFFF;
  --canvas:#F3F3F4;

  --serif:'TH Ampersand','EB Garamond',Garamond,Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif;

  --maxw:1200px;
  --measure:720px;
  --gutter:min(1in, 7.5vw);
  --wrapmax:calc(var(--maxw) + var(--gutter) * 2);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--crimson); text-decoration:none}
a:hover{color:var(--crimson-dark); text-decoration:underline}

/* ---------- Typography ---------- */
h1,h2,h3,h4,.serif{font-family:var(--serif); font-weight:500; color:var(--ink); letter-spacing:.005em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.12; margin:0 0 .4em}
h2{font-size:clamp(1.6rem,3vw,2.45rem); line-height:1.18; margin:0 0 .5em}
h3{font-size:clamp(1.25rem,2vw,1.72rem); line-height:1.25; margin:0 0 .45em}
h4{font-size:1.18rem; margin:0 0 .4em}
p{margin:0 0 1.1em; max-width:var(--measure)}
.lede{font-size:1.2rem; color:var(--graphite); max-width:var(--measure)}

.eyebrow{
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--crimson);
  margin:0 0 .85rem; display:block;
}
.rule{width:64px; height:2px; background:var(--crimson); border:0; margin:0 0 1.5rem}
.rule-full{width:100%; height:1px; background:var(--hairline); border:0; margin:3rem 0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrapmax); margin:0 auto; padding-inline:var(--gutter)}
section{padding:clamp(3.5rem,7vw,7rem) 0}
/* No eyebrow above the heading, so it starts closer to the header. */
.pagehead-tight{padding-top:clamp(2rem,3.5vw,3rem)}
.pub-grid{padding-top:clamp(1.4rem,2.6vw,2.1rem)}
/* Subscribe, inside the Ask panel */
.th-ask-signup{display:flex; flex-direction:column; gap:.5rem;
  border-top:1px solid var(--hairline); padding-top:.9rem; margin-top:.2rem}
.th-ask-signup input{padding:.6rem .7rem; border:1px solid var(--hairline);
  font-family:var(--sans); font-size:.92rem; width:100%}
.th-ask-signup input:focus{outline:2px solid var(--crimson); outline-offset:-2px}
.th-ask-signup .btn{width:100%; text-align:center}
.th-ask-signup-done{font-size:.84rem; color:var(--ink)}
/* Opened by a sector selection, the panel carries the export offer alone;
   opened from the button, it is the usual contact panel. */
/* Offer blocks (download a report, subscribe, export a dashboard) are built
   into the shared Ask panel by the page that owns them. `offers-only` narrows
   the panel to just those, for the dashboard export where nothing else
   belongs; `.first` closes the gap left by the hidden heading above it. */
.th-ask-panel.offers-only > :not(.th-ask-offer){display:none}
.th-ask-panel.offers-only > .th-ask-offer.first{border-top:0; padding-top:0; margin-top:0}
.team-grid{padding-top:clamp(1.6rem,3vw,2.4rem);
  padding-bottom:clamp(.8rem,1.6vw,1.4rem)}
.canvas{background:var(--canvas)}
.narrow{max-width:var(--measure)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-top:5px solid var(--crimson); border-bottom:1px solid var(--hairline);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:14px var(--gutter); max-width:var(--wrapmax); margin:0 auto}
/* The boxed wordmark is wider than the old lockup, so it steps down at
   tablet widths to keep the nav on a single row. flex-shrink:0 matters: as a
   flex child the image was being squeezed narrower while keeping its height,
   which distorted the mark. */
.logo{flex:0 0 auto; transition:opacity .2s ease}
.logo:hover{opacity:.72}
.logo:focus-visible{outline:2px solid var(--crimson); outline-offset:4px}
/* The unboxed wordmark is 11.4:1, where the old boxed lockup was 4.5:1, so it
   needs a much smaller height to occupy the same width in the ribbon. */
.logo img{height:30px; width:auto; display:block; flex:0 0 auto}
@media (max-width:1240px){ .logo img{height:27px} }
@media (max-width:1100px){ .logo img{height:24px} }
@media (max-width:980px){ .logo img{height:22px} }
@media (max-width:640px){ .logo img{height:20px} }
/* Wrapping is the last resort; the row tightens first. */
.nav{display:flex; gap:1.35rem; align-items:center; flex-wrap:wrap}
@media (max-width:900px){
  .header-inner{flex-direction:column; align-items:flex-start; gap:.9rem}
}
.nav a{
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap;
}
/* Seven tabs since Team got its own (Nov 2026; the logo goes home). The
   steps sit after the base rule so they win, and under 1100px the ribbon
   folds behind the menu button. */
@media (min-width:1241px) and (max-width:1360px){ .logo img{height:26px} .nav{gap:1rem}
  .nav a{font-size:.7rem; letter-spacing:.06em} }
@media (min-width:1101px) and (max-width:1240px){ .logo img{height:23px} .header-inner{gap:1.2rem}
  .nav{gap:.75rem} .nav a{font-size:.64rem; letter-spacing:.05em} .nav-cta{padding:.5rem .8rem} }
.nav a:hover,.nav a.active{color:var(--crimson)}
.nav-cta{
  background:var(--crimson); color:#fff !important; padding:.6rem 1.05rem; border-radius:2px;
}
.nav-cta:hover{background:var(--crimson-dark); text-decoration:none}

/* ---------- Hero ---------- */
.hero{
  color:#fff; padding:clamp(4.5rem,9vw,8.5rem) 0; position:relative;
  background:linear-gradient(rgba(16,15,15,.80), rgba(16,15,15,.88)), var(--ink) url('../photos/stock-food-beverage.jpg') center/cover no-repeat;
}
.hero::after{content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--crimson)}
.hero h1{color:#fff; max-width:17ch}
.hero .eyebrow{color:#fff; opacity:.72}
.hero .tagline{
  font-family:'Garamond Book Italic','EB Garamond',Georgia,serif;
  font-size:clamp(1.3rem,2.4vw,1.9rem); color:#fff; opacity:.95; margin:0 0 1.5rem;
}
.hero p{color:rgba(255,255,255,.85); max-width:62ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:.84rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.92rem 1.6rem; border-radius:2px;
  background:var(--crimson); color:#fff; border:2px solid var(--crimson); text-decoration:none;
}
.btn:hover{background:var(--crimson-dark); border-color:var(--crimson-dark); color:#fff; text-decoration:none}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff; color:var(--crimson); border-color:#fff}
.btn-outline{background:transparent; color:var(--crimson)}
.btn-outline:hover{background:var(--crimson); color:#fff}
.btn-row{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem}

/* ---------- Stat strip ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.stat{padding:2.2rem 1.25rem; text-align:center; border-right:1px solid var(--hairline)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--serif); font-size:clamp(2rem,3.6vw,2.9rem); color:var(--crimson); line-height:1; display:block; margin-bottom:.45rem}
.stat .label{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite)}

/* ---------- Grids & cards ---------- */
.grid{display:grid; gap:1.6rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--paper); border:1px solid var(--hairline); padding:1.9rem 1.7rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem; color:var(--graphite); margin-bottom:0}
.card-top-rule{border-top:3px solid var(--crimson)}

/* Service card with crimson header bar */
.svc{border:1px solid var(--hairline); background:#fff; display:flex; flex-direction:column}
.svc .svc-head{background:var(--crimson); color:#fff; padding:.95rem 1.3rem; font-family:var(--serif); font-size:1.18rem}
.svc .svc-body{padding:1.4rem 1.3rem; font-size:.95rem; color:var(--graphite)}

/* Tombstone */
.tomb{
  background:#fff; border:1px solid var(--hairline); border-top:3px solid var(--crimson);
  padding:2rem 1.4rem 1.6rem; text-align:center; display:flex; flex-direction:column;
  justify-content:flex-start; min-height:280px; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.tomb:hover{border-color:var(--crimson); box-shadow:0 2px 14px rgba(0,0,0,.07); text-decoration:none}
.tomb-logo{height:62px; display:flex; align-items:center; justify-content:center; margin-bottom:1.15rem}
.tomb-logo img{max-height:62px; max-width:72%; width:auto; object-fit:contain}
.tomb .client{font-family:var(--serif); font-size:1.3rem; line-height:1.25; color:var(--ink)}
.tomb .verb{font-size:.8rem; color:var(--graphite); margin:.6rem 0; font-style:italic}
.tomb .counter{font-family:var(--serif); font-size:1.12rem; color:var(--ink)}
.tomb .meta{margin-top:1.1rem; display:flex; gap:.6rem; justify-content:center; align-items:center; flex-wrap:wrap}
.chip{font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--crimson); border:1px solid var(--crimson); padding:.22rem .55rem; border-radius:2px}
.year{font-size:.78rem; color:var(--grey)}

/* Insight card */
/* A class rule that sets `display` overrides the browser's own [hidden] rule, so
   hiding a card with the hidden attribute alone silently does nothing. */
[hidden]{display:none !important}

.insight{background:#fff; border:1px solid var(--hairline); display:flex; flex-direction:column; overflow:hidden}
.insight .thumb{background:var(--canvas); border-bottom:1px solid var(--hairline); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; padding:1rem}
.insight .thumb img{max-height:100%; width:auto}
.insight .body{padding:1.5rem 1.4rem; display:flex; flex-direction:column; flex:1}
.insight .cat{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson); margin-bottom:.6rem}
.insight h3{font-size:1.28rem; margin-bottom:.5rem}
.insight .hook{font-size:.92rem; color:var(--graphite); flex:1; margin-bottom:1rem}
.insight .date{font-size:.76rem; color:var(--grey); letter-spacing:.05em; text-transform:uppercase}
.insight .more{font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:.9rem}

/* Bio card */
.bio{text-align:left}
.bio .portrait{aspect-ratio:4/5; background:var(--canvas); border:1px solid var(--hairline); margin-bottom:1rem; overflow:hidden}
.bio .portrait img{width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(100%); transition:filter .25s ease}
.bio:hover .portrait img{filter:grayscale(0%)}
.bio .name{font-family:var(--serif); font-size:1.32rem; margin:0 0 .2rem; color:var(--ink)}
.bio:hover .name{color:var(--crimson)}
.bio .role{font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--crimson); margin-bottom:.5rem}
.bio .prior{font-size:.88rem; color:var(--graphite); margin:0}

/* Industry tile */
.tile{position:relative; display:block; border:1px solid var(--hairline); background:#fff; text-decoration:none; transition:border-color .15s ease; overflow:hidden}
.tile .tile-img{aspect-ratio:16/9; overflow:hidden; background:var(--canvas); border-bottom:1px solid var(--hairline)}
.tile .tile-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(55%); transition:filter .25s ease, transform .4s ease}
.tile:hover .tile-img img{filter:grayscale(0%); transform:scale(1.04)}
.tile .tile-body{padding:1.5rem}
.tile:hover{border-color:var(--crimson); text-decoration:none}
.tile h3{font-size:1.24rem; margin-bottom:.4rem; color:var(--ink)}
.tile p{font-size:.9rem; color:var(--graphite); margin:0}
/* The arrow and the hover lift only belong on a tile that actually links
   somewhere. The sector tiles on Transactions are plain cards. */
a.tile::after{content:'\2192'; position:absolute; right:1.4rem; bottom:1.3rem; color:var(--crimson); font-size:1.05rem}
div.tile{cursor:default}
div.tile:hover{border-color:var(--hairline)}
div.tile:hover .tile-img img{filter:grayscale(55%); transform:none}

/* Highlight pull-outs */
.pull{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin:2rem 0}
.pull .item{border-left:3px solid var(--crimson); padding:.35rem 0 .35rem 1.15rem}
.pull .big{font-family:var(--serif); font-size:1.95rem; color:var(--crimson); line-height:1.05; display:block; margin-bottom:.35rem}
.pull p{font-size:.92rem; color:var(--graphite); margin:0}

/* Quote */
.quote{border-top:2px solid var(--crimson); padding-top:1.8rem; max-width:860px}
.quote blockquote{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.3vw,1.78rem); line-height:1.4; margin:0 0 1rem; color:var(--ink)}
.quote cite{font-style:normal; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite)}

/* Newsletter */
.signup{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem}
.signup input{flex:1; min-width:260px; padding:.9rem 1rem; border:1px solid var(--hairline); font-family:var(--sans); font-size:.97rem}
.signup input:focus{outline:2px solid var(--crimson); outline-offset:-2px}

/* Filters */
/* One row, always. The chips are tightened enough to fit the full set at
   desktop widths; below that the row scrolls rather than wrapping, so the
   filters never take two lines off the top of the grid. */
/* "safe" keeps the first chip reachable when the row has to scroll; plain
   centring would push it past the scroll origin. */
.filters{display:flex; gap:.4rem; flex-wrap:nowrap; overflow-x:auto;
  justify-content:center; justify-content:safe center;
  margin-bottom:2.4rem; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filter{font-size:.68rem; font-weight:700; letter-spacing:.025em; text-transform:uppercase; padding:.55rem .55rem; border:1px solid var(--hairline); background:#fff; color:var(--graphite); cursor:pointer; border-radius:2px; font-family:var(--sans); white-space:nowrap; flex:0 0 auto}
.filter:hover{border-color:var(--crimson); color:var(--crimson)}
.filter.active{background:var(--crimson); border-color:var(--crimson); color:#fff}

/* Prose (report body) */
.prose p{max-width:var(--measure)}
.prose h3{margin-top:2.2rem}
.figure{margin:2.5rem 0; border:1px solid var(--hairline); background:#fff; padding:1.2rem}
.figure figcaption{font-size:.8rem; color:var(--grey); margin-top:.7rem}

/* Download band */
.download{background:var(--canvas); border:1px solid var(--hairline); border-left:4px solid var(--crimson); padding:1.9rem; display:flex; gap:1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:2.5rem 0}
.download p{margin:0; max-width:46ch}

/* ---------- Footer ---------- */
.site-footer{background:var(--crimson); color:rgba(255,255,255,.82); padding:4rem 0 2.2rem; font-size:.92rem}

/* The footer is fixed behind the page and the content scrolls up off it, so it
   is revealed rather than arriving. The class is only applied by script once
   the space below main has been reserved, so without JS nothing moves and the
   footer stays an ordinary block at the end of the document. */
body.reveal-footer main{position:relative; z-index:1; background:var(--paper)}
/* The home hero is the only one that sits outside <main>, so it needs
   lifting too or the revealed footer paints over it. */
body.reveal-footer .hw-hero{z-index:1}
body.reveal-footer .site-footer{position:fixed; left:0; right:0; bottom:0; z-index:0}
.site-footer a{color:rgba(255,255,255,.82)}
.site-footer a:hover{color:#fff}
/* The monogram ships in crimson, so it is knocked out to white for this band. */
.footer-logo{height:54px; width:auto; filter:brightness(0) invert(1)}
.footer-grid{display:grid; grid-template-columns:1.4fr .9fr .9fr 1.3fr; gap:2.5rem}
.footer-grid h4{color:#fff; font-size:.78rem; font-family:var(--sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem}
.footer-grid ul{list-style:none; margin:0; padding:0}
.footer-grid li{margin-bottom:.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.25); margin-top:2.8rem; padding-top:1.5rem; font-size:.8rem; color:rgba(255,255,255,.7)}
.footer-bottom a{text-decoration:underline}
/* The regulator marks, above the membership line they illustrate. Both files
   are solid-fill SVG, so inverting them to white on the crimson is lossless. */
.footer-regs{display:flex; align-items:center; gap:1.5rem; margin-bottom:1.2rem}
.footer-regs a{display:inline-flex; align-items:center}
.footer-regs img{width:auto; display:block; filter:brightness(0) invert(1);
  opacity:.75; transition:opacity .2s ease}
.footer-regs a:hover img{opacity:1}
.reg-finra{height:21px}
.reg-sipc{height:29px}

/* ------------------------------------------------- PRIOR EXPERIENCE
   Where the team worked before. A logo that is not on the site yet drops out
   and its company name stands in its place, so the row is never broken. */
.exp-band{padding-block:clamp(3rem,5vw,4.5rem); text-align:center}
.exp-band h2{margin:0 0 .8rem; color:var(--crimson)}
.exp-band .lede{margin:0 auto clamp(2.8rem,5vw,4rem)}
.exp-grid{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:clamp(2.6rem,4.5vw,3.6rem) clamp(3.4rem,6vw,5.2rem)}
.exp-grid li{display:flex; align-items:center; justify-content:center;
  height:52px; min-width:104px}
.exp-grid img{max-height:46px; max-width:170px; width:auto; height:auto;
  filter:grayscale(1); opacity:.62; transition:filter .25s ease, opacity .25s ease}
.exp-grid li:hover img{filter:grayscale(0); opacity:1}
.exp-grid img.sq{max-height:58px; max-width:58px}
/* The name only appears when its logo could not load. */
.exp-grid span{display:none; font-family:var(--serif); font-size:1.18rem;
  color:var(--graphite); white-space:nowrap}
.exp-grid li.noimg span{display:block}
/* The brands sit on one list and the banks and funds on a second, so the space
   between the rows is set here rather than inherited from a spacer's gaps. */
.exp-grid + .exp-grid{margin-top:clamp(2.8rem,5vw,4.2rem)}

/* ------------------------------------------------------- INDUSTRIES
   Two routes into the transactions matrix: the tile opens the sector band,
   each sub-link opens one sector inside it. */
/* Articles follows straight on, so the band keeps its top padding but
   hands the space below back. */
.inds{padding-block:clamp(3rem,5vw,4.5rem) clamp(.5rem,1vw,1rem)}
.inds + .bh-deals{padding-top:clamp(1.2rem,2.5vw,2rem)}
/* The lede used to carry the space under the heading; it does not any more. */
.inds h2{margin:0 0 clamp(1.8rem,3vw,2.6rem)}
.inds-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.8rem)}
.inds-tile{grid-area:1/1; min-height:100%; position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:var(--ink); text-decoration:none}
.inds-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease}
.inds-tile:hover img{transform:scale(1.04)}
/* A wash, so the title holds against any photograph underneath it. */
.inds-tile::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,27,26,.18), rgba(28,27,26,.58))}
.inds-tile-label{position:absolute; inset:0; z-index:1; display:flex; align-items:flex-start;
  padding-top:calc(31.25% - .5em);
  justify-content:center; gap:.7rem; font-family:var(--serif); color:#fff;
  font-size:clamp(1.25rem,6.2cqw,2.15rem); line-height:1}
.inds-tile:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
.inds-col{position:relative; display:grid; container-type:inline-size}
.inds-tile::after{transition:background .4s ease}
.inds-col:hover .inds-tile::after,
.inds-col:focus-within .inds-tile::after{
  background:linear-gradient(180deg, rgba(28,27,26,.46), rgba(28,27,26,.80))}
.inds-tile-label{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.inds-col:hover .inds-tile-label,
.inds-col:focus-within .inds-tile-label{transform:translateY(calc(-1 * clamp(1.5rem,6.5cqw,2.2rem)))}
/* The list is absolute inside the column, so the column keeps the tile's
   height and the names sit over the photograph rather than under it. */
.inds-subs{grid-area:1/1; position:relative; z-index:2; pointer-events:none;
  list-style:none; margin:0;
  padding:calc(31.25% + clamp(.3rem,2.2cqw,1.2rem)) clamp(1rem,3vw,2rem) clamp(.6rem,2cqw,1rem);
  display:flex; flex-direction:column; align-items:center; gap:clamp(.3rem,1.8cqw,.8rem);
  opacity:0; pointer-events:none; transform:translateY(.6rem);
  transition:opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1)}
.inds-col:hover .inds-subs,
.inds-col:focus-within .inds-subs{opacity:1; pointer-events:auto; transform:none}
.inds-subs a{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-size:clamp(.6rem,2.3cqw,.8rem); letter-spacing:clamp(.04em,.3cqw,.1em); text-transform:uppercase; color:#fff;
  text-align:center;
  transition:gap .2s ease}
.inds-subs a:hover{gap:.95rem}
/* With no hover there is nothing to reveal, so the list just sits below. */
@media (hover:none){
  .inds-subs{grid-area:auto; position:static; opacity:1; pointer-events:auto; transform:none;
    align-items:flex-start; margin:1.5rem 0 0; padding:0}
  .inds-tile-label{align-items:center; padding-top:0}
  .inds-subs a{color:var(--crimson)}
  .inds-col:hover .inds-tile-label{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .inds-subs, .inds-tile-label, .inds-tile::after{transition:none}
}
@media (max-width:760px){ .inds-grid{grid-template-columns:1fr} }
@media (max-width:720px){
  .exp-grid{gap:1.9rem 2.2rem}
  .exp-grid li{height:36px; min-width:72px}
  .exp-grid img{max-height:36px; max-width:130px}
  .exp-grid span{font-size:1rem}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .g3,.g4,.pull{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--hairline)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{gap:1rem}
  .nav a{font-size:.74rem}
}
@media (max-width:640px){
  body{font-size:16px}
  .g2,.g3,.g4,.pull{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0; border-bottom:1px solid var(--hairline)}
  .footer-grid{grid-template-columns:1fr}
  .nav{gap:.85rem}
}

/* ============================================================
   Home page, laid out on the Bowen structure in T&H identity
   ============================================================ */
.reveal.armed{opacity:0; transform:translateY(22px)}
.reveal.in{opacity:1; transform:none; transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.reveal.armed{opacity:1;transform:none} .reveal.in{transition:none}}

/* ---- Hero ---- */
.bh-hero{position:relative; background:var(--ink); color:#fff; min-height:86vh;
  display:flex; align-items:center; overflow:hidden}
.bh-lines{position:absolute; inset:0; opacity:.9}
.bh-lines svg{width:100%; height:100%}
.bh-lines .ln{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 2.6s cubic-bezier(.3,.7,.3,1) forwards}
.bh-lines .ln:nth-child(2){animation-delay:.10s}
.bh-lines .ln:nth-child(3){animation-delay:.20s}
.bh-lines .ln:nth-child(4){animation-delay:.30s}
.bh-lines .ln:nth-child(5){animation-delay:.40s}
.bh-lines .ln:nth-child(6){animation-delay:.50s}
.bh-lines .ln:nth-child(7){animation-delay:.60s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.bh-lines .ln{animation:none; stroke-dashoffset:0}}

.bh-hero-inner{position:relative; z-index:2; padding-block:7rem}
.bh-h1{font-size:clamp(2.3rem,6.2vw,5rem); line-height:1.06; color:#fff; margin:0 0 1.1rem; letter-spacing:-.01em}
.bh-line{display:block; overflow:hidden}
.bh-line>*{display:block}
.bh-h1 .bh-line{opacity:0; animation:rise .95s cubic-bezier(.22,.61,.36,1) forwards}
.bh-h1 .bh-line:nth-child(1){animation-delay:.25s}
.bh-h1 .bh-line:nth-child(2){animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.bh-sub{font-family:'Garamond Book Italic','EB Garamond',Georgia,serif;
  font-size:clamp(1.15rem,2.2vw,1.65rem); color:rgba(255,255,255,.78); margin:0;
  opacity:0; animation:rise .9s cubic-bezier(.22,.61,.36,1) .62s forwards}
@media (prefers-reduced-motion:reduce){.bh-h1 .bh-line,.bh-sub{opacity:1;animation:none}}

.bh-scroll{position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.bh-scroll:hover{color:#fff; text-decoration:none}
.bh-scroll i{width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bh-scroll i{animation:none}}

/* ---- Statement ---- */
.bh-statement{padding-block:clamp(4.5rem,9vw,8rem)}
.bh-lead{font-family:var(--serif); font-size:clamp(1.5rem,3.1vw,2.5rem); line-height:1.3;
  color:var(--ink); max-width:33rem; margin:0 0 2rem}
.bh-body{max-width:33rem; color:var(--graphite); font-size:1.02rem}

/* ---- Numbers ---- */
.bh-numbers{background:var(--crimson); color:#fff; padding-block:clamp(3.5rem,7vw,6rem)}
.bh-numbers-title{font-family:var(--serif); font-weight:500; color:#fff;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.2; margin:0 0 2.6rem}
.bh-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.bh-stat{display:flex; flex-direction:column; align-items:center; text-align:center}
.bh-figure{display:flex; align-items:baseline; justify-content:center; gap:.05em}
.bh-num{font-family:var(--serif); font-size:clamp(2.6rem,5.4vw,4.4rem); line-height:1;
  color:#fff; font-variant-numeric:tabular-nums}
.bh-plus{font-family:var(--serif); font-size:clamp(2.6rem,5.4vw,4.4rem); line-height:1; color:#fff}
.bh-lab{margin-top:.9rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72)}


/* ---- Split sections ---- */
.bh-split{display:grid; grid-template-columns:1fr 2fr; gap:3rem}
.bh-about,.bh-industries{padding-block:clamp(4.5rem,9vw,8rem)}
:root{--stamp-gap:clamp(2.6rem,5.2vw,4.4rem)}
/* About and Latest Publications sit directly against each other, so each
   contributing a full section's padding left roughly 180px of dead space
   between Tim's quote and the next heading. Trimmed on both sides. */
.bh-about{padding-top:clamp(3rem,6vw,4.5rem); padding-bottom:0}
.deal-rail + .bh-deals{padding-top:clamp(2.6rem,5vw,3.6rem)}
.bh-industries{background:var(--canvas)}
.bh-industries h2{color:var(--crimson)}
.bh-split-r h2{font-size:clamp(1.7rem,3.4vw,2.7rem); margin-bottom:1.2rem}
.bh-split-r p{max-width:56ch; color:var(--graphite)}

.bh-link{display:inline-flex; align-items:center; gap:.6rem; margin-top:1.6rem;
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--crimson); text-decoration:none}
.bh-link span{transition:transform .25s ease}
.bh-link:hover{text-decoration:none}
.bh-link:hover span{transform:translateX(6px)}

.bh-ind{border-top:1px solid var(--hairline); padding:1.6rem 0}
.bh-ind-h{display:block; font-family:var(--serif); font-size:1.45rem; color:var(--ink);
  text-decoration:none; margin-bottom:.7rem}
.bh-ind-h:hover{color:var(--crimson); text-decoration:none}
.bh-ind ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem 1.6rem}
.bh-ind li{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite)}

/* ---- Deals / News ---- */
.bh-deals,.bh-news{padding-block:clamp(4.5rem,9vw,8rem)}
.bh-sec-title{font-size:clamp(1.5rem,3vw,2.3rem); margin-bottom:2.4rem; color:var(--crimson)}
.news-list{border-top:1px solid var(--hairline)}
.news-row{display:grid; grid-template-columns:230px 1fr 40px; align-items:center; gap:1.5rem;
  padding:1.8rem 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.news-row:hover{text-decoration:none}
.news-row:hover .news-title{color:var(--crimson)}
.news-row:hover .news-arrow{transform:translateX(6px); color:var(--crimson)}
.news-meta{display:flex; flex-direction:column; gap:.3rem}
.news-date{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey)}
.news-cat{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--crimson); font-weight:700}
.news-title{font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.5rem); color:var(--ink); transition:color .2s ease}
.news-arrow{color:var(--hairline); font-size:1.2rem; transition:transform .25s ease, color .2s ease; text-align:right}

/* ---- Back to top ---- */
.bh-top{position:fixed; right:1.6rem; bottom:1.6rem; width:46px; height:46px; border-radius:50%;
  background:var(--crimson); color:#fff; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; opacity:0; pointer-events:none; transition:opacity .3s ease, transform .25s ease; z-index:60}
.bh-top.show{opacity:1; pointer-events:auto}
.bh-top:hover{background:var(--crimson-dark); color:#fff; transform:translateY(-3px); text-decoration:none}

/* ---- Insight card link wrapper ---- */
.insight-link{display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit}
.insight-link:hover{text-decoration:none}
.insight:hover{border-color:var(--crimson)}
.insight:hover h3{color:var(--crimson)}

@media (max-width:900px){
  .bh-stats{grid-template-columns:1fr; gap:2.4rem}
  .bh-split{grid-template-columns:1fr; gap:1.4rem}
  .news-row{grid-template-columns:1fr 32px; gap:.7rem}
  .news-meta{flex-direction:row; gap:.9rem}
}
@media (max-width:640px){
  .bh-stats{grid-template-columns:1fr; gap:2rem}
  .bh-hero{min-height:78vh}
}

/* ============================================================
   Video hero (Harris Williams pattern) in T&H identity
   ============================================================ */
.hw-hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:var(--ink); color:#fff}
.hw-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
  /* The source recording carries baked-in letterboxing: 86px black at the top
     and 54px at the bottom of a 1080px frame. Scale past it and recentre. */
  transform:translateY(-1.7%) scale(1.15); transform-origin:50% 50%}
.hw-hero.has-video .hw-video{opacity:1}
/* The scroll cue: a white segment running down a faint rail, with a chevron
   under it so the gesture is unmistakable. */
.hw-scroll{position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.55rem}
/* The word rides the same 2.2s ease-in-out cycle as the chevron, so the two
   brighten and settle as one cue rather than two competing ones. */
.hw-scroll-word{display:block; font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.8);
  animation:scrollword 2.2s ease-in-out infinite}
@keyframes scrollword{0%,100%{transform:translateY(0); opacity:.55}
  60%{transform:translateY(3px); opacity:1}}
.hw-scroll-rail{position:relative; display:block; width:1px; height:52px;
  background:rgba(255,255,255,.25); overflow:hidden}
.hw-scroll-rail i{position:absolute; left:0; top:-52px; width:1px; height:52px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff);
  animation:scrollcue 2.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes scrollcue{0%{transform:translateY(0)} 65%,100%{transform:translateY(104px)}}
.hw-scroll-chev{display:block; width:9px; height:9px; border-right:1.5px solid rgba(255,255,255,.8);
  border-bottom:1.5px solid rgba(255,255,255,.8); transform:rotate(45deg);
  animation:scrollchev 2.2s ease-in-out infinite}
@keyframes scrollchev{0%,100%{transform:rotate(45deg) translate(0,0); opacity:.55}
  60%{transform:rotate(45deg) translate(3px,3px); opacity:1}}
/* Reduced motion keeps the cue, loses the movement. */
@media (prefers-reduced-motion: reduce){
  .hw-scroll-rail i{animation:none; transform:translateY(52px)}
  .hw-scroll-chev{animation:none; opacity:.8}
  .hw-scroll-word{animation:none; opacity:.8}
}

.hw-scrim{position:absolute; inset:0;
  /* Lightened at the President's request: the film reads as dusk, not night, and the
     white type still clears it. Lightened again (Nov 2026) at the VP's request, mostly in
     the lower half; the foot keeps just enough shade for the scroll cue. */
  background:linear-gradient(180deg, rgba(16,15,15,.34) 0%, rgba(16,15,15,.20) 45%, rgba(16,15,15,.36) 100%)}
.hw-hero-inner{position:relative; z-index:3; padding-block:7rem; text-align:center}
.hw-h1{font-size:clamp(2.2rem,5.6vw,4.4rem); line-height:1.08; color:#fff; margin:0 0 1rem; letter-spacing:-.005em}
/* The settle animation only translates, so these lines need no clip box.
   The shared .bh-line clip was cutting the descender off "Banking". */
.hw-h1 .bh-line{display:block; overflow:visible; animation:settle .85s cubic-bezier(.22,.61,.36,1) both}
.hw-h1 .bh-line:nth-child(2){animation-delay:.09s}
/* `margin:0 auto` matters here: the global p max-width narrows this box, so
   without auto side margins the centred text sits left of the real centre. */
.hw-sub{font-family:'Garamond Book Italic','EB Garamond',Georgia,serif;
  font-size:clamp(1.15rem,2.2vw,1.7rem); color:rgba(255,255,255,.85); margin:0 auto 1.6rem;
  animation:settle .85s cubic-bezier(.22,.61,.36,1) .16s both}
.hw-blurb{max-width:58ch; margin:0 auto; color:rgba(255,255,255,.84); font-size:1.02rem;
  animation:settle .85s cubic-bezier(.22,.61,.36,1) .22s both}
.hw-cta{justify-content:center; animation:settle .85s cubic-bezier(.22,.61,.36,1) .28s both}
@keyframes settle{from{transform:translateY(16px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hw-h1 .bh-line,.hw-sub,.hw-blurb,.hw-cta{animation:none;transform:none}
}

@media (max-width:640px){ .hw-hero{min-height:80vh} }

/* ---------- Recent transactions rail ---------- */
/* A block of its own between the numbers band and the firm film, with the
   scroll controls under the tombstones rather than above them. */
.deal-rail{position:relative; z-index:5; padding-block:clamp(3rem,6vw,4.5rem) 0}
/* Closes the transactions band off before Articles & Insights begins. It
   lives inside this section so the two stay adjacent for spacing. */
/* Sector deal-volume dashboard, swapped in by the filter chips */
.sector-dash{margin:0 0 clamp(2rem,4vw,3rem); border:1px solid var(--hairline); background:#fff}
.sector-dash[hidden]{display:none}
.sector-dash img{display:block; width:100%; height:auto}
.sector-dash figcaption{font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--graphite); border-top:1px solid var(--hairline); padding:.7rem .9rem}
@media (max-width:760px){
  .sector-dash{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .sector-dash img{width:880px; max-width:none}
  .sector-dash figcaption{position:sticky; left:0; width:100vw}
}

.section-rule{border:0; border-top:2px solid var(--hairline);
  margin:clamp(2.2rem,4.5vw,3.2rem) 0 0}
.rail-nav{display:flex; gap:.5rem}
.rail-btn{width:40px; height:40px; border:1px solid var(--hairline); background:#fff; color:var(--crimson);
  cursor:pointer; border-radius:2px; font-size:1rem; line-height:1; transition:all .18s ease}
.rail-btn:hover:not(:disabled){background:var(--crimson); border-color:var(--crimson); color:#fff}
.rail-btn:disabled{opacity:.3; cursor:default}
.rail-btn:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
.rail{display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem max(16px, env(safe-area-inset-right,0px)) 1.6rem;
  padding-left:max(var(--gutter), calc((100% - var(--wrapmax)) / 2 + var(--gutter)));
  scroll-padding-left:max(var(--gutter), calc((100% - var(--wrapmax)) / 2 + var(--gutter)));
  scrollbar-width:thin}
.rail-auto{scroll-snap-type:none; scrollbar-width:none}
.rail-auto::-webkit-scrollbar{display:none}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--hairline)}
.rail-card{flex:0 0 300px; scroll-snap-align:start; border:1px solid var(--hairline); background:#fff;
  display:flex; align-items:center; justify-content:center; padding:1.4rem; min-height:300px;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease}
.rail-card:hover{border-color:var(--crimson); transform:translateY(-4px);
  box-shadow:0 8px 26px rgba(0,0,0,.08); text-decoration:none}
.rail-card img{max-height:260px; width:auto; max-width:100%; object-fit:contain}
@media (max-width:640px){ .rail-card{flex:0 0 78%} }

/* ---------- Statement section over photography ---------- */
.bh-statement{position:relative; overflow:hidden}
/* The still stays as the poster: it holds the band while the film loads and
   carries it if the film never plays. */
.stmt-bg{position:absolute; inset:0; overflow:hidden;
  background:url('../photos/stock-food-beverage.jpg') center/cover no-repeat;
  opacity:.65; filter:grayscale(12%)}
.bh-statement::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.93) 30%,
    rgba(255,255,255,.72) 62%,
    rgba(255,255,255,.28) 88%,
    rgba(255,255,255,.10) 100%)}
.stmt-inner{position:relative; z-index:2}

/* ---------- President quote ---------- */
.pres-quote{display:flex; gap:1.6rem; align-items:flex-start; margin:2.4rem 0 0; padding:1.8rem 0 0;
  border-top:1px solid var(--hairline)}
.pres-photo{width:104px; height:104px; flex:0 0 104px; object-fit:cover; object-position:center top;
  border-radius:50%; border:3px solid var(--crimson)}
.pres-body blockquote{font-family:var(--serif); font-style:italic;
  font-size:clamp(1.12rem,1.9vw,1.42rem); line-height:1.45; color:var(--ink); margin:0 0 .9rem}
.pres-body figcaption{display:flex; flex-direction:column; gap:.12rem}
.pres-name{font-family:var(--serif); font-size:1rem; color:var(--ink)}
.pres-role{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); font-weight:700}
@media (max-width:640px){ .pres-quote{flex-direction:column; gap:1.1rem} }

/* The T&H ampersand inside an uppercase, letterspaced sans label.
   The serif stack picks up the scoped U+0026 face. */
.amp{font-family:var(--serif); font-weight:500; font-size:1.2em;
  letter-spacing:0; text-transform:none; vertical-align:-.02em}

/* ---------- Services band ---------- */
.svc-band{padding-block:clamp(4rem,8vw,6.5rem); background:var(--paper)}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.svc-card{position:relative; display:block; border:1px solid var(--hairline); background:#fff;
  padding:2rem 1.5rem 1.7rem; text-decoration:none; overflow:hidden; transition:border-color .2s ease, transform .25s ease}
.svc-card::before{content:''; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--crimson); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.svc-card:hover{border-color:var(--crimson); transform:translateY(-4px); text-decoration:none}
.svc-card:hover::before{transform:scaleX(1)}
.svc-num{font-family:var(--serif); font-size:.92rem; color:var(--crimson); letter-spacing:.1em; display:block; margin-bottom:.7rem}
.svc-card h3{font-size:1.3rem; margin-bottom:.9rem; color:var(--ink)}
.svc-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.svc-card li{font-size:.84rem; color:var(--graphite); padding-left:.95rem; position:relative}
.svc-card li::before{content:''; position:absolute; left:0; top:.52em; width:5px; height:5px; background:var(--crimson)}

/* ---------- About: quote left, narrative right ---------- */
/* The card ranges left inside the centred section, the way the testimonial
   cards do, with the crimson accent across its top edge. */
/* An open pull quote: a crimson rule down the left, an oversized opening
   quote mark hanging beside the first line, and the attribution beneath. */
.about-block .pres-quote{position:relative; background:transparent; border:0;
  border-left:3px solid var(--crimson); border-top:0;
  padding:.2rem 0 .5rem clamp(3.4rem,5.5vw,5rem)}
.about-block .pres-quote::before{content:'\201C'; position:absolute;
  left:clamp(1rem,2vw,1.9rem); top:-.08em;
  font-family:var(--serif); font-size:clamp(3rem,5vw,4.4rem); line-height:1;
  color:var(--crimson)}
.about-block .pres-quote blockquote{font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,2.3vw,1.9rem); line-height:1.38; color:var(--ink);
  margin:0 0 clamp(1.6rem,3vw,2.2rem)}
.about-block .pres-quote figcaption{flex-direction:row; align-items:center; gap:1.1rem}
.pres-who{display:flex; flex-direction:column; gap:.22rem}
.about-block .pres-photo{width:76px; height:76px; flex:0 0 76px; margin-bottom:0; border-width:2px}
.pres-link{display:inline-flex; align-items:center; gap:.45rem; margin-top:.3rem;
  font-family:var(--sans); font-size:.8rem; color:var(--crimson); text-decoration:none}
.pres-link:hover{text-decoration:underline}
.pres-quote{display:block; margin:0; padding:0; border:0; background:var(--canvas);
  padding:2.4rem 2.2rem; border-left:3px solid var(--crimson)}
.pres-photo{width:104px; height:104px; flex:none; object-fit:cover; object-position:50% 38%;
  border-radius:50%; border:3px solid var(--crimson); margin-bottom:1.3rem}
.pres-quote blockquote{font-family:var(--serif); font-style:italic;
  font-size:clamp(1.18rem,2vw,1.52rem); line-height:1.45; color:var(--ink); margin:0 0 1.1rem}
.pres-quote figcaption{display:flex; flex-direction:column; gap:.15rem}
/* Ranged left from the wrap edge, in line with the links above it. */
.about-intro{max-width:none; color:var(--graphite); line-height:1.75;
  margin:0 0 clamp(2rem,4vw,2.8rem)}
.about-block{max-width:none}

/* ---------- Industries grid ---------- */
.bh-industries{background:var(--canvas)}
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.ind-card{position:relative; display:flex; flex-direction:column;
  align-items:stretch; justify-content:flex-start;
  background:#fff; border:1px solid var(--hairline);
  padding:1.9rem 1.6rem 1.7rem; text-decoration:none; width:100%; text-align:left;
  font-family:inherit; font-size:inherit; color:inherit; cursor:pointer;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease}
.ind-card:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
.ind-card:hover{border-color:var(--crimson); transform:translateY(-4px); box-shadow:0 8px 26px rgba(0,0,0,.07); text-decoration:none}
.ind-card h3{font-size:1.32rem; color:var(--ink); margin:0 0 1rem; padding-bottom:.85rem;
  border-bottom:1px solid var(--hairline)}
.ind-card:hover h3{color:var(--crimson)}
.ind-card ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem}
.ind-card li{font-size:.71rem; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite);
  border:1px solid var(--hairline); border-radius:2px; padding:.3rem .55rem; background:var(--canvas)}

@media (max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .svc-grid,.ind-grid{grid-template-columns:1fr}
}

/* The editorial angle sits under the report's published name */
.report-angle{font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.8vw,1.35rem);
  color:var(--crimson); margin:-.3rem 0 1rem}

/* ---------- Latest Insights rail ---------- */
.ins-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem}
.ins-head .bh-sec-title{margin:0}
.ins-rail{display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem max(16px, env(safe-area-inset-right,0px)) 1.8rem;
  padding-left:max(var(--gutter), calc((100% - var(--wrapmax)) / 2 + var(--gutter)));
  scroll-padding-left:max(var(--gutter), calc((100% - var(--wrapmax)) / 2 + var(--gutter)));
  scrollbar-width:thin}
.ins-rail::-webkit-scrollbar{height:4px}
.ins-rail::-webkit-scrollbar-thumb{background:var(--hairline)}

/* Inside a wrap the rails stop at the content column, so a partial card is cut
   at the same edge as every other section rather than at the screen edge. The
   full-bleed padding above is what a bare rail needs; this undoes it. */
.wrap > .rail, .wrap > .ins-rail{
  max-width:none; margin-inline:0;
  padding-left:0; padding-right:0; scroll-padding-left:0}
.ins-card{flex:0 0 336px; scroll-snap-align:start; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hairline); text-decoration:none;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease}
.ins-card:hover{border-color:var(--crimson); transform:translateY(-4px);
  box-shadow:0 8px 26px rgba(0,0,0,.08); text-decoration:none}
.ins-thumb{aspect-ratio:16/9; background:var(--canvas); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center; padding:.9rem; overflow:hidden}
.ins-thumb img{max-height:100%; max-width:100%; width:auto}
.ins-body{padding:1.4rem 1.3rem; display:flex; flex-direction:column; flex:1}
.ins-body .cat{font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:.6rem}
.ins-body h3{font-size:1.18rem; margin:0 0 .5rem; color:var(--ink); line-height:1.25}
.ins-card:hover h3{color:var(--crimson)}
.ins-body .hook{font-size:.88rem; color:var(--graphite); flex:1; margin:0 0 1rem}
.ins-body .more{font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--crimson)}
@media (max-width:640px){ .ins-card{flex:0 0 80%} }

/* ---------- Gated download ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.dl-top{padding-block:clamp(2rem,4vw,3rem) 0}
.dl-gate{background:var(--canvas); border:1px solid var(--hairline); border-left:4px solid var(--crimson);
  padding:1.9rem 1.8rem}
.dl-gate h2{font-size:clamp(1.25rem,2.2vw,1.65rem); margin:0 0 .45rem}
.dl-gate-copy p{margin:0 0 1.2rem; color:var(--graphite); font-size:.95rem; max-width:52ch}
.dl-gate-fields{display:flex; gap:.7rem; flex-wrap:wrap}
.dl-gate-fields input{flex:1; min-width:240px; padding:.85rem 1rem; border:1px solid var(--hairline);
  font-family:var(--sans); font-size:.97rem; background:#fff}
.dl-gate-fields input:focus{outline:2px solid var(--crimson); outline-offset:-2px}
.dl-gate-note{margin:.9rem 0 0; font-size:.76rem; color:var(--grey)}
.dl-gate-done{font-size:1rem; color:var(--ink)}
.dl-gate.done{border-left-color:var(--graphite)}

/* ---------- Services matrix ---------- */
.svc-matrix{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem}
.svc-box{border:1px solid var(--hairline); background:#fff; display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .25s ease}
.svc-box:hover{border-color:var(--crimson); box-shadow:0 8px 28px rgba(0,0,0,.07)}
.svc-box-head{background:var(--crimson); color:#fff; padding:1.1rem 1.6rem;
  display:flex; align-items:baseline; gap:.9rem}
.svc-box-head h2{font-family:var(--serif); font-size:1.42rem; color:#fff; margin:0; font-weight:500}
.svc-box-body{padding:1.7rem 1.6rem 1.8rem; display:flex; flex-direction:column; flex:1}
.svc-box-body h3{font-size:1.12rem; color:var(--ink); margin:0 0 .7rem}
.svc-box-body p{font-size:.95rem; color:var(--graphite); margin:0 0 1.3rem; max-width:none}
.svc-box-covers{list-style:none; margin:auto 0 0; padding:1.1rem 0 0; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:.45rem}
.svc-box-covers li{font-size:.71rem; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite);
  border:1px solid var(--hairline); background:var(--canvas); border-radius:2px; padding:.32rem .6rem}
@media (max-width:760px){ .svc-matrix{grid-template-columns:1fr} }

/* ---------- Brand marks used as accents ---------- */
.bh-numbers, .bh-industries{position:relative; overflow:hidden}
.band-mark{position:absolute; right:-3%; top:50%; transform:translateY(-50%);
  height:118%; width:auto; opacity:.06; pointer-events:none; filter:brightness(0) invert(1)}
.band-mark-light{filter:none; opacity:.05}
.world-mark{position:absolute; inset:0; margin:auto; width:100%; height:100%;
  object-fit:contain; opacity:.42; pointer-events:none}
.bh-numbers .wrap, .bh-industries .wrap{position:relative; z-index:2}

.footer-mono{display:flex; justify-content:center; margin-top:3rem}
.footer-mono img{height:30px; width:auto; opacity:.5}

/* ---------- Testimonials ---------- */
/* ---------- Client words ----------
   An editorial spread rather than a row of bordered cards: two client quotes
   centred side by side, with the brand ampersand in crimson behind them. The
   ground is white, so the band reads as a pause between the services rows and
   the questions below rather than a third full-bleed colour field. */
.quotes{position:relative; overflow:hidden; background:var(--paper); color:var(--ink);
  padding-block:clamp(3.5rem,7vw,6rem)}
/* Set as a character, not an image: 'TH Ampersand' in --serif covers U+0026,
   so this is the Garamond Book Italic outline and takes colour directly
   instead of through a filter chain. */
.quotes-amp{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:min(26rem,74vw); line-height:1;
  color:var(--crimson); opacity:.1; pointer-events:none; user-select:none}
.quotes-inner{position:relative; z-index:1}
/* Set like the service headings above them (.svc-copy h2), centred over the
   quotes and the questions. */
.quotes-title, .faq-title{margin:0 0 clamp(2rem,4vw,3rem); font-family:var(--serif);
  font-size:clamp(1.6rem,2.6vw,2.15rem); font-weight:500; color:var(--crimson); text-align:center}
.quotes-spread{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem); align-items:start; text-align:center;
  max-width:64rem; margin-inline:auto}
.quotes blockquote{margin:0; font-family:var(--serif); font-style:italic;
  color:var(--ink)}
.quotes figcaption{display:flex; align-items:center; justify-content:center;
  gap:.9rem; margin-top:1.4rem}
.quotes figcaption img{max-height:26px; max-width:120px; width:auto; object-fit:contain;
  flex:0 0 auto}
.quotes figcaption span{font-family:var(--sans); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite)}
.quote-lead{margin:0}
.quote-lead blockquote{font-size:clamp(1.08rem,1.7vw,1.32rem); line-height:1.55}
@media (max-width:860px){
  .quotes-spread{grid-template-columns:1fr; gap:clamp(1.8rem,4vw,2.4rem)}
  /* A hairline between them, in place of the box each used to sit in. */
  .quotes-spread > .quote-lead + .quote-lead{padding-top:clamp(1.8rem,4vw,2.4rem);
    border-top:1px solid var(--hairline)}
  .quotes-amp{font-size:16rem}
}

/* Boxed wordmark, centred above the two About columns */
/* Sits in the gap between the services band and the About columns, with equal
   space above and below, so .bh-about's top padding and this margin match. */
.pres-stamp{display:block; height:clamp(80px,9vw,118px); width:auto;
  margin:0 auto var(--stamp-gap)}
@media (max-width:640px){ .pres-stamp{height:62px} }

/* ---------- Transactions grid of real tombstone artwork ---------- */
.deal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.deal-card{display:flex; align-items:center; justify-content:center; background:#fff;
  border:1px solid var(--hairline); padding:1.3rem; min-height:250px; text-decoration:none;
  transition:border-color .18s ease, box-shadow .2s ease, transform .2s ease}
.deal-card:hover{border-color:var(--crimson); box-shadow:0 6px 22px rgba(0,0,0,.08); transform:translateY(-3px)}
.deal-card img{max-height:210px; max-width:100%; width:auto; object-fit:contain}
@media (max-width:1000px){ .deal-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .deal-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .deal-grid{grid-template-columns:1fr} }

.deal-card{position:relative}

/* ---------- Transaction landing page ---------- */
.deal-head{display:flex; flex-direction:column; align-items:center; gap:1.6rem; margin:0 0 2.4rem}
.deal-logo{max-width:210px; max-height:84px; width:auto; height:auto; object-fit:contain}
.deal-tombstone{max-width:420px; width:100%; height:auto; border:1px solid var(--hairline);
  background:#fff}
.deal-facts{width:100%; border-collapse:collapse; margin:0 0 2.2rem; font-size:.9rem}
.deal-facts th,.deal-facts td{text-align:left; vertical-align:top; padding:.62rem .9rem;
  border-bottom:1px solid var(--hairline)}
.deal-facts th{width:16rem; font-family:var(--sans); font-weight:600; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--graphite)}
.deal-dateline{font-family:var(--sans); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--graphite); margin:0 0 1.4rem}
.deal-facts + p,.deal-dateline + p{margin-top:0}
/* Two columns under the title: the tombstone and the facts on the left, the
   release on the right. Both sit inside the site's standard content width, so
   the outer margins match every other section and stop growing past 1200px. */
.deal-title{max-width:40ch}
.deal-body{padding-top:clamp(2rem,3.5vw,2.8rem)}
.deal-cols{display:grid; grid-template-columns:minmax(300px,400px) minmax(0,1fr);
  gap:clamp(2.4rem,5vw,4.5rem); align-items:start}
.deal-side .deal-head{margin:0 0 1.6rem}
.deal-side .deal-tombstone{max-width:none}
/* The contact page's rail, shown once a note is sent, closes the page. */
.contact-recent{padding-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.contact-recent[hidden]{display:none}
/* The deal's own tombstone lifts on hover, as the cards on the home page and
   the transactions page do. */
.deal-head .tomb-card{transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease}
.deal-head .tomb-card:hover{border-color:var(--crimson); transform:translateY(-4px);
  box-shadow:0 8px 26px rgba(0,0,0,.08)}
.deal-side .deal-facts{margin:0}
.deal-side .deal-facts th{width:42%; padding-left:0}
.deal-release{max-width:var(--measure)}
.deal-release > :first-child{margin-top:0}
/* No release: the tombstone on the left, the details on the right, centred
   on each other so neither column looks short. */
.deal-cols-brief{align-items:center}
.deal-cols-brief .deal-head{margin:0}
.deal-cols-brief .deal-release .deal-facts{margin:0}
/* The summary holds its place while the release scrolls, where the screen is
   tall enough to show all of it. */
@media (min-width:901px) and (min-height:860px){
  .deal-side{position:sticky; top:6.5rem}
}
@media (max-width:900px){
  .deal-cols{grid-template-columns:1fr}
  .deal-side{max-width:460px; margin-inline:auto; width:100%}
}
/* Attribution under a reproduced announcement */
.deal-source{font-size:.82rem; color:var(--graphite); border-top:1px solid var(--hairline);
  padding-top:1rem; margin-top:1.8rem}
.deal-source a{color:var(--crimson); text-decoration:none}
.deal-source a:hover{text-decoration:underline}
.deal-release .deal-sub{font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin:1.6rem 0 .5rem}
/* The original release as issued, offered under the text */
.deal-download{margin:1.8rem 0 0; padding-top:1.4rem; border-top:1px solid var(--hairline)}
.deal-download-btn{display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.1rem;
  border:1px solid var(--crimson); color:var(--crimson); background:#fff; text-decoration:none;
  font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  transition:background .15s, color .15s}
.deal-download-btn:hover{background:var(--crimson); color:#fff; text-decoration:none}
.deal-download-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.deal-download-kind{font-weight:400; opacity:.75; letter-spacing:.06em}
p.note{color:var(--graphite); font-style:italic}
@media (max-width:640px){
  .deal-facts th{width:auto; display:block; border:0; padding-bottom:.1rem}
  .deal-facts td{display:block; padding-top:.1rem}
}

/* ---------- Tombstone, one format everywhere ----------
   Replaces the scraped announcement images, which each carried their own
   margins, type sizes and footer. Set from deal data so every card matches. */
.tomb-card{background:#fff; border:1px solid var(--hairline); display:flex;
  flex-direction:column; text-align:center; aspect-ratio:5/6.7; overflow:hidden}
.tomb-card .tomb-body{flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.55rem; padding:1.1rem .95rem}
/* One type treatment for both parties: a client name and a buyer name are set
   identically, so a card never looks like two different designs. */
.tomb-name{font-family:var(--serif); font-size:1rem; line-height:1.25;
  color:var(--ink); margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
.tomb-verb{font-family:var(--sans); font-size:.66rem; letter-spacing:.05em;
  color:var(--graphite); margin:0; line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
/* Stacked, and the mark is sized by width so it cannot outgrow a narrow card. */
.tomb-foot{border-top:1px solid var(--crimson); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; padding:.6rem .7rem; background:#fff}
.tomb-mark{width:min(78%,150px); height:auto; display:block}
.tomb-role{font-family:var(--sans); font-size:.52rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--graphite);
  text-align:center; line-height:1.3}

/* Larger treatment for the single tombstone on a transaction landing page */
.tomb-card.lg{max-width:430px; margin:0 auto; aspect-ratio:auto; min-height:430px}
.tomb-card.lg .tomb-body{gap:1rem; padding:2.4rem 2rem}
.tomb-card.lg .tomb-verb,.tomb-card.lg .tomb-name{-webkit-line-clamp:none; display:block; overflow:visible}
.tomb-card.lg .tomb-name{font-size:1.5rem}
.tomb-card.lg .tomb-verb{font-size:.78rem}
.tomb-card.lg .tomb-foot{padding:1rem 1.2rem; gap:.45rem}
.tomb-card.lg .tomb-mark{width:min(70%,230px)}
.tomb-card.lg .tomb-role{font-size:.66rem}

/* Client mark inside a tombstone. Fixed slot height keeps every card aligned
   whatever the logo's own proportions. */
.tomb-mark-slot{height:56px; flex:none; width:100%; display:flex; align-items:center;
  justify-content:center}
.tomb-mark-slot img{max-height:100%; max-width:86%; width:auto; height:auto;
  object-fit:contain}
.tomb-card.lg .tomb-mark-slot{height:104px}
.tomb-card.lg .tomb-mark-slot img{max-width:74%}
.tomb-mark-slot.buyer{height:56px}
.tomb-mark-slot.buyer img{max-width:84%}
.tomb-card.lg .tomb-mark-slot.buyer{height:98px}

/* Office film at the head of the About page; holds its closing frame.
   The recording is 1920x1240 with black bars baked in, 99px top and 62px
   bottom. The window below is 1856x476 of the source, placed so the signage
   (centred at 992, 337 in source pixels) is dead centre in the frame. The
   picture only carries 149px of wall above the sign, so 476 is the tallest
   window that can still centre it. Both margins are percentages of the
   frame's WIDTH, which is how percentage margins resolve. */
.about-film-frame{position:relative; width:100%; aspect-ratio:1856/476;
  overflow:hidden; background:var(--canvas); border:1px solid var(--hairline);
  margin:0 0 clamp(1.8rem,3.5vw,2.8rem)}
.about-film{display:block; width:103.448%; height:auto;
  margin-left:-3.448%; margin-top:-5.334%}

/* Bottling line footage under the services matrix. Continuous b-roll, so it
   loops rather than resting on a frame. Measured letterboxing on this encode:
   1280x828 with 66px of black at the top and 40px at the bottom, leaving a
   1280x722 picture. Margin is a percentage of the frame's width, hence 66/1280. */
/* The film is the backdrop for the page title, the same arrangement the home
   hero uses. The frame fills the band and the video is scaled to cover it while
   the baked-in letterboxing stays cropped out. */
/* Sizing and layout come from the shared film-hero rule below. */
.svc-film-frame{position:absolute; inset:0; overflow:hidden}
/* The encode carries 65px of black on top and 40px below a 723px picture, so
   the picture is 87.3% of the frame. Scaling by 1/0.873 pushes both bars
   outside the band at any viewport, and the 1.51% nudge recentres on the
   picture rather than on the letterboxed frame. */
.svc-film{position:absolute; top:50%; left:50%; width:100%; height:100%;
  object-fit:cover; transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(1.1452) translateY(-1.51%)}
.svc-hero-scrim{position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(16,15,15,.58) 0%, rgba(16,15,15,.48) 45%, rgba(16,15,15,.74) 100%)}
.svc-hero-inner{position:relative; z-index:3; text-align:center; padding-block:clamp(3.5rem,7vw,6rem)}
.svc-hero-inner h1{color:#fff; margin:0; max-width:28ch; margin-inline:auto}
.svc-hero-cta{justify-content:center}

/* ---------- Services: alternating copy and photograph ---------- */
.svc-rows{display:flex; flex-direction:column; gap:clamp(3rem,6vw,5.5rem)}
.svc-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
/* Flip every second row so the photograph alternates sides. The copy keeps its
   place in the markup, so the reading order is unchanged for screen readers. */
.svc-row:nth-child(even) .svc-copy{order:2}
.svc-copy h2{font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.15rem);
  color:var(--crimson); margin:0 0 .5rem; font-weight:500}
.svc-copy h3{font-size:1.1rem; color:var(--ink); margin:0 0 .8rem}
.svc-copy p{font-size:.98rem; color:var(--graphite); margin:0 0 1.2rem; max-width:46ch}
.svc-copy .svc-box-covers{margin:0 0 1.6rem}
.svc-shot img{display:block; width:100%; height:auto; aspect-ratio:3/2;
  object-fit:cover; border:1px solid var(--hairline)}
@media (max-width:760px){
  .svc-row{grid-template-columns:1fr; gap:1.6rem}
  .svc-row:nth-child(even) .svc-copy{order:0}
  .svc-shot{order:-1}
}

/* The sale-process timeline is wide; let it scroll rather than shrink to
   illegibility on a narrow screen. */
.svc-timeline{display:block; width:100%; min-width:900px; height:auto}
.svc-timeline-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* The client's own words on the page about their transaction */
.deal-quote{margin:2.4rem 0 0; padding:1.6rem 0 0; border-top:1px solid var(--hairline)}
.deal-quote blockquote{font-family:var(--serif); font-style:italic; font-size:1.12rem;
  line-height:1.5; color:var(--ink); margin:0 0 1rem}
.deal-quote figcaption{display:flex; align-items:center; gap:.9rem;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--graphite)}
.deal-quote figcaption img{height:30px; width:auto}

/* Transactions hero: the title over looping footage, as on Services */
.txn-hero, .film-hero, .svc-hero{position:relative; overflow:hidden; background:var(--ink);
  display:flex; align-items:center;
  /* The footage is 16:9, so the band follows that ratio rather than cropping
     to a letterbox strip. 56.25vw is exactly 9/16 of the width. Bounded so it
     never eats the whole screen or collapses to a sliver on a phone. */
  min-height:clamp(260px, 56.25vw, 720px); max-height:78vh}
.txn-film-frame, .film-hero-frame{position:absolute; inset:0; overflow:hidden}
.txn-film, .film-hero-video{position:absolute; top:50%; left:50%; width:100%; height:100%;
  object-fit:cover; transform:translate(-50%,-50%)}
.txn-hero-scrim, .film-hero-scrim{position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(16,15,15,.58) 0%, rgba(16,15,15,.48) 45%, rgba(16,15,15,.74) 100%)}
.txn-hero-inner, .film-hero-inner{position:relative; z-index:3; text-align:center;
  padding-block:clamp(3.2rem,6vw,5rem)}
.txn-hero-inner h1, .film-hero-inner h1{color:#fff; margin:0; max-width:22ch; margin-inline:auto}

/* The nav wraps to two rows on a narrow screen, which makes the fixed ribbon
   far taller than its desktop height. Without this the title runs underneath
   it. Affects both film heroes. */
@media (max-width:760px){
  .txn-hero-inner, .film-hero-inner, .svc-hero-inner{padding-top:clamp(9rem, 26vw, 11rem)}
}

/* The office film where the boxed wordmark used to sit, above the two About
   columns. Same sign-centred window as the About page: a 1856x476 crop of the
   1920x1240 encode, which carries 99px of black at the top. */

/* Transactions hero action, and the sector tile count line */
.txn-hero-cta{justify-content:center}

/* A PDF cover is portrait. Absolute positioning keeps it inside the card's
   16:9 frame: as a flex child it would otherwise force the frame taller than
   its aspect-ratio and the covered cards would outgrow the chart ones.
   Anchored to the top so the masthead and title stay in view. */
.thumb:has(img.is-cover),.ins-thumb:has(img.is-cover){position:relative; padding:0; overflow:hidden}
.thumb img.is-cover,.ins-thumb img.is-cover{position:absolute; inset:0;
  width:100%; height:100%; max-height:none; object-fit:cover; object-position:top center}

/* Process heading, set like the service row titles above it */
.svc-process-title{font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.15rem);
  color:var(--crimson); font-weight:500; margin:0 0 .9rem}

/* Where two off-white sections meet they read as one block, so a hairline
   marks the break. Invisible where the colour already changes. */
.canvas + .canvas{border-top:1px solid var(--hairline)}

/* ---------- Enquiry launcher, bottom corner ---------- */
.th-ask{position:fixed; right:1.6rem; bottom:1.6rem; z-index:10000;  /* above the cookie notice and the host's badge */
  display:flex; flex-direction:column; align-items:flex-end; gap:.7rem}
.th-ask-btn{width:58px; height:58px; border-radius:50%; border:2px solid #fff;
  background:var(--crimson); cursor:pointer; padding:0; display:flex;
  align-items:center; justify-content:center; order:2;
  box-shadow:0 6px 20px rgba(0,0,0,.18); transition:background .2s ease, transform .2s ease}
.th-ask-btn img{width:26px; height:auto; filter:brightness(0) invert(1)}
.th-ask-btn:hover{background:var(--crimson-dark); transform:translateY(-2px)}
.th-ask-btn:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
.th-ask.open .th-ask-btn{background:var(--crimson-dark)}

.th-ask-panel{order:1; width:min(19rem,calc(100vw - 3.2rem)); background:#fff;
  border:1px solid var(--hairline); box-shadow:0 14px 40px rgba(0,0,0,.14);
  padding:1.25rem 1.25rem 1rem; text-align:left;
  /* With a download offer and a subscribe form stacked above the contact
     links the panel outgrows a short laptop screen, and it grows upward from
     the button, so the heading is what disappears. Cap it and let it scroll. */
  max-height:calc(100vh - 6.5rem); overflow-y:auto; overscroll-behavior:contain}
.th-ask-title{font-family:var(--serif); font-size:1.15rem; color:var(--ink); margin:0 0 .25rem}
.th-ask-sub{font-size:.82rem; color:var(--graphite); margin:0 0 1rem; max-width:none}
/* Let's Connect: the panel's resting state on pages that make no other
   offer. A button to the form, then the two ways to reach the firm. */
.th-ask-connect{display:flex; flex-direction:column}
.th-ask-cta{width:100%; text-align:center; margin:.2rem 0 .9rem}
.th-ask-line{display:block; padding:.55rem 0; border-top:1px solid var(--hairline);
  font-size:.86rem; color:var(--ink); text-decoration:none}
.th-ask-line:hover{color:var(--crimson); text-decoration:none}
.th-ask-opt-h{display:block; font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--crimson)}
.th-ask-opt-s{display:block; font-size:.84rem; color:var(--graphite); margin-top:.15rem}
.th-ask-opt:hover .th-ask-opt-s{color:var(--ink)}

/* the back-to-top button stacks above the launcher so they never overlap */
.bh-top{bottom:calc(1.6rem + 58px + .7rem)}
@media (max-width:640px){
  .th-ask{right:1rem; bottom:1rem}
  .th-ask-btn{width:50px; height:50px}
  .bh-top{right:1rem; bottom:calc(1rem + 50px + .6rem)}
}

/* Office details beside the contact form, in place of a map placeholder */
.office-card{margin-top:1.4rem; padding:1.3rem 1.4rem; background:var(--canvas);
  border:1px solid var(--hairline)}
.office-card-h{font-family:var(--serif); font-size:1.05rem; color:var(--ink); margin:0 0 .5rem}
.office-card p{font-size:.88rem; color:var(--graphite); margin:0 0 .9rem}

/* ---------- Bio pages ---------- */
.bio-title{font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--crimson); margin:.4rem 0 .3rem}
.bio-prior{font-size:.95rem; color:var(--graphite); margin:0}
/* Boston from the harbour behind a crimson band (the footer's crimson) that carries the portrait
   and the name. The band stops short of the right edge so the photograph
   runs on past it, and the portrait sits across the band's top edge. */
.bio-hero{padding:0; --av:clamp(132px,15vw,250px); --lap:clamp(56px,9vw,170px);
  --padt:clamp(1.8rem,3.2vw,2.8rem)}
.bio-sky{height:clamp(220px,30vw,540px); background:var(--canvas) center 42% / cover no-repeat}
.bio-band{position:relative; margin-top:calc(-1 * var(--lap)); color:#fff;
  background:linear-gradient(to right, var(--crimson) 0 91%, transparent 91%);
  padding:var(--padt) 0 clamp(2.2rem,4vw,3.4rem)}
.bio-band-inner{display:grid; grid-template-columns:var(--av) 1fr; gap:clamp(1.4rem,3vw,2.8rem);
  align-items:start}
.bio-avatar{width:var(--av); height:var(--av); border-radius:50%; object-fit:cover;
  object-position:center 22%; margin-top:calc(-.3 * var(--av) - var(--padt)); background:var(--canvas)}
.bio-id{padding-top:clamp(.4rem,1.6vw,1.6rem)}
.bio-id h1{color:#fff; margin:0 0 .55rem}
.bio-hero .bio-title{font-size:1.05rem; font-weight:400; letter-spacing:0; text-transform:none;
  color:rgba(255,255,255,.88); margin:0}
.bio-reach{margin:1.3rem 0 0; display:grid; gap:.45rem; justify-items:start}
.bio-reach a{display:inline-flex; align-items:center; gap:.55rem; color:#fff; font-size:.95rem;
  text-decoration:none}
.bio-reach a:hover{color:#fff; text-decoration:underline}
.bio-reach-note{font-size:.78rem; opacity:.75; margin-left:.1rem}
.bio-reach svg{width:17px; height:17px; fill:none; stroke:#fff; stroke-width:1.6;
  stroke-linejoin:round; flex:0 0 auto}
.bio-main{padding-top:clamp(2.2rem,4vw,3.2rem)}
.bio-cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,5vw,4.5rem);
  align-items:start}
.bio-copy h2{color:var(--crimson); margin:0 0 1rem}
.bio-cols .bio-copy p{max-width:74ch}
.bio-side-block{padding:0 0 1.5rem; margin:0 0 1.5rem; border-bottom:1px solid var(--hairline)}
.bio-side-block:last-child{margin-bottom:0}
.bio-side-block h3{font-family:var(--serif); font-size:1.4rem; color:var(--ink); margin:.35rem 0 .9rem}
.bio-side-block ul{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.bio-side-block p{font-size:.95rem; color:var(--ink); margin:0 0 .6rem}
.bio-school{display:block; font-size:.95rem; color:var(--ink); font-weight:600; line-height:1.45}
.bio-degree{display:block; font-size:.92rem; color:var(--graphite); line-height:1.45}
@media (max-width:860px){ .bio-cols{grid-template-columns:1fr} }
.bio-copy p{max-width:62ch}
.bio-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.6rem,3vw,2.6rem)}
.bio-block h3{font-family:var(--sans); font-size:.76rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--graphite); margin:0 0 .7rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--hairline)}
.bio-block ul{list-style:none; margin:0; padding:0}
.bio-block li{font-size:.9rem; color:var(--ink); margin-bottom:.55rem; line-height:1.5}
.bio-block p{font-size:.9rem; color:var(--ink); margin:0}
/* the team grid cards are links now */
a.bio{display:block; text-decoration:none}
a.bio:hover{text-decoration:none}
a.bio:hover .name{color:var(--crimson)}
a.bio .portrait{overflow:hidden}
a.bio:hover .portrait img{transform:scale(1.03)}
a.bio .portrait img{transition:transform .35s ease}
@media (max-width:640px){
  .bio-band{background:var(--crimson)}
  .bio-band-inner{grid-template-columns:1fr; gap:.9rem}
  .bio-id{padding-top:0}
}

/* ---------- Careers application form ---------- */
.apply{margin-top:2rem}
.apply-label{display:block; font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); margin:1.1rem 0 .4rem}
.apply-req{font-weight:400; letter-spacing:.04em; text-transform:none; color:var(--crimson)}
.apply-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem}
.apply-file{padding:.6rem 1rem; background:#fff; font-size:.88rem}
.apply-note{font-size:.78rem; color:var(--grey); margin:.5rem 0 0}
.apply .btn{margin-top:1.6rem}
.apply-done{margin-top:1.2rem; font-family:var(--serif); font-size:1.05rem; color:var(--crimson)}

/* The application form: full-width stacked fields on the canvas, the attach
   control and its limits on one line with the submit. */
.join{margin-top:2rem}
.join-f{display:block; width:100%; margin:0 0 1.1rem; background:#fff;
  border:1px solid var(--hairline); padding:1.15rem 1.2rem;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.04); transition:border-color .18s ease}
.join-f::placeholder{color:var(--graphite); opacity:1}
.join-f:focus{outline:none; border-color:var(--crimson)}
.join-area{resize:vertical; min-height:190px}
.join-row{display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:1rem clamp(1.2rem,3vw,2.4rem); margin-top:1.4rem}
.join-file{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
/* A label standing in for the off-screen file input, so it can be styled. */
.join-attach{display:inline-block; cursor:pointer; background:var(--graphite); color:#fff;
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.9rem 1.3rem; transition:background-color .18s ease}
.join-attach:hover{background:var(--crimson)}
.join-f:focus-visible + .join-attach,
#apResume:focus-visible + .join-attach{outline:2px solid var(--crimson); outline-offset:3px}
.join-filename{font-size:.85rem; color:var(--graphite)}
.join-note{font-size:.85rem; color:var(--grey); margin:0; line-height:1.5}
/* Careers: resume / cover letter upload. The native input is hidden behind a
   button-styled label so it matches the form; the chosen names show beside it. */
.join-file{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:0 0 1.3rem}
.join-file input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.join-file-btn{display:inline-block; cursor:pointer; padding:.7rem 1.1rem; border:1px solid var(--crimson);
  color:var(--crimson); background:#fff; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.join-file-btn:hover{background:var(--crimson); color:#fff}
.join-file input[type=file]:focus-visible + .join-file-names, .join-file:focus-within .join-file-btn{outline:2px solid var(--crimson); outline-offset:2px}
.join-file-names{font-size:.85rem; color:var(--grey)}
.join-file-names.bad{color:var(--crimson)}
.join-submit{margin-left:auto}
@media (max-width:620px){
  .join-row{grid-template-columns:1fr; align-items:start; justify-items:stretch}
  .join-submit{margin-left:0; width:100%}
}
@media (max-width:640px){ .apply-grid{grid-template-columns:1fr} }

/* Form fields, shared by the contact form and the careers application */
.f{padding:.85rem 1rem; border:1px solid var(--hairline); background:#fff;
  font-family:var(--sans); font-size:.97rem; width:100%; display:block;
  color:var(--ink); border-radius:0}
.f:focus{outline:2px solid var(--crimson); outline-offset:-2px}
select.f{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--crimson) 50%),linear-gradient(135deg,var(--crimson) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:2.6rem}
textarea.f{resize:vertical}

/* Contact form: the reason for getting in touch is one tap, not a paragraph. */
.contact-card{max-width:640px; margin-inline:auto}
.pagehead-contact .wrap{text-align:center}
.contact-card .cf-grid{max-width:none}
.contact-sec{padding-block:clamp(1.6rem,3vw,2.4rem) clamp(2rem,4vw,3rem)}
.cf-grid{display:grid; gap:.8rem; max-width:520px}
.cf-pair{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.cf-chips{border:0; margin:0 0 .3rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.cf-chips legend{font-size:.92rem; font-weight:600; color:var(--ink); margin-bottom:.6rem; padding:0}
.cf-chips.need legend{color:var(--crimson)}
.cf-chips label{position:relative; cursor:pointer}
.cf-chips input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.cf-chips span{display:inline-block; padding:.62rem 1rem; border:1px solid var(--hairline); background:#fff;
  font-size:.92rem; color:var(--ink); line-height:1.2; transition:border-color .15s, background .15s, color .15s}
.cf-chips label:hover span{border-color:var(--crimson)}
.cf-chips input:checked + span{background:var(--crimson); border-color:var(--crimson); color:#fff}
.cf-chips input:focus-visible + span{outline:2px solid var(--crimson); outline-offset:2px}
.cf-chips.need span{border-color:var(--crimson)}
.cf-trap{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
@media (max-width:640px){
  .cf-pair{grid-template-columns:1fr}
  .cf-chips span{padding:.7rem .95rem}
  #contactForm .btn{width:100%; text-align:center}
}

/* Back link stands in for the eyebrow at the head of a bio page */
.bio-back{margin:0}
/* The back link on the left, arrows to the previous / next banker on the
   right, in the same square buttons the article carousels use. */
.bio-topline{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.1rem}
.bio-topline .bh-link{margin-top:0}
.bio-pager{display:flex; gap:.5rem}
.bio-pager .rail-btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:1rem; line-height:1}

/* ------------------------------------------------------------------ FAQ
   A plain <details> accordion: every answer stays in the DOM for a crawler
   while the page stays short for a reader, and nothing needs script. */
.faq{margin-top:2rem; border-top:1px solid var(--hairline)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.1rem 2.4rem 1.1rem 0;
  font-family:var(--serif); font-size:1.08rem; line-height:1.35; color:var(--ink);
  transition:color .18s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--crimson)}
.faq-item summary:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
/* The marker is drawn rather than typed so it cannot pick up a system glyph. */
.faq-item summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:11px; height:11px;
  margin-top:-6px; border-right:2px solid var(--crimson); border-bottom:2px solid var(--crimson);
  transform:rotate(45deg); transform-origin:60% 60%; transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item[open] summary{color:var(--crimson)}
.faq-a{padding:0 2.4rem 1.3rem 0}
.faq-a p{margin:0; color:var(--graphite); font-size:.95rem}
.faq-a a{color:var(--crimson)}

/* ------------------------------------------------- THE READING COLUMN
   `.narrow` caps the wrapper, and the wrapper carries the page gutter, so a
   720px measure was rendering as 528px of text: a phone-width column adrift
   in a desktop window. `.wide-read` puts the gutter outside the measure and
   lets a report, which carries charts as well as prose, run wider than a
   short page would. */
.wide-read{max-width:calc(820px + var(--gutter) * 2)}
.wide-read p, .wide-read .lede, .wide-read.prose p{max-width:none}

/* Button and text link on one line, with room between them and a shared
   centre line: inline they ended up touching and sitting off-baseline. */
.rail-foot{display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(1.2rem,2.5vw,2rem)}
.rail-foot .bh-link{margin:0}

/* Keep reading: suggestions, then a way into the deals behind the research */
.related{margin:0 0 1.8rem; padding-left:1.1rem}
.related li{margin:0 0 .5rem}
.related .rel-cat{color:var(--grey); font-size:.86rem}
.read-next{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* The ampersand behind the contact page, in the firm's own red */
.pagehead-contact{position:relative; overflow:hidden}
.pagehead-contact h1{color:var(--crimson)}
.amp-mark{position:absolute; right:calc(var(--gutter) * .4); top:50%;
  transform:translateY(-50%); height:min(300px, 86%); width:auto;
  opacity:.07; pointer-events:none; user-select:none}
@media (max-width:860px){ .amp-mark{height:200px; opacity:.05} }

/* ------------------------------------------------ SERVICES ACCORDION
   Four practices in one screen instead of four full-height rows. <details>
   holds the state, so there is no script and no custom ARIA to get wrong. */
.svc-band{padding-block:clamp(3rem,6vw,5rem)}
.svc-band-title{margin:0 0 clamp(2.2rem,4.5vw,3.4rem)}
.svc-band-lede{margin:0 0 clamp(1.8rem,3vw,2.6rem)}
.svc-item{margin-bottom:.55rem}
/* The bar is crimson and reverses to white on hover. The inset shadow gives the
   white state an edge, so it does not dissolve into the page behind it. */
.svc-item summary{list-style:none; cursor:pointer; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto; align-items:center;
  gap:1rem; background:var(--crimson); color:#fff;
  padding:clamp(1rem,1.8vw,1.35rem) clamp(1rem,2vw,1.6rem);
  box-shadow:inset 0 0 0 1px var(--crimson);
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease}
.svc-item summary::-webkit-details-marker{display:none}
.svc-item summary:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
.svc-item-name{font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.5rem); color:#fff}
.svc-item-head{color:rgba(255,255,255,.82); font-size:.95rem}
/* Drawn, so it cannot pick up a system glyph. */
.svc-item-mark{position:relative; width:14px; height:14px; flex:0 0 auto}
.svc-item-mark::before, .svc-item-mark::after{content:""; position:absolute; background:#fff;
  transition:transform .22s ease, opacity .22s ease, background-color .18s ease}
.svc-item-mark::before{left:0; top:6px; width:14px; height:1.5px}
.svc-item-mark::after{left:6px; top:0; width:1.5px; height:14px}
.svc-item[open] .svc-item-mark::after{transform:scaleY(0); opacity:0}

.svc-item summary:hover{background:#fff; color:var(--crimson)}
.svc-item summary:hover .svc-item-name{color:var(--crimson)}
.svc-item summary:hover .svc-item-head{color:var(--crimson)}
.svc-item summary:hover .svc-item-mark::before,
.svc-item summary:hover .svc-item-mark::after{background:var(--crimson)}

.svc-item-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(1.4rem,3vw,2.6rem);
  padding:clamp(1.4rem,2.5vw,2rem) clamp(1rem,2vw,1.6rem) clamp(1.6rem,3vw,2.4rem)}
.svc-item-copy p{margin:0 0 1.2rem; max-width:52ch}
.svc-item-copy .svc-box-covers{margin-bottom:1.2rem}
.svc-item-shot img{display:block; width:100%; height:100%; max-height:300px;
  object-fit:cover}
/* The timeline is wide by nature, so it spans the body rather than sharing a column. */
.svc-timeline-fig{grid-column:1 / -1; margin:.4rem 0 0}
.svc-timeline-fig img{display:block; width:100%; height:auto}
.svc-timeline-fig figcaption{font-size:.78rem; color:var(--grey); margin-top:.6rem}
@media (max-width:760px){
  .svc-item summary{grid-template-columns:minmax(0,1fr) auto; row-gap:.3rem}
  .svc-item-head{grid-column:1; grid-row:2}
  .svc-item-body{grid-template-columns:1fr}
}

/* ------------------------------------------- AREAS OF FOCUS MATRIX
   Three panels: the sector list on the left, what that sector covers in the
   middle, and a photograph on the right. The two right-hand panels are cut on
   a diagonal so the band reads as one angled plane rather than three boxes. */
.sect-matrix-band{padding-block:0; overflow:hidden}
.sect-matrix{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.1fr);
  align-items:stretch; min-height:clamp(380px,42vw,520px)}
.sect-intro{padding:clamp(2.6rem,5vw,4rem) clamp(1.4rem,3vw,2.6rem) clamp(2.6rem,5vw,4rem) 0;
  display:flex; flex-direction:column; justify-content:center}
.sect-intro h2{color:var(--crimson); margin:0 0 .9rem}
.sect-intro p{color:var(--graphite); font-size:.95rem; margin:0 0 1.6rem; max-width:40ch}
.sect-tabs{display:flex; flex-direction:column}
.sect-tab{appearance:none; background:transparent; border:0; border-left:3px solid transparent;
  font-family:inherit; font-size:1rem; color:var(--ink); text-align:left; cursor:pointer;
  padding:.62rem 1rem; display:flex; align-items:center; gap:.5rem;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease}
@media (hover:hover){ .sect-tab:hover{color:var(--crimson)} }
.sect-tab:focus-visible{outline:2px solid var(--crimson); outline-offset:-2px}
.sect-tab.on{background:#fff; border-left-color:var(--crimson); font-weight:700}
/* The same arrow the rest of the site uses, rather than a drawn triangle. */
.sect-caret{color:var(--crimson); font-size:.95rem; line-height:1;
  opacity:0; transform:translateX(-4px);
  transition:opacity .18s ease, transform .18s ease}
.sect-tab.on .sect-caret{opacity:1; transform:none}
@media (hover:hover){ .sect-tab:hover .sect-caret{opacity:1; transform:none} }

/* The photograph runs the full width of both right-hand columns and the detail
   panel is frosted glass laid over it, so the sector list reads against the
   image rather than beside it. Both edges are vertical: nothing else on the
   site is cut on an angle, and the frosting alone separates the two planes. */
.sect-intro{grid-column:1; grid-row:1}
.sect-photo{grid-column:2 / 4; grid-row:1; z-index:1;
  clip-path:polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%)}
/* Both edges are cut on the same angle, so the panel reads as a blade laid
   across the photograph. The slant is a fixed length rather than a percentage:
   as a percentage it eats the narrow panel on a small screen and clips the
   text, which is what happened the first time this was built. */
.sect-matrix{--slant:clamp(28px, 4vw, 64px)}
.sect-detail{grid-column:2; grid-row:1; z-index:2;
  position:relative;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(14px) saturate(1.04);
  backdrop-filter:blur(14px) saturate(1.04);
  clip-path:polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,4vw,3rem) calc(clamp(2rem,4vw,3rem) + var(--slant))}
/* Without backdrop-filter the veil carries the legibility on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .sect-detail{background:rgba(255,255,255,.88)}
}
@media (max-width:860px){
  .sect-matrix{--slant:0px}
  .sect-detail{background:rgba(255,255,255,.82)}
}
.sect-panel{width:100%; max-width:30ch}
.sect-panel ul{list-style:none; margin:0 0 1.6rem; padding:0; display:flex;
  flex-direction:column; gap:.75rem}
.sect-panel li{font-size:1rem; color:var(--ink); line-height:1.3}
.sect-more{appearance:none; background:transparent; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--crimson); display:inline-flex; align-items:center; gap:.5rem}
.sect-more:hover{gap:.8rem}
.sect-more:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
.sect-more span{transition:transform .2s ease}
.sect-more:hover span{transform:translateX(3px)}

/* The two panel actions stack: see the deals, or read the sector's dashboard. */
.sect-actions{display:flex; flex-direction:column; align-items:flex-start; gap:.75rem}
/* Inline rather than flex: the label is long enough to wrap, and as a flex row
   the arrow would be stranded at the far edge instead of following the text. */
.sect-dash-btn{appearance:none; background:transparent; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); display:inline; text-align:left; line-height:1.5;
  transition:color .2s ease}
.sect-dash-btn .nb{white-space:nowrap}
.sect-dash-btn .nb span{display:inline-block; margin-left:.4rem; transition:transform .2s ease}
.sect-dash-btn:hover{color:var(--crimson)}
.sect-dash-btn:hover span{transform:translateX(3px)}
.sect-dash-btn:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}

/* Both panel actions start at the same left edge, and the longer label wraps
   left rather than centring on itself. */
.sect-actions .sect-more{text-align:left; justify-content:flex-start}

/* A single sector shows its deals as a carousel rather than a four-wide grid. */
.deal-rail-wrap[hidden]{display:none}
.deal-rail-nav{justify-content:flex-end; margin-bottom:1rem}
.deal-rail-track{padding-bottom:.6rem}
.deal-rail-track .deal-card{flex:0 0 300px; scroll-snap-align:start}
@media (max-width:560px){ .deal-rail-track .deal-card{flex-basis:78vw} }

/* The dashboard lightbox. Same image the filter chip reveals further down the
   page, shown without making the reader go looking for it. */
.dash-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center;
  justify-content:center; padding:clamp(.8rem,3vw,2.5rem)}
.dash-modal[hidden]{display:none}
.dash-modal-backdrop{position:absolute; inset:0; background:rgba(16,15,15,.78)}
.dash-modal-panel{position:relative; background:var(--paper); width:min(1180px,96vw);
  max-height:92vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.35)}
.dash-modal-head{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem clamp(1rem,2vw,1.4rem) .6rem;
  position:sticky; top:0; z-index:1; background:var(--paper)}
.dash-modal-actions{display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1rem)}
.dash-modal-dl{padding:.6rem 1.1rem; font-size:.72rem; white-space:nowrap}
.dash-modal-title{font-family:var(--serif); font-size:clamp(1rem,2vw,1.25rem);
  margin:0; color:var(--ink)}
.dash-modal-close{appearance:none; background:transparent; border:0; cursor:pointer;
  font-size:1.7rem; line-height:1; color:var(--graphite); padding:.1rem .35rem}
.dash-modal-close:hover{color:var(--crimson)}
.dash-modal-close:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
.dash-modal-panel img{display:block; width:100%; height:auto}
.dash-modal-note{font-size:.76rem; color:var(--grey);
  margin:.8rem clamp(1rem,2vw,1.4rem) 1.2rem}

/* The page behind must not scroll while the lightbox is open. */
body.dash-open{overflow:hidden}

.sect-photo{position:relative; background:var(--canvas)}
.sect-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Six photographs share the frame; only the selected sector's shows. Without
   this the last in the stack (Pet Care) sat over Food & Beverage on landing. */
.sect-shot{opacity:0; transition:opacity .4s ease}
.sect-shot.on{opacity:1}
/* Portrait sources lose over half their height to this landscape band, so the
   two tallest crop from near the top rather than the middle. */
#shot-pet-care{object-position:center 16%}
#shot-consumer-discretionary{object-position:center 28%}
/* Behind the photographs, so a sector whose shot is not on the site yet shows
   a deliberate ink panel rather than a broken image. */
.sect-photo-mark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  height:min(260px, 52%); width:auto; opacity:.12; pointer-events:none;
  filter:brightness(0) invert(1)}

/* Stacked on a narrow screen: no diagonals, the photo on top. */
@media (max-width:900px){
  .sect-matrix{grid-template-columns:1fr; min-height:0}
  /* Stacked, so the panel sits under the photo rather than over it. */
  .sect-intro, .sect-detail, .sect-photo{grid-column:auto; grid-row:auto}
  .sect-intro{padding:clamp(2.2rem,6vw,3rem) 0 1.4rem}
  .sect-detail{padding:.4rem 0 1.8rem; background:none; justify-content:flex-start;
    -webkit-backdrop-filter:none; backdrop-filter:none}
  .sect-panel{max-width:none}
  .sect-panel > ul{display:none}
  .sect-photo{order:-1; aspect-ratio:16/9; margin-inline:calc(var(--gutter) * -1)}
  /* iPhone: a fixed height as well, so the photo shows even where the browser
     does not size the empty frame from aspect-ratio alone. */
  .ind-hub-matrix .sect-photo{height:56.25vw; min-height:200px; aspect-ratio:auto}
}

/* --------------------------------------------------- CLEAR RIBBON
   On the three pages that open on a dark film, the header sits over it with
   no ground of its own: white wordmark, white nav. It fills in on hover, and
   on its own once the page has scrolled past the hero, at which point the
   wordmark returns to crimson. */
.site-header.clear{
  position:fixed; left:0; right:0; background:transparent;
  border-bottom-color:transparent;
  transition:background-color .25s ease, border-color .25s ease}
.site-header.clear .logo img{filter:brightness(0) invert(1); transition:filter .25s ease}
.site-header.clear .nav a{color:#fff}
.site-header.clear .nav a:hover{color:#fff; opacity:.75}
.site-header.clear .nav-cta{background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.55); color:#fff !important}
.site-header.clear .nav-cta:hover{background:#fff; color:var(--crimson) !important; opacity:1}
.site-header.clear:hover, .site-header.clear.solid{
  background:var(--paper); border-bottom-color:var(--hairline)}
.site-header.clear:hover .logo img, .site-header.clear.solid .logo img{filter:none}
.site-header.clear:hover .nav a, .site-header.clear.solid .nav a{color:var(--ink)}
.site-header.clear:hover .nav a:hover, .site-header.clear.solid .nav a:hover{color:var(--crimson); opacity:1}
.site-header.clear:hover .nav a.active, .site-header.clear.solid .nav a.active{color:var(--crimson)}
.site-header.clear:hover .nav-cta, .site-header.clear.solid .nav-cta{
  background:var(--crimson); border-color:var(--crimson); color:#fff !important}
.site-header.clear:hover .nav-cta:hover, .site-header.clear.solid .nav-cta:hover{background:var(--crimson-dark)}
/* The hero sits under a fixed ribbon, so it starts at the top of the page. */
.site-header.clear + .hw-hero, .site-header.clear ~ main > .svc-hero:first-child,
.site-header.clear ~ main > .txn-hero:first-child,
.site-header.clear ~ main > .film-hero:first-child{margin-top:0}

/* LinkedIn, at the end of the nav */
.nav-li{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; color:var(--ink)}
.nav-li svg{width:17px; height:17px; fill:currentColor}
.nav-li:hover{color:var(--crimson)}
.site-header.clear .nav-li{color:#fff}
.site-header.clear:hover .nav-li, .site-header.clear.solid .nav-li{color:var(--ink)}
.site-header.clear:hover .nav-li:hover, .site-header.clear.solid .nav-li:hover{color:var(--crimson)}

/* Dashboard cards sit in the publications grid like any other card. The
   dashboards are wide, so the thumb crops to the top where the charts are
   rather than letterboxing them into the 16:9 well. */
.insight .thumb-dash{padding:0; overflow:hidden; position:relative}
.insight .thumb-dash img{position:absolute; inset:0; width:100%; height:100%;
  max-height:none; object-fit:cover; object-position:top center;
  transition:transform .5s ease}
.insight-link:hover .thumb-dash img{transform:scale(1.03)}

/* Subscribe block. One accent panel carries the whole offer, inset from the
   page so its edges read against the paper above and the footer below. */
.sub-cta{padding-block:0 clamp(2rem,3.5vw,3rem)}
.bh-deals:has(+ .sub-cta){padding-bottom:clamp(2rem,3.5vw,3rem)}
.sub-cta-panel{background:var(--crimson); color:#fff;
  padding:clamp(2rem,4.5vw,3.4rem) clamp(1.6rem,4vw,3.4rem);
  position:relative; overflow:hidden}
.sub-cta-amp{filter:brightness(0) invert(1); opacity:.13;
  height:min(270px, 118%); right:calc(var(--gutter) * .18)}
.sub-cta-panel > *:not(.sub-cta-amp){position:relative; z-index:1}
@media (max-width:860px){ .sub-cta-amp{height:170px; opacity:.1} }
.sub-cta-title{font-family:var(--serif); color:#fff; margin:0;
  font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.1}
.sub-cta-form{display:flex; align-items:stretch; flex-wrap:wrap; gap:1rem;
  margin-top:clamp(1.6rem,3vw,2.2rem)}
.sub-cta-field{flex:1 1 320px; min-width:0; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.55); padding:1rem 1.1rem;
  font-family:var(--sans); font-size:1rem; transition:border-color .18s ease}
.sub-cta-field::placeholder{color:rgba(255,255,255,.62)}
.sub-cta-field:focus{outline:none; border-color:#fff}
/* Reversing on hover, the same idiom the services accordion uses. */
.sub-cta-go{appearance:none; cursor:pointer; background:#fff; color:var(--crimson);
  border:1px solid #fff; padding:1rem 1.6rem; font-family:var(--sans);
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  transition:background-color .18s ease, color .18s ease}
.sub-cta-go:hover{background:transparent; color:#fff}
.sub-cta-go span{transition:transform .2s ease}
.sub-cta-go:hover span{transform:translateX(4px)}
.sub-cta-go:focus-visible{outline:2px solid #fff; outline-offset:3px}
.sub-cta-done{margin:1.2rem 0 0; color:#fff; font-weight:700}
@media (max-width:560px){ .sub-cta-go{width:100%; justify-content:center} }

/* The filter row sits on its own between the matrix and the tombstones, so it
   gets the same air above and below rather than the default section rhythm. */
.txn-filters-band{padding-top:clamp(2rem,3.4vw,3rem)}
.txn-filters-band .filters{margin-bottom:clamp(2rem,3.4vw,3rem)}

/* Cookie consent bar. Sits above everything, including the revealed footer and
   the Ask panel, because nothing should be able to obscure the choice. */
.th-consent{position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--ink); color:#fff;
  box-shadow:0 -8px 30px rgba(0,0,0,.22)}
.th-consent[hidden]{display:none}
.th-consent-inner{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:clamp(1rem,2.5vw,2rem);
  max-width:var(--wrapmax); margin-inline:auto;
  padding:clamp(1rem,2vw,1.3rem) var(--gutter)}
.th-consent-copy{margin:0; font-size:.88rem; line-height:1.5;
  color:rgba(255,255,255,.88); max-width:62ch}
.th-consent-copy a{color:#fff; text-underline-offset:3px}
.th-consent-actions{display:flex; align-items:center; gap:.7rem; flex:0 0 auto}
.th-consent-btn{appearance:none; cursor:pointer; font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.75rem 1.2rem; white-space:nowrap;
  background:#fff; color:var(--ink); border:1px solid #fff;
  transition:background-color .18s ease, color .18s ease}
.th-consent-btn:hover{background:transparent; color:#fff}
.th-consent-btn.ghost{background:transparent; color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.4)}
.th-consent-btn.ghost:hover{color:#fff; border-color:#fff}
.th-consent-btn:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:620px){
  .th-consent-actions{width:100%}
  .th-consent-btn{flex:1 1 auto; text-align:center}
}

/* Shown only when a send fails, so the reader never loses what they typed. */
.form-err{margin:1rem 0 0; color:var(--crimson); font-size:.9rem; font-weight:700}
.form-done{margin:1rem 0 0; font-weight:700; color:var(--ink)}

/* On a first visit the consent bar sits over the hero's scroll cue, so the cue
   steps up out of its way until the choice is made. */
body:has(.th-consent:not([hidden])) .hw-scroll{bottom:calc(2rem + 92px)}

/* The firm's own ampersand, wherever the name is set in body copy. Headings
   already resolve it through --serif's unicode-range face; this carries the
   same swash into Arial text without touching any other "&" on the page. */
.th-amp{font-family:'Garamond Book Italic','TH Ampersand','EB Garamond',Georgia,serif;
  font-style:italic; font-weight:400}

/* The timeline link sits under Learn more, ranged to the same left edge. */
.svc-item-actions{display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(.9rem,1.8vw,1.3rem); margin-top:1.1rem}
/* The timeline is a wide chart; let it use the panel's full width. */
#tlModal .dash-modal-panel{width:min(1320px,96vw)}
#tlModal img{width:100%; height:auto; display:block;
  padding:0 clamp(1rem,2vw,1.4rem)}

/* The email ask inside a lightbox, between the sticky header and the chart. */
.dl-gate{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.7rem;
  align-items:center; padding:0 clamp(1rem,2vw,1.4rem) 1rem}
.dl-gate[hidden]{display:none}
.dl-gate input{padding:.85rem 1rem; border:1px solid var(--hairline);
  font-family:var(--sans); font-size:.95rem; width:100%}
.dl-gate input:focus{outline:none; border-color:var(--crimson)}
.dl-gate button{white-space:nowrap}
.dl-gate-note{grid-column:1 / -1; margin:0; font-size:.76rem; color:var(--grey)}
@media (max-width:560px){
  .dl-gate{grid-template-columns:1fr}
  .dl-gate button{width:100%}
}

/* Subscribe lives in the footer now, so every page carries a standing call to
   action without a full-width band taking the real estate to say it. */
.footer-sub-form{display:flex; align-items:stretch; gap:.5rem; margin-top:.2rem}
.footer-sub-form input{flex:1 1 auto; min-width:0; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.45); padding:.6rem .7rem;
  font-family:var(--sans); font-size:.85rem; transition:border-color .18s ease}
.footer-sub-form input::placeholder{color:rgba(255,255,255,.6)}
.footer-sub-form input:focus{outline:none; border-color:#fff}
.footer-sub-go{flex:0 0 auto; cursor:pointer; background:#fff; color:var(--crimson);
  border:1px solid #fff; padding:.6rem .9rem; font-size:.95rem; line-height:1;
  transition:background-color .18s ease, color .18s ease}
.footer-sub-go:hover{background:transparent; color:#fff}
.footer-sub-go:focus-visible{outline:2px solid #fff; outline-offset:2px}
.footer-sub-done{margin:.6rem 0 0; font-size:.82rem; color:#fff}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-sub{grid-column:1 / -1}
}
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ---------- Publications: the three that lead ---------- */
.pub-recent{padding-block:clamp(2.2rem,4vw,3.2rem) 0}
.pub-recent .bh-sec-title{margin:0 0 clamp(1.4rem,2.6vw,2rem)}
.pub-hero-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2rem)}
.pub-hero-card{display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border:1px solid var(--hairline); background:#fff;
  transition:border-color .2s ease, transform .25s ease, box-shadow .25s ease}
.pub-hero-card:hover{border-color:var(--crimson); transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.08); text-decoration:none}
.pub-hero-thumb{background:var(--canvas); border-bottom:1px solid var(--hairline);
  aspect-ratio:16/9; overflow:hidden; position:relative}
.pub-hero-thumb img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center}
.pub-hero-body{padding:1.5rem 1.4rem; display:flex; flex-direction:column; flex:1}
.pub-hero-body .cat{font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--crimson); margin-bottom:.6rem}
.pub-hero-body h3{font-size:1.28rem; margin:0 0 .5rem}
.pub-hero-body .hook{font-size:.92rem; color:var(--graphite); flex:1; margin:0 0 1rem}
.pub-hero-body .more{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--crimson)}
#insight-grid[hidden]{display:none}
.pub-recent .pub-hero-card[data-dash-src]{cursor:zoom-in}
@media (max-width:900px){ .pub-hero-grid{grid-template-columns:1fr} }

/* ---------- Publications: refine, search, and the two columns ----------
   A select and a field rather than a row of chips: eight categories would
   not fit on a phone without becoming a side-scroller, and the reader who
   knows what they want types it. */
.pub-search{display:flex; gap:.7rem; align-items:stretch; flex-wrap:wrap;
  margin:0 0 .5rem}
.pub-refine, .pub-q{font-family:var(--sans); font-size:.92rem; color:var(--ink);
  background:#fff; border:1px solid var(--hairline); border-radius:2px;
  padding:.8rem .9rem; min-width:0}
.pub-refine{flex:0 0 15rem; text-transform:uppercase; letter-spacing:.06em;
  font-size:.78rem; font-weight:700; color:var(--graphite)}
.pub-q{flex:1 1 18rem}
.pub-refine:focus, .pub-q:focus{outline:2px solid var(--crimson); outline-offset:-2px}
.pub-go{flex:0 0 auto; border-radius:2px; cursor:pointer}
.pub-clear{margin:0 0 clamp(1.6rem,3vw,2.4rem); text-align:right; min-height:1.4rem}
.pub-clear-btn{appearance:none; background:transparent; border:0; padding:0;
  cursor:pointer; font-family:var(--sans); font-size:.84rem; color:var(--crimson);
  text-decoration:underline}
.pub-clear-btn[hidden]{display:none}

.pub-cols{display:grid; grid-template-columns:minmax(0,1fr) 19rem;
  gap:clamp(1.8rem,4vw,3.2rem); align-items:start}
.pub-col-title{font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);
  margin:0 0 1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--hairline)}
.pub-more-row{margin:clamp(1.8rem,3vw,2.6rem) 0 0; text-align:center}
.pub-more-row[hidden]{display:none}

/* The dashboards sit apart from the article cards as grey rows that turn the
   firm's red on hover, matching the quarterly reports above them (Nov 2026). */
.pub-dash-list{display:flex; flex-direction:column; gap:.5rem}
.pub-dash-btn{appearance:none; cursor:pointer; text-align:left; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  font-family:var(--sans); font-size:.92rem; font-weight:700; line-height:1.35;
  background:var(--canvas); color:var(--graphite); border:0;
  border-radius:2px; padding:.95rem 1rem;
  transition:background .18s ease, color .18s ease}
.pub-dash-btn span{transition:transform .2s ease}
.pub-dash-btn:hover{background:var(--crimson); color:#fff}
.pub-dash-btn:hover span{transform:translateX(3px)}
.pub-dash-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

@media (max-width:980px){
  .pub-cols{grid-template-columns:1fr}
  /* On one column the dashboards lead: they are six buttons, not thirty cards. */
  .pub-col-side{order:-1}
  .pub-dash-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pub-refine{flex:1 1 100%}
  .pub-go{flex:1 1 100%; text-align:center}
  .pub-dash-list{grid-template-columns:1fr}
}

/* ---------- Connect panel: the introduction ----------
   The panel the visitor opens from the ampersand is a quiet corner card. The
   one that introduces itself after they start reading has to be noticed, so
   it dims the page, grows, pops in and waits for its own close button rather
   than vanishing on the first stray click. */
.th-ask-panel{position:relative}
.th-ask-scrim{position:fixed; inset:0; z-index:-1; background:rgba(28,27,26,.46);
  opacity:0; transition:opacity .28s ease}
.th-ask-scrim[hidden]{display:none}
.th-ask.auto .th-ask-scrim{opacity:1}
.th-ask-x{position:absolute; top:.45rem; right:.5rem; width:34px; height:34px; border:0;
  border-radius:50%; background:transparent; color:var(--graphite); font-size:1.5rem;
  line-height:1; cursor:pointer; font-family:var(--sans)}
.th-ask-x:hover{color:var(--crimson); background:var(--canvas)}
.th-ask-x:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
.th-ask-kicker{display:none; font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); margin:0 0 .55rem;
  padding-right:2rem}
.th-ask.auto .th-ask-kicker{display:block}
.th-ask.auto .th-ask-panel{width:min(25rem,calc(100vw - 2rem)); padding:1.7rem 1.6rem 1.3rem;
  box-shadow:0 28px 70px rgba(0,0,0,.32); border-color:transparent;
  animation:askPop .6s cubic-bezier(.2,.8,.3,1.12) both}
.th-ask.auto .th-ask-title{font-size:1.75rem; line-height:1.15}
.th-ask.auto .th-ask-sub{font-size:.9rem}
.th-ask.auto .th-ask-btn{animation:askRing 1.5s ease-out 3}
@keyframes askPop{from{opacity:0; transform:translateY(22px) scale(.94)} to{opacity:1; transform:none}}
@keyframes askRing{0%{box-shadow:0 0 0 0 rgba(165,0,33,.6)} 100%{box-shadow:0 0 0 26px rgba(165,0,33,0)}}

/* Contextual offers. The icon peeks: a pill beside it carries the offer's
   headline, and a click opens the panel on the offer itself. */
.th-ask-peek{position:absolute; right:calc(58px + .7rem); bottom:9px; width:max-content; max-width:min(17rem, calc(100vw - 7rem));
  padding:.62rem 1rem; background:#fff; color:var(--ink); border:1px solid var(--hairline);
  border-left:3px solid var(--crimson); box-shadow:0 8px 24px rgba(0,0,0,.14); cursor:pointer;
  font-family:var(--sans); font-size:.84rem; font-weight:700; line-height:1.3; text-align:left;
  animation:askPeek .35s ease-out}
.th-ask-peek[hidden]{display:none}
.th-ask-peek:hover{border-color:var(--crimson); color:var(--crimson)}
.th-ask.peeking .th-ask-btn{animation:askRing 1.5s ease-out 2}
@keyframes askPeek{from{opacity:0; transform:translateX(10px)} to{opacity:1; transform:none}}
.th-ask-ctx-h{display:block; font-family:var(--serif); font-size:1.2rem; line-height:1.2; color:var(--ink);
  padding-right:1.6rem}
.th-ask-ctx-b{display:block; font-size:.84rem; color:var(--graphite); margin:.1rem 0 .35rem}
.th-ask-ctx textarea{padding:.6rem .7rem; border:1px solid var(--hairline); font-family:var(--sans);
  font-size:.92rem; width:100%; resize:vertical}
.th-ask-ctx textarea:focus{outline:2px solid var(--crimson); outline-offset:-2px}
.th-ask-ctx-alt{background:none; border:0; padding:.35rem 0 0; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--crimson)}
.th-ask-ctx-alt:hover{text-decoration:underline}
.th-ask-ctx .form-err{font-size:.8rem; margin:.2rem 0 0}
/* A narrowed panel still closes from its own corner. */
.th-ask-panel.offers-only > .th-ask-x{display:block}
/* Nothing in the corner competes with an open dashboard or timeline. */
body.dash-open .th-ask{visibility:hidden}
@media (max-width:640px){ .th-ask-peek{right:calc(50px + .6rem); bottom:5px} }
@media (prefers-reduced-motion:reduce){ .th-ask-peek, .th-ask.peeking .th-ask-btn{animation:none} }
@media (prefers-reduced-motion:reduce){
  .th-ask.auto .th-ask-panel,.th-ask.auto .th-ask-btn{animation:none}
}

/* ---------- Logo wall ----------
   Every mark from the tombstones, in two slow marquees that pause under the
   pointer. The marks were cut from white announcements, so they multiply
   onto the paper ground and the odd off-white edge disappears. */
.logo-wall{background:var(--paper); padding-block:clamp(2.6rem,5vw,3.8rem) clamp(1.2rem,2.5vw,2rem);
  overflow:hidden}
/* The rows sit inside .wrap, so the marquee runs between the same margins
   as the tombstone and article rails and fades out at those edges. */
.logo-wall .bh-sec-title{margin-bottom:.5rem}
.logo-wall-sub{font-size:.98rem; color:var(--graphite); margin:0 0 clamp(1.8rem,3.5vw,2.6rem); max-width:40rem}
.logo-row{position:relative; overflow:hidden; padding-block:.9rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-row + .logo-row{border-top:1px solid var(--hairline)}
.logo-track{display:flex; align-items:center; gap:clamp(2.2rem,4vw,3.6rem); width:max-content;
  animation:logoDrift 150s linear infinite}
.logo-row-rev .logo-track{animation-direction:reverse; animation-duration:170s}
.logo-row:hover .logo-track{animation-play-state:paused}
.logo-link{display:block; flex:0 0 auto; line-height:0}
.logo-track img{height:34px; width:auto; max-width:150px; object-fit:contain; flex:0 0 auto;
  mix-blend-mode:multiply; filter:grayscale(1); opacity:.72; transition:filter .25s ease, opacity .25s ease}
.logo-track img:hover{filter:none; opacity:1}
@keyframes logoDrift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:1.6rem 2.2rem}
  .logo-track .dup{display:none}   /* the duplicated half */
  .logo-row{mask-image:none; -webkit-mask-image:none}
}
@media (max-width:640px){ .logo-track img{height:26px; max-width:110px} }

/* ---------- Related transactions on a deal page ---------- */
.deal-rail-related{background:var(--canvas); padding-block:clamp(3rem,6vw,4.5rem)}
.deal-rail-related .rail{padding-bottom:.6rem}
.deal-rail-related .rail-foot{margin-top:1.6rem}

/* ---------- Publication cover and reproduced text ---------- */
.pub-cover-sec{padding-block:0 clamp(1.6rem,3vw,2.4rem)}
.pub-cover{margin:0}
.pub-cover img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--canvas)}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.8rem; font-size:1.05rem; font-family:var(--sans); font-weight:700;
  letter-spacing:.02em; color:var(--ink)}
.prose ul{padding-left:1.2rem; margin:0 0 1.2rem}
.prose li{margin-bottom:.45rem}
.pub-source{margin-top:2.4rem; padding-top:1rem; border-top:1px solid var(--hairline);
  font-size:.82rem; color:var(--graphite)}

/* ---------- Phone menu ----------
   Under 1100px (760px until About Us made seven tabs) the nav folds behind a
   toggle instead of wrapping into two rows. */
.nav-toggle{display:none}
@media (max-width:1100px){
  /* The tablet rule above stacks the ribbon; on a phone it is one row again:
     wordmark left, toggle right. */
  .header-inner{flex-direction:row; align-items:center; flex-wrap:nowrap; gap:1rem;
    padding:10px var(--gutter)}
  .nav-toggle{display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; border:0; background:transparent; padding:9px; cursor:pointer;
    margin-left:auto; border-radius:4px}
  .nav-toggle:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
  .nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .2s ease, opacity .2s ease}
  .site-header.clear:not(.solid):not(.nav-open) .nav-toggle span{background:#fff}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper);
    border-bottom:1px solid var(--hairline); flex-direction:column; align-items:stretch; gap:0;
    padding:.2rem var(--gutter) 1rem; box-shadow:0 18px 40px rgba(0,0,0,.12)}
  .site-header.nav-open .nav{display:flex}
  .site-header.nav-open .nav a{font-size:.95rem; letter-spacing:.08em; padding:.9rem 0;
    border-top:1px solid var(--hairline); color:var(--ink)}
  /* One rule between every top-level item; only the first has none, and a
     nested link (Careers under Team) sits tucked under its parent. */
  .site-header.nav-open .nav > a:first-child, .site-header.nav-open .nav .nav-drop a{border-top:0}
  .site-header.nav-open .nav a.active{color:var(--crimson)}
  .site-header.nav-open .nav-cta{margin-top:.8rem; text-align:center; border-top:0;
    background:var(--crimson); color:#fff; padding:.85rem 1rem}
  .site-header.nav-open .nav-li{justify-content:flex-start; padding:.9rem 0; width:auto; height:auto}
  .site-header.nav-open{background:var(--paper); border-bottom-color:var(--hairline)}
  .site-header.clear.nav-open .logo img{filter:none}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Phones: nothing cut off ----------
   On a phone a carousel shows one whole card per swipe. The desktop sliver of
   the next card read as chopped words at this width. The arrows above each
   rail still step through, and swiping snaps card to card. */
@media (max-width:640px){
  .rail-card, .ins-card{flex:0 0 100%}
  .rail, .ins-rail{gap:1rem}
  /* The chips wrap onto a second row instead of running off the right edge. */
  .filters{flex-wrap:wrap; overflow-x:visible; justify-content:flex-start; gap:.45rem}
  .filter{font-size:.66rem; padding:.5rem .6rem}
  /* One floating button is enough on a phone: the ampersand. iOS scrolls to
     the top from a tap on the status bar, so the back-to-top arrow only covered
     text. The footer keeps clear of the ampersand at the very bottom. */
  .bh-top{display:none !important}
  .site-footer{padding-bottom:calc(2.2rem + 64px)}
}

@media (max-width:640px){
  .rail-auto{scroll-snap-type:x mandatory}
}
/* Stacked under the photo, the sector panel has nothing behind it to blur, and
   a backdrop-filter there repaints over the fixed header while scrolling. */
@media (max-width:860px){
  .sect-detail{-webkit-backdrop-filter:none; backdrop-filter:none}
}

/* ---------- Phones, round two ----------
   Tombstones: two compact columns, twelve at a time (the script adds the rest). */
.deal-more-row{text-align:center; margin:1.6rem 0 0}
@media (max-width:640px){
  .deal-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem}
  .deal-grid .deal-card{padding:0; min-height:0; border:0}
  .deal-grid .deal-card:hover{transform:none; box-shadow:none}
  .deal-grid .tomb-card .tomb-body{padding:.75rem .5rem; gap:.4rem}
  .deal-grid .tomb-mark-slot, .deal-grid .tomb-mark-slot.buyer{height:38px}
  .deal-grid .tomb-name{font-size:.86rem}
  .deal-grid .tomb-verb{font-size:.6rem; letter-spacing:.03em}
  .deal-grid .tomb-foot{padding:.45rem .35rem; gap:.2rem}
  .deal-grid .tomb-role{font-size:.5rem}
}
/* iOS Safari zooms the page into any field set under 16px. */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select, textarea{font-size:16px !important}
}
/* Hero: on a phone the still frame shows at once, under the same crop as the
   film, instead of a dark box while the video buffers. */
@media (max-width:640px){ .hw-video{opacity:1} }

/* Chart lightbox */
.prose .figure img{cursor:zoom-in}
.fig-zoom{position:fixed; inset:0; z-index:90; background:#fff; display:flex; flex-direction:column}
.fig-zoom[hidden]{display:none}
.fig-zoom-scroll{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; display:flex;
  align-items:center; padding:3.6rem 1rem 1rem}
.fig-zoom-scroll img{width:720px; max-width:none; height:auto; margin:auto; display:block; flex:0 0 auto}
@media (min-width:760px){ .fig-zoom-scroll img{width:min(1100px, 92vw)} }
.fig-zoom-x{position:absolute; top:.6rem; right:.7rem; width:44px; height:44px; border:0;
  background:var(--canvas); border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer;
  color:var(--ink); font-family:var(--sans); z-index:1}
.fig-zoom-x:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
.fig-zoom-hint{margin:0; padding:.6rem 1rem 1.2rem; text-align:center; font-size:.8rem; color:var(--graphite)}
@media (orientation:landscape){ .fig-zoom-hint{display:none} }
body.fig-open{overflow:hidden}
@media (max-width:640px){
  .prose .figure figcaption::after{content:" Tap to enlarge."; color:var(--crimson); font-weight:700}
}

/* Contact: a very faint Back Bay photograph behind the heading, the form and
   the address, as one image rather than two bands. */
.contact-bg{position:relative; isolation:isolate}
.contact-bg::before{content:""; position:absolute; inset:0; z-index:-1;
  background:var(--contact-bg, none) center 60% / cover no-repeat; opacity:.12; pointer-events:none}

/* The ampersand sits inside the quote grid, so it centres on the quotes
   themselves (four of them now) rather than on the band with its heading. */
.quotes-spread{position:relative}
.quotes-spread > .quotes-amp{z-index:0}
.quotes-spread > .quote-lead{position:relative; z-index:1}

/* Legal notices: the three disclosures, set for reading. */
/* No eyebrow, a short gap under the title, and a wider column than the
   reading measure so the disclosures run as continuous text. */
.legal-sec{padding-top:clamp(1.2rem,2.5vw,2rem)}
.legal-prose p, .legal-prose ul, .legal-prose h2, .legal-prose h3{max-width:860px}
.legal-prose h2{font-size:clamp(1.35rem,2.2vw,1.8rem); margin:2.6rem 0 .8rem; color:var(--crimson)}
.legal-prose h2:first-child{margin-top:0}
.legal-prose h3{font-size:1.08rem; font-family:var(--sans); font-weight:700; margin:1.6rem 0 .5rem}
.legal-prose ul{padding-left:1.3rem; margin:0 0 1.1em}
.legal-prose li{margin:0 0 .45em}
.legal-prose .legal-foot{margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--hairline); font-size:.9rem; color:var(--graphite)}

/* ---------- Industries: ribbon drop-down ----------
   The six sectors hang from the Industries entry on a desktop. Under 1100px
   the ribbon folds behind the toggle and the hub page lists them instead. */
.nav-group{position:relative; display:inline-flex; align-items:center}
/* A hover bridge, so the pointer can cross the gap to the list. */
.nav-group::after{content:""; position:absolute; left:0; right:0; top:100%; height:.7rem}
.nav-drop{display:none; position:absolute; top:calc(100% + .6rem); left:-1rem; z-index:60;
  flex-direction:column; min-width:17.5rem; background:var(--paper);
  border:1px solid var(--hairline);
  box-shadow:0 14px 34px rgba(0,0,0,.12); padding:.45rem 0}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop{display:flex}
.nav .nav-drop a{padding:.55rem 1rem; font-size:.72rem; letter-spacing:.07em;
  color:var(--ink) !important; opacity:1 !important}
.nav .nav-drop a:hover, .nav .nav-drop a.active{color:var(--crimson) !important; background:var(--canvas)}
.nav .nav-drop a:last-child[href$="industries.html"]{border-top:1px solid var(--hairline); margin-top:.35rem; padding-top:.75rem}
/* A ribbon link to a section lands under the sticky ribbon without this. */
.svc-row, .faq-anchor, .pub-recent, .pub-col-main, .pub-col-side{scroll-margin-top:110px}
@media (max-width:1100px){
  .nav-drop{display:none !important}
  .nav-group{display:contents}
  /* The phone menu keeps Careers under Team (the bankers are on the Team page itself). */
  .nav-group-team .nav-drop{display:flex !important; position:static; flex-direction:column;
    min-width:0; border:0; box-shadow:none; padding:0; background:none}
  .nav-group-team .nav-drop a[href^="team-"]{display:none}
}

/* ---------- Industry landing pages ---------- */
/* The sector photograph in the film hero's frame, shorter than the footage
   bands because a still needs less room than a moving picture. */
.ind-hero{min-height:clamp(250px, 40vw, 500px); max-height:62vh}
.ind-hero .film-hero-scrim{background:linear-gradient(180deg, rgba(16,15,15,.52) 0%, rgba(16,15,15,.40) 45%, rgba(16,15,15,.70) 100%)}
/* Lighter scrims so more of the footage shows through, still dark enough
   behind the white title and button: Services a little, Transactions and
   Team more. */
.svc-hero .svc-hero-scrim{background:linear-gradient(180deg, rgba(16,15,15,.36) 0%, rgba(16,15,15,.26) 45%, rgba(16,15,15,.50) 100%)}
.txn-hero:not(.film-hero) > .txn-hero-scrim, .team-film .film-hero-scrim{background:linear-gradient(180deg, rgba(16,15,15,.28) 0%, rgba(16,15,15,.18) 45%, rgba(16,15,15,.40) 100%)}
/* The forced line breaks in the two-line titles only suit wider screens;
   on a phone the title wraps on its own. */
@media (max-width:640px){ .h1-two br, .pub-hero-inner h1 br{display:none} }
/* The lighter Team and Transactions films can turn bright (white office
   windows), so the white title and button carry a soft shadow of their own. */
.team-film .film-hero-inner h1, .txn-hero:not(.film-hero) .txn-hero-inner h1{text-shadow:0 2px 14px rgba(16,15,15,.55), 0 1px 3px rgba(16,15,15,.45)}
.team-film .btn-ghost, .txn-hero:not(.film-hero) .btn-ghost{text-shadow:0 1px 6px rgba(16,15,15,.5); box-shadow:0 0 18px rgba(16,15,15,.18)}
.ind-hero .film-hero-inner h1{max-width:26ch}
/* Transactions headline: two lines, broken after "leads", not three. */
.txn-hero-inner h1.h1-two{max-width:none}
/* Publications: the Zakim Bridge photograph behind the title, in white, under
   the same dark scrim as the film heroes. Shorter than the 16:9 film bands,
   since it is a still and the page's content should start sooner. */
.pub-hero{position:relative; overflow:hidden; background:var(--ink); display:flex; align-items:center;
  min-height:clamp(300px, 38vw, 560px)}
.pub-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%}
.pub-hero .txn-hero-inner{padding-top:clamp(5rem,8vw,6.5rem)}
.pub-hero-inner h1{max-width:none}
.ind-hero .eyebrow{color:#fff; opacity:.85; margin-bottom:1rem}
.ind-hero .ind-lede{color:rgba(255,255,255,.9); max-width:64ch; margin:1.1rem auto 0; font-size:clamp(1rem,1.6vw,1.15rem)}
.ind-hero .btn-row{justify-content:center; margin-top:1.8rem}

.ind-cols{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start}
.ind-cols .prose p{max-width:none}
.ind-side{border-left:1px solid var(--hairline); padding-left:clamp(1.4rem,3vw,2.4rem)}
.ind-side h2{font-size:1.25rem; margin:0 0 1rem}
.ind-side h2 + p{font-size:.92rem; color:var(--graphite)}
.ind-subs{list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem}
.ind-subs li{font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--graphite);
  border:1px solid var(--hairline); border-radius:2px; padding:.42rem .7rem; background:#fff}
.ind-looks{list-style:none; margin:0; padding:0}
.ind-looks li{padding:.7rem 0; border-top:1px solid var(--hairline); font-size:.95rem; color:var(--ink); line-height:1.45}
.ind-looks li:last-child{border-bottom:1px solid var(--hairline)}
.ind-services{margin-top:2rem; font-size:.92rem; color:var(--graphite)}
.ind-services a{color:var(--crimson)}

/* The sector's dashboard, shown small beside its description and opened full
   size in the same lightbox the Transactions page uses. */
.ind-dash{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center}
.ind-dash h2{margin-bottom:.8rem}
.ind-dash-shot{appearance:none; display:block; width:100%; border:1px solid var(--hairline);
  background:#fff; padding:0; cursor:zoom-in; text-align:left;
  transition:border-color .18s ease, box-shadow .2s ease, transform .2s ease}
.ind-dash-shot:hover{border-color:var(--crimson); box-shadow:0 8px 26px rgba(0,0,0,.08); transform:translateY(-3px)}
.ind-dash-shot:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
.ind-dash-shot img{display:block; width:100%; height:auto}
.ind-dash-cap{font-size:.76rem; color:var(--grey); margin:.6rem 0 0}
.ind-dash-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.2rem}
.ind-dash-more{display:block; margin-top:1.1rem; font-size:.86rem}

.ind-deals-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.8rem}
.ind-deals-head h2{margin:0}
.ind-deals-head .bh-link{margin:0}
.ind-count{font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--graphite)}

/* Hub: one tile per sector */
.ind-hub-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem}
.ind-hub-grid .tile .tile-img img{filter:none}
.ind-hub-grid .tile h3{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem}
.ind-hub-grid .tile h3 small{font-family:var(--sans); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); font-weight:400; white-space:nowrap}
.ind-hub-grid .tile p{font-size:.86rem}

@media (max-width:900px){ .ind-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .ind-cols, .ind-dash{grid-template-columns:1fr}
  .ind-side{border-left:0; padding-left:0; border-top:1px solid var(--hairline); padding-top:1.6rem}
}
@media (max-width:640px){ .ind-hub-grid{grid-template-columns:1fr} }

/* The third panel action is a link to the sector's own page, set like the
   two buttons above it. */
.sect-link{font-family:inherit; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--crimson); display:inline-flex; align-items:center; gap:.5rem; text-decoration:none}
.sect-link:hover{gap:.8rem; text-decoration:none}
.sect-link span{transition:transform .2s ease}
.sect-link:hover span{transform:translateX(3px)}
.sect-link:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}

/* The sector page's questions sit in a white card on the canvas band. */
.faq-card{background:#fff; border:1px solid var(--hairline);
  padding:clamp(1.4rem,3vw,2.6rem) clamp(1.4rem,3.5vw,3rem)}
.faq-card .faq-title{margin-bottom:clamp(1rem,2vw,1.4rem)}
.faq-card .faq{margin-top:0}

/* About us: the firm's film, full content width at 16:9. */
.about-video-sec{padding-top:clamp(1.6rem,3vw,2.4rem); padding-bottom:0}
.about-video{position:relative; aspect-ratio:16/9; background:var(--ink);
  border:1px solid var(--hairline); overflow:hidden}
.about-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}

/* Industry pages: one even rhythm between bands. The site-wide section
   padding plus the carousel's own top padding stacked to well over 150px
   of white between the intro and the transactions, and again between the
   research rail and the questions. */
.ind-intro{padding-bottom:clamp(1rem,2vw,1.6rem)}
.ind-deals.deal-rail{padding-top:clamp(1.6rem,3vw,2.4rem); padding-bottom:clamp(2.6rem,4.5vw,3.6rem)}
.ind-deals .bh-sec-title{margin-bottom:1.6rem}
.ind-dash-sec{padding-block:clamp(2.6rem,4.5vw,3.6rem)}
.bh-deals.ind-ins{padding-block:clamp(2.6rem,4.5vw,3.6rem) clamp(1rem,2vw,1.6rem)}
.ind-ins .bh-sec-title{margin-bottom:1.6rem}
.ind-faq{padding-top:clamp(1.6rem,3vw,2.4rem); padding-bottom:clamp(2.6rem,4.5vw,3.6rem)}


/* Page not found */
.nf-links{padding-top:clamp(1.6rem,3vw,2.4rem)}
.nf-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,4vw,3.5rem);
  margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--hairline)}
.nf-cols h2{font-size:1.4rem; margin-bottom:.9rem}
.nf-list{list-style:none; margin:0; padding:0}
.nf-list li{padding:.55rem 0; border-bottom:1px solid var(--hairline)}
.nf-list a{color:var(--ink); text-decoration:none}
.nf-list a:hover{color:var(--crimson)}
.nf-reach a{color:var(--crimson)}
@media (max-width:760px){ .nf-cols{grid-template-columns:1fr} }

/* Phones: the arrow links and text buttons get a full 44px touch target
   (Apple's minimum) without changing how they look. */
@media (max-width:760px){
  .bh-link, .pres-link, .sect-more, .sect-link{min-height:44px; align-items:center}
  .pres-link{display:inline-flex}
  .sect-dash-btn, .svc-tl-btn{display:inline-block; padding-block:.8rem}
  .sect-actions{gap:0}
  .ind-subs li{font-size:.8rem}
}
/* A link-only ampersand offer (About us): two full-width buttons. */
.th-ask-ctx-links{display:flex; flex-direction:column; gap:.5rem; margin-top:.35rem}
.th-ask-ctx-links .btn{display:block; width:100%; text-align:center; box-sizing:border-box}
/* Industries hub: the Areas of Focus matrix (moved from Transactions, Nov 2026).
   Its first action is a link to the sector page, styled like the old button. */
a.sect-more{text-decoration:none; color:var(--crimson); white-space:nowrap}
/* The page title sits in the matrix, in black. The hub's matrix is drawn
   tighter than the Transactions one was, so on a desktop screen the whole
   page, footer included, fits in view. Sector names are links here. */
.ind-hub-matrix .sect-matrix{min-height:380px}
.ind-hub-matrix .sect-intro{padding:1.5rem clamp(1.2rem,2.5vw,2.2rem) 1.5rem 0}
.ind-hub-matrix .sect-intro h1{color:var(--ink); font-size:clamp(2rem,2.8vw,2.6rem); margin:0 0 1.6rem; line-height:1.05}
.ind-hub-matrix .sect-intro p{font-size:.9rem; margin:0 0 .8rem}
.ind-hub-matrix .sect-tab{padding:.4rem 1rem; font-size:.95rem; text-decoration:none}
.ind-hub-matrix .sect-detail{padding-block:1.4rem}
.ind-hub-matrix .sect-panel ul{gap:.42rem; margin:0 0 1rem}
.ind-hub-matrix .sect-panel li{font-size:.92rem}
.ind-hub-matrix .sect-actions{gap:.5rem}
/* Careers, on its own page since Nov 2026: the form sits under the heading. */
.careers-sec{padding-top:clamp(1.4rem,2.5vw,2rem)}
.careers-form{max-width:640px}
/* All three links under the subverticals in crimson (the dashboard one was grey). */
.ind-hub-matrix .sect-dash-btn{color:var(--crimson)}
.ind-hub-matrix .sect-dash-btn:hover{color:var(--crimson-dark)}
/* Who We Are: consecutive paragraphs read as one passage (ordinary paragraph
   spacing between them, the block's larger gap only after the last). */
.about-intro:has(+ .about-intro){margin-bottom:1.1rem}
/* About Us: Who We Are sits close under the film and close above the team. */
.about-who{padding-top:clamp(2.8rem,5vw,4.4rem); padding-bottom:0}
.about-who .bh-sec-title{margin-bottom:1.2rem}
.about-who .about-intro:last-child{margin-bottom:0}
/* About Us: the firm's film, between the experience logos and the insights. */
.about-yt{padding-bottom:0}
/* Team drop-down: the bankers, then Careers set off below a rule, as Industries' last link is. */
@media (min-width:1101px){ .nav .nav-drop a:last-child[href="careers.html"]{border-top:1px solid var(--hairline); margin-top:.35rem; padding-top:.75rem} }
/* About Us spacing: What sets us apart and the experience band sit close to
   their neighbours, and every red heading on the page shares .bh-sec-title. */
/* One gap between every About Us section: each section carries the space
   above itself and none below, so the gaps are all equal. */
.about-apart{padding-top:clamp(2.8rem,5vw,4.4rem); padding-bottom:0}
.about-apart .bh-sec-title{margin-bottom:1.6rem}
.about-exp{padding-top:clamp(2.8rem,5vw,4.4rem); padding-bottom:0; text-align:left}
.about-exp + .bh-deals, .about-yt + .bh-deals{padding-top:clamp(2.8rem,5vw,4.4rem)}
/* The YouTube film below the logos: the same gap above and below it as
   between the other sections. */
.about-yt{padding-top:clamp(2.8rem,5vw,4.4rem)}
/* Square logos (Nabisco, P&G, Winona) are taller than a logo row; let their
   row grow so they do not spill into the gap below. */
.exp-grid li:has(> img.sq){height:auto}
.about-exp h2.bh-sec-title{margin:0 0 1.2rem}
.about-exp .lede{margin:0 0 clamp(2rem,3.5vw,2.8rem); max-width:none}
/* The heading and paragraph range left; the logos stay centred beneath. */

/* Publications: the newest consumer and healthcare quarterlies sit above the
   dashboards as quiet grey rows that turn the firm's red on hover. */
.pub-qtr-list{display:flex; flex-direction:column; gap:.5rem}
.pub-qtr{display:flex; align-items:baseline; gap:.65rem; text-decoration:none;
  background:var(--canvas); color:var(--graphite); border-radius:2px;
  padding:.95rem 1rem; font-family:var(--sans); font-size:.92rem; line-height:1.35;
  transition:background .18s ease, color .18s ease}
.pub-qtr-q{flex:none; font-weight:700; padding-right:.65rem; border-right:1px solid currentColor}
.pub-qtr:hover, .pub-qtr:focus-visible{background:var(--crimson); color:#fff}
.pub-qtr:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.pub-col-title-next{margin-top:clamp(1.8rem,3vw,2.4rem)}
@media (max-width:980px){
  .pub-qtr-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pub-qtr-list{grid-template-columns:1fr}
}

/* Phone and tablet QA (Nov 2026). In the phone menu, Careers nests under
   Team behind a small red arrow. */
@media (max-width:1100px){
  .site-header.nav-open .nav .nav-group-team .nav-drop a{position:relative; padding-left:1.4rem;
    font-size:.82rem; letter-spacing:.07em}
  .site-header.nav-open .nav .nav-group-team .nav-drop a::before{content:"\203A"; position:absolute;
    left:.3rem; top:50%; transform:translateY(-54%); color:var(--crimson); font-size:1rem; line-height:1}
}
/* On a phone the hero's two stacked buttons reach the scroll cue, so the cue
   steps aside; the page plainly continues below the fold. */
@media (max-width:640px){ .hw-scroll{display:none} }

/* Team page (Nov 2026): the grid sits under the film, so it needs a full
   section's room above it, and a light grey band, with the red ampersand behind it, sends readers on to Careers. */
.team-grid-page{padding-top:clamp(2.6rem,5vw,4rem); padding-bottom:clamp(3rem,6vw,4.6rem)}
.team-grid-page .bh-sec-title{margin-bottom:1.6rem}
.join-band{position:relative; overflow:hidden; background:var(--canvas); text-align:center;
  padding-block:clamp(3.6rem,7vw,5.8rem)}
.join-band .join-amp{height:min(340px, 92%); opacity:.08}
.join-band-inner{position:relative; z-index:1}
.join-band h2{color:var(--crimson); font-size:clamp(2rem,4.2vw,3.1rem); margin:0 0 1rem}
.join-band p{max-width:54ch; margin:0 auto 2rem; color:var(--graphite); font-size:clamp(1rem,1.6vw,1.15rem)}
@media (max-width:860px){ .join-band .join-amp{height:200px; opacity:.06} }
/* Careers: the firm's red ampersand fills the empty right side, behind the heading and form. */
/* About Us: one large red ampersand behind Who we are and What sets us apart. */
.about-top{position:relative; overflow:hidden}
.about-top > section{position:relative; z-index:1}
.about-top .tile{background:transparent}  /* let the ampersand show through the tiles */
.about-top .about-amp{z-index:0; height:min(620px, 88%); opacity:.07; right:calc(var(--gutter) * .6)}
@media (max-width:860px){ .about-top .about-amp{height:260px; opacity:.05; top:2rem; transform:none; right:1rem} }
.careers-page{position:relative; overflow:hidden; padding-bottom:clamp(1rem,2vw,2rem)}
.careers-page .careers-amp{height:min(460px, 78%); opacity:.08; right:calc(var(--gutter) * .9)}
@media (max-width:860px){ .careers-page .careers-amp{height:200px; opacity:.06; top:7rem; transform:none; right:1rem} }
/* Contact, desktop: like the Industries hub, the whole page, footer included,
   fits in one screen. The dead space above and below the form is trimmed, the
   reason chips sit beside their question, and the four details share a row. */
@media (min-width:980px){
  .pagehead-contact.pagehead-tight{padding-top:clamp(1.4rem,2.2vw,2rem)}
  .pagehead-contact h1{margin-bottom:0}
  .contact-sec{padding-block:clamp(1rem,1.8vw,1.4rem) clamp(1.4rem,2.4vw,2rem)}
  .contact-card{max-width:900px}
  .contact-card .cf-grid{grid-template-columns:1fr 1fr; gap:.75rem}
  .contact-card .cf-chips, .contact-card textarea.f, .contact-card .cf-grid > div:last-child{grid-column:1 / -1}
  .contact-card .cf-chips{margin:0; align-items:center}
  .contact-card .cf-chips legend{float:left; margin:0 .9rem 0 0; line-height:2.4}
  .contact-card textarea.f{min-height:0; height:3.4rem}
}
/* Contact, desktop: the chips run the full width of the fields, every gap
   between fields is the same, and the heading and form sit in the middle of
   the photograph when it is stretched to meet the footer. */
@media (min-width:980px){
  .contact-bg{display:flex; flex-direction:column; justify-content:center}
  .contact-card .cf-pair{gap:.75rem}
  .contact-card .cf-chips label{flex:1 1 auto}
  .contact-card .cf-chips span{display:block; text-align:center}
}

/* Carousels: Windows draws a solid scrollbar under a scrolling strip, which
   sat against the card titles on Windows laptops (a Mac hides it). Every rail
   already has arrow buttons and scrolls by trackpad, touch and keyboard, so
   the bar is hidden everywhere. */
.rail, .ins-rail{scrollbar-width:none}
.rail::-webkit-scrollbar, .ins-rail::-webkit-scrollbar{display:none}