/* The Parliament Group site. The firm's own identity: white pages, slate
   text, its red for accents, Archivo Narrow headings over Lato. Navy is kept
   for the one dark feature band. */
:root {
  --slate: #192930; --text: #26343b; --muted: #5b6b72; --line: #e3e0da;
  --paper: #ffffff; --warm: #f4f2ee; --stone: #a5a29d;
  --red: #e63228; --red-dark: #c4271f;
  --navy: #0f1e35; --navy-2: #1a2e4a; --periwinkle: #6b8fc4;
  --head: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --body: 'Lato', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: var(--red-dark); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--slate); line-height: 1.12; margin: 0; font-weight: 700; letter-spacing: -.2px; }
h1 { font-size: clamp(40px, 5.4vw, 62px); }
h2 { font-size: clamp(30px, 3.4vw, 40px); }
h3 { font-size: 23px; }
.eyebrow { font-family: var(--head); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); font-weight: 600; }
.lede { font-size: 20px; color: var(--muted); max-width: 720px; }
.btn { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 17px; letter-spacing: .4px; text-decoration: none; padding: 12px 24px; border-radius: 3px; transition: background .15s, color .15s; }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover, .btn.red:focus-visible { background: var(--red-dark); }
.btn.line { border: 2px solid var(--slate); color: var(--slate); padding: 10px 22px; }
.btn.line:hover, .btn.line:focus-visible { background: var(--slate); color: #fff; }

/* header */
.top { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 10; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 20px; }
.top .logo img { height: 58px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 26px; font-family: var(--head); font-size: 16px; font-weight: 600; letter-spacing: .3px; }
.nav a { color: var(--slate); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--red); }
.nav a { white-space: nowrap; }
.nav .btn { color: #fff; padding: 9px 18px; }
.menu-btn { display: none; background: none; border: 0; font: 600 16px var(--head); color: var(--slate); cursor: pointer; }

/* photo hero: an old-site photograph under a dark wash, white type on top */
.hero.photo { position: relative; color: #fff; background: var(--slate) var(--img) center / cover no-repeat; padding: 120px 0 128px; }
.hero.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,30,36,.86) 0%, rgba(20,30,36,.62) 55%, rgba(20,30,36,.35) 100%); }
.hero.photo .wrap { position: relative; }
.hero.photo h1, .hero.photo .lede { color: #fff; }
.hero.photo .lede { color: #e4e9eb; }
.hero.photo .eyebrow { color: #ff8a80; }
.hero.photo .btn.line { border-color: #fff; color: #fff; }
.hero.photo .btn.line:hover { background: #fff; color: var(--slate); }
/* sections */
.band { padding: 96px 0; }
.band.warm { background: var(--warm); }
.hero { padding: 88px 0 96px; }
.hero h1 { max-width: 880px; margin: 16px 0 22px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 28px 26px; }
.card h3 { margin: 10px 0 10px; }
.card p { margin: 0; color: var(--muted); }
.card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
/* Service cards (What We Offer): the owl sits beside its heading, and the
   heading wraps next to it at any width. The row holds two lines of heading
   in every card, so the text below starts level across the three (Rick,
   2026-09-24). */
.card.service { padding: 22px 22px 24px; }
.card-head { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-bottom: 10px; }
.card-head img { width: 44px; height: 44px; flex: 0 0 44px; }
.card .card-head h3 { margin: 0; }
.num { font-family: var(--head); color: var(--red); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { margin: 10px 0 14px; }

/* The dark feature band, in its own colors */
.arch { background: var(--navy); color: #dfe8f3; }
.arch .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.arch h2 { color: #fff; font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; letter-spacing: 0; }
.arch .eyebrow { color: var(--periwinkle); }
.arch p { color: #b8c8dc; }
.arch .btn.red { margin-top: 10px; }
.arch .owl { justify-self: center; width: min(300px, 70%); }

/* who we work with */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 8px 16px; font-size: 15px; }

/* quote */
.quote { max-width: 860px; }
.quote blockquote { margin: 0; font-family: var(--head); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; color: var(--slate); font-weight: 500; }
.quote blockquote::before { content: "“"; color: var(--red); font-size: 1.6em; line-height: 0; vertical-align: -.35em; margin-right: 4px; }
.quote .who { margin-top: 18px; color: var(--muted); font-size: 15px; }
.quote .who b { color: var(--slate); }

/* quotes carousel (Who We Are): the slides share one cell and fade; the tallest
   sets the height, so the page does not jump as they change. */
.quotes { max-width: 860px; margin-top: 18px; }
.quotes-track { display: grid; }
.quotes .slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.quotes .slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.quotes .slide blockquote { font-size: clamp(19px, 1.9vw, 23px); }
.quotes-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.qbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--slate); font-size: 22px; line-height: 1; cursor: pointer; }
.qbtn:hover { border-color: var(--red); color: var(--red); }
.dots { display: flex; gap: 8px; }
.dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.dots button[aria-selected="true"] { background: var(--red); }
@media (prefers-reduced-motion: reduce) { .quotes .slide, .quotes .slide.is-active { transition: none; } }

/* insights */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post-card { display: block; text-decoration: none; color: inherit; border-top: 3px solid var(--red); padding-top: 18px; }
.post-card .date { font-size: 14px; color: var(--stone); }
.post-card h3 { font-size: 22px; margin: 6px 0 10px; }
.post-card:hover h3 { color: var(--red-dark); }
.post-card p { color: var(--muted); margin: 0; font-size: 16px; }
/* Insights listing: the date in a left column, the title and the excerpt
   stacked beside it. The excerpt had wrapped into the date column (Rick,
   2026-10-06). */
.post-list .post-card { border-top: 1px solid var(--line); padding: 24px 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 20px; }
.post-list .post-card .date { grid-column: 1; grid-row: 1 / span 2; padding-top: 4px; }
.post-list .post-card h3, .post-list .post-card p { grid-column: 2; }
.post-list .post-card h3 { margin: 0 0 6px; }
@media (max-width: 640px) {
  .post-list .post-card { grid-template-columns: minmax(0, 1fr); }
  .post-list .post-card .date, .post-list .post-card h3, .post-list .post-card p { grid-column: 1; grid-row: auto; }
}

/* article */
.article { max-width: 760px; margin: 0 auto; padding: 72px 32px 96px; }
.article h1 { font-size: clamp(34px, 4.4vw, 48px); margin: 12px 0 14px; }
.article .meta { color: var(--stone); font-size: 15px; margin-bottom: 36px; }
.article .body p, .article .body li { font-size: 18px; }
.article .body h2 { font-size: 28px; margin: 36px 0 12px; }
.article .body h3 { margin: 28px 0 10px; }
.article .body img { display: block; margin: 24px auto; border-radius: 3px; }
.article .body blockquote { border-left: 3px solid var(--red); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--slate); }

/* contact band + footer */
.contact-band .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.contact-band .actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-band .mail { font-family: var(--head); font-size: 20px; font-weight: 600; color: var(--slate); text-decoration: none; border-bottom: 2px solid var(--red); }
.foot { background: var(--slate); color: #c7d0d3; padding: 44px 0 36px; font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot a { color: #fff; text-decoration: none; }
.foot .cols { display: flex; gap: 44px; flex-wrap: wrap; }
.foot h4 { color: #fff; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 8px; }

/* clients: a slow, looping carousel that pauses on hover */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.marquee-set img { flex: none; width: 150px; height: 60px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.marquee-set img:hover { filter: none; opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee-set { flex-wrap: wrap; gap: 20px 40px; padding: 0; }
  .marquee-set[aria-hidden="true"] { display: none; }
}
/* static grid (unused while the carousel is on) */
.logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 22px 28px; align-items: center; }
@media (max-width: 1100px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Each logo gets the same box and is scaled to fit it, so a wide wordmark and a round badge carry similar weight. */
.logos img { width: 100%; height: 60px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.logos img:hover { filter: none; opacity: 1; }
.logos-label { font-family: var(--head); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 18px; }

/* case studies */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.case { border-top: 1px solid var(--line); padding: 22px 0 26px; }
.case h3 { font-size: 21px; margin-bottom: 8px; }
.case p { margin: 0; color: var(--muted); }

/* people */
.people { display: grid; grid-template-columns: 1fr; gap: 0; }
.person { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; border-top: 1px solid var(--line); padding: 34px 0; }
.person h3 { font-size: 26px; }
.person .role { color: var(--red); font-family: var(--head); font-weight: 600; margin-top: 4px; }
.person .focus { font-size: 14px; color: var(--muted); margin-top: 12px; }
.person p { margin: 0 0 12px; }
/* Headshots are black and white, as on the WordPress site, and square. Two of
   the originals are only about 200px, so they are never shown larger than 176px. */
.person .photo { display: block; width: 176px; height: 176px; object-fit: cover; border-radius: 4px; margin-bottom: 18px; background: var(--line); }
/* Stands in for a headshot not yet supplied. */
.person .photo.placeholder { display: flex; align-items: center; justify-content: center; background: var(--stone); color: #fff; font-family: var(--head); font-size: 52px; font-weight: 600; letter-spacing: 2px; }

/* inner pages open on their WordPress banner photo, a little shorter than the home page's */
.hero.photo.slim { padding: 96px 0 104px; }

/* home: the four questions, each a photo tile leading to its page */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* Headings sit at the top of every tile and the links at the bottom, so both
   line up across a row whatever the length of the text between (Rick,
   2026-09-24). The tint is darkest where the text is. */
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 280px; padding: 28px 30px; border-radius: 4px; overflow: hidden; color: #fff; text-decoration: none; background: var(--slate) var(--img) center / cover no-repeat; }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,36,.82) 0%, rgba(20,30,36,.6) 55%, rgba(20,30,36,.78) 100%); transition: background .2s; }
.tile > * { position: relative; }
.tile h3 { color: #fff; font-size: 30px; margin: 0 0 8px; }
.tile p { margin: 0; color: #e4e9eb; max-width: 460px; }
.tile .go { margin-top: auto; padding-top: 18px; font-family: var(--head); font-weight: 600; font-size: 17px; color: #ff8a80; }
.tile:hover::before, .tile:focus-visible::before { background: linear-gradient(180deg, rgba(20,30,36,.9) 0%, rgba(20,30,36,.7) 55%, rgba(20,30,36,.88) 100%); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-family: var(--head); font-weight: 600; color: var(--slate); }
.form input, .form textarea { font: 16px var(--body); padding: 10px 12px; border: 1px solid #cfcac2; border-radius: 3px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }

/* The five-item menu needs about 940px on one line; below that it folds into
   the Menu button, as it does on a phone. Placed before the phone rules so
   those still win at their own widths. */
@media (max-width: 960px) {
  /* Three service columns get too narrow here for their headings to stay on
     two lines beside the owl, so the cards stack. */
  .grid3.services { grid-template-columns: 1fr; gap: 18px; }
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 84px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 12px 24px 18px; gap: 14px; }
  .nav.open { display: flex; }
}

@media (max-width: 820px) {
  .cases, .contact-grid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; gap: 10px; }
  .person .photo { width: 140px; height: 140px; margin-bottom: 14px; }
  .person .photo.placeholder { font-size: 42px; }
  .hero.photo.slim { padding: 64px 0 72px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 220px; padding: 22px 20px; }
  /* On a phone the text fills most of the tile, so the tint is even rather than a fade. */
  .tile::before, .tile:hover::before { background: rgba(20,30,36,.66); }
  .tile h3 { font-size: 26px; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
  .logos img { height: 40px; }
  .marquee-set { gap: 40px; padding-right: 40px; }
  .marquee-set img { width: 110px; height: 46px; }
  .marquee-track { animation-duration: 30s; }
  .wrap { padding: 0 16px; }
  .top .wrap { height: 68px; }
  .top .logo img { height: 36px; }
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 12px 16px 18px; gap: 14px; }
  .nav.open { display: flex; }
  .band { padding: 64px 0; }
  .hero { padding: 56px 0 64px; }
  .grid3, .posts, .arch .wrap, .contact-band .wrap { grid-template-columns: 1fr; }
  .post-list .post-card { grid-template-columns: 1fr; gap: 4px; }
  .article { padding: 48px 16px 64px; }
}