:root {
    --red: #FF222C;
    --red-text: #D6111B;
    --ink: #1C1718;
    --muted: #6B6365;
    --line: #E8E3E2;
    --warm: #FAF8F7;
    --ink-2: #2A2425;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font: 16px/1.7 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--ink); background: #fff; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; line-height: 1.12; letter-spacing: -.005em; }
  h1 em, h2 em, blockquote em { font-style: italic; color: var(--red); }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

  /* header */
  /* header: warm ivory frosted glass, same family as the sections; the page softly shows through when scrolling */
  header { border-bottom: 1px solid rgba(154,122,76,.18); background: rgba(246,242,235,.86); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); position: sticky; top: 0; z-index: 5; }
  header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; }
  .brand { display: flex; align-items: center; gap: 12px; flex: none; }
  .brand .sym { height: 40px; }
  .brand .wm { height: 32px; }
  nav { display: flex; gap: 28px; font: 400 14px "Plus Jakarta Sans"; color: #4A4243; white-space: nowrap; }
  nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
  nav a:hover { border-color: var(--red); }
  .hbtn { font: 500 13px "Plus Jakarta Sans"; color: var(--red-text); border: 1px solid var(--red-text); padding: 9px 16px; white-space: nowrap; }
  .hright { display: flex; align-items: center; gap: 16px; }
  .lang { display: flex; border: 1px solid rgba(154,122,76,.28); }
  .lang button { font: 600 12px "Plus Jakarta Sans"; letter-spacing: .08em; padding: 7px 10px; background: none; border: 0; color: var(--muted); cursor: pointer; }
  .lang button.on { background: #1E2A3C; color: #F4EFE6; }

  /* hero: centred, generous whitespace */
  .hero { text-align: center; padding: 120px 0 100px; }
  .hero img { height: 84px; }  /* small "seal" so the headline leads */
  .hero h1 { font-size: clamp(38px, 4.8vw, 62px); font-weight: 400; max-width: 1000px; margin: 34px auto 0; }
  .hero h1 b { display: block; }
  .hero p { max-width: 680px !important; }
  .hero h1 b { font-weight: 400; font-style: italic; color: var(--red); }
  .hero p { max-width: 580px; margin: 22px auto 0; font-weight: 300; font-size: 18px; color: var(--muted); }
  .hero .links { margin-top: 38px; display: flex; gap: 32px; justify-content: center; font: 500 14px "Plus Jakarta Sans"; }
  .hero .links a.primary { background: var(--ink); color: #fff; padding: 14px 26px; }
  .hero .links a.text { padding: 14px 0; border-bottom: 1px solid var(--ink); }

  .eyebrow { font: 600 13px/1 "Plus Jakarta Sans"; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
  section { padding: 110px 0; }
  .sec-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 54px; }
  .sec-head h2 { font-size: clamp(30px, 3.4vw, 42px); margin-top: 12px; letter-spacing: .01em; }
  .sec-head p { max-width: 440px; color: var(--muted); }

  /* about */
  .about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
  .about blockquote { font: 400 clamp(28px, 3vw, 38px)/1.2 "Instrument Serif", Georgia, serif; letter-spacing: .01em; border-left: 3px solid var(--red); padding-left: 22px; }
  .about p + p { margin-top: 16px; }
  .about .txt { color: #3D3536; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--line); }
  .stats div { padding-top: 20px; }
  .stats b { display: block; font: 400 50px/1 "Instrument Serif", Georgia, serif; }
  .stats span { font-size: 13px; color: var(--muted); }

  /* founder pull-quote (replaces the old statistics strip) */
  .pull { max-width: 920px; margin: 90px auto 0; padding-top: 70px; border-top: 1px solid var(--line); text-align: center; }
  .pull blockquote { position: relative; font: 400 44px/1.22 "Instrument Serif", Georgia, serif; font-style: italic; }
  .pull blockquote::before { content: "\201C"; display: block; font: 400 120px/0.6 "Instrument Serif", Georgia, serif; color: var(--red); margin-bottom: 18px; }
  .pull figcaption { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 30px; }
  .pull .dash { color: var(--muted); }
  .pull .sig { font: 400 46px/1 "Mrs Saint Delafield", cursive; color: var(--ink); }
  .pull .role { font: 500 12px "Plus Jakarta Sans"; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

  /* practice */
  .practice { background: var(--warm); }
  .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
  .card { background: #fff; padding: 38px 40px 42px; position: relative; transition: background .2s; }
  .card.cta { background: var(--ink); color: #fff; display: flex; flex-direction: column; }
  .card.cta h3 { margin-top: 0; }
  .card.cta p { color: #CFC7C6; flex: 1; }
  .card.cta span { font: 600 14px "Plus Jakarta Sans"; color: var(--red); margin-top: 18px; }
  .card.cta:hover { background: var(--red-text); }
  .card.cta:hover p, .card.cta:hover span { color: #fff; }
  .card .no { font: 500 13px "Plus Jakarta Sans"; letter-spacing: .08em; color: var(--red-text); }
  .card h3 { font-size: 28px; margin: 14px 0 10px; }
  .card p { font-size: 15px; color: var(--muted); }
  .card:hover { background: var(--ink); color: #fff; }
  .card:hover p { color: #CFC7C6; }

  /* people */
  .people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .person .ph { aspect-ratio: 4/5; background: linear-gradient(160deg, #3A3233, var(--ink)); display: grid; place-items: center; color: #5C5354; font: 600 12px "Plus Jakarta Sans"; letter-spacing: .14em; overflow: hidden; }
  .person .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
  /* lawyer names: same Instrument Serif, opened up so the condensed letters breathe */
  .person h3, .pm-name, .pp h3 { letter-spacing: .03em; word-spacing: .06em; line-height: 1.25; }
  .person h3 { font-size: 20px; margin-top: 16px; }
  .person span { font-size: 13px; color: var(--muted); }
  .person.lead .ph { background: linear-gradient(160deg, #4A1012, var(--ink)); }
  /* hierarchy: founder alone, then seniors, then juniors — all centred like a pyramid */
  .people.founder { grid-template-columns: minmax(0, 320px); justify-content: center; }
  #profesional .person { text-align: center; }
  .people.founder h3 { font-size: 24px; white-space: nowrap; margin-left: -60px; margin-right: -60px; }
  .people.senior { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
  .people.single { grid-template-columns: minmax(0, 250px); justify-content: center; }
  .people.trio { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; }
  .tier { display: flex; align-items: center; gap: 18px; margin: 64px 0 30px; font: 500 12px "Plus Jakarta Sans"; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .tier:first-of-type { margin-top: 10px; }
  .tier::before, .tier::after { content: ""; flex: 1; height: 1px; background: var(--line); }

  /* news */
  .news { background: var(--warm); }
  .more { font: 500 14px "Plus Jakarta Sans"; border-bottom: 1px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }
  .ngrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .post .thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, #EDE8E7, #DCD5D4); position: relative; }
  .post .thumb::after { content: ""; position: absolute; inset: 0; background: url(/assets/symbol.png) no-repeat center / 54px; opacity: .14; }
  .post .meta { margin-top: 18px; font: 500 12px "Plus Jakarta Sans"; letter-spacing: .12em; text-transform: uppercase; color: var(--red-text); }
  .post h3 { font-size: 26px; margin: 10px 0 8px; transition: color .2s; }
  .post p { font-size: 15px; color: var(--muted); }
  .post:hover h3 { color: var(--red-text); }

  /* contact */
  /* contact: warm ivory stone with a faint glass texture; footer in the hero's deep navy */
  /* every section starts in the colour the previous one ends in, so the page reads as one continuous gradient:
     hero → ivory → mist → ivory → stone → mist → ivory → navy footer */
  .contact { position: relative; isolation: isolate; background: linear-gradient(180deg, rgb(246,242,235) 0%, rgb(242,237,229) 100%); color: var(--ink); }
  .contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--industries-bg) center / cover; filter: grayscale(1); opacity: .045; mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
  .contact .sec-head p { color: var(--muted); }
  .cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #DDD5C9; border: 1px solid #DDD5C9; }
  .cgrid div { background: rgba(255,255,255,.72); padding: 34px 30px; }
  .cgrid small { font: 600 12px "Plus Jakarta Sans"; letter-spacing: .16em; text-transform: uppercase; color: #9A7A4C; }
  .cgrid p { margin-top: 10px; font-size: 17px; }
  .social { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 0; background: #DDD5C9; border: 1px solid #DDD5C9; border-top: 0; }
  .social a { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.72); padding: 22px 30px; color: var(--ink); }
  .social svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .social span { display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; }
  .social b { font: 600 12px "Plus Jakarta Sans"; letter-spacing: .16em; text-transform: uppercase; color: #9A7A4C; }
  .social i { font-style: normal; color: #8E8586; }
  .social a:not(.tbi):hover { background: #fff; color: var(--red-text); }
  .social a.tbi { cursor: default; }
  footer { background: #1E2A3C; color: #B9C3D1; font-size: 13px; }
  footer .wrap { display: flex; justify-content: space-between; padding: 26px 24px; }

  /* floating WhatsApp: fixed bottom-right */
  .wa { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
  .wa-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: #25D366; box-shadow: 0 6px 20px rgba(0,0,0,.22); cursor: pointer; display: grid; place-items: center; }
  .wa-btn svg { width: 32px; height: 32px; }
  .wa-pop { width: 320px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.2); overflow: hidden; }
  .wa-pop[hidden] { display: none; }
  .wa-head { display: flex; align-items: center; gap: 12px; background: #075E54; color: #fff; padding: 14px 16px; }
  .wa-head img { width: 36px; height: 36px; padding: 5px; border-radius: 50%; background: var(--ink); object-fit: contain; }
  .wa-head div { flex: 1; line-height: 1.3; }
  .wa-head small { display: block; font-size: 12px; opacity: .8; }
  .wa-head button { background: none; border: 0; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; }
  .wa-body { background: #ECE5DD; padding: 18px 16px; }
  .bubble { background: #fff; padding: 10px 12px; font-size: 14px; border-radius: 0 8px 8px 8px; max-width: 90%; }
  .wa-go { display: block; text-align: center; padding: 13px; font: 600 13px "Plus Jakarta Sans"; background: #25D366; color: #fff; opacity: .55; cursor: not-allowed; }

  /* industries */
  .ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; }
  .ind div { border-top: 1px solid var(--ink); padding-top: 22px; }
  .ind h3 { font-size: 26px; }
  .ind p { margin-top: 10px; font-size: 15px; color: var(--muted); }

  /* team: clickable cards with a bio open a profile modal */
  .team { background: var(--warm); }
  .news { background: #fff !important; }
  .person .bio { display: none; }
  .person .view { display: block; margin-top: 6px; font: 500 12px "Plus Jakarta Sans"; font-style: normal; color: var(--red-text); opacity: 0; transition: opacity .2s; }
  .person.has-bio { cursor: pointer; }
  .person.has-bio:hover .view, .person.has-bio:focus .view { opacity: 1; }
  .person.has-bio:hover .ph { outline: 2px solid var(--red); outline-offset: 4px; }
  dialog#profile { margin: auto; border: 0; padding: 0; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); color: var(--ink); }
  dialog#profile::backdrop { background: rgba(28, 23, 24, .7); }
  .pm { display: grid; grid-template-columns: 280px 1fr; }
  .pm-ph { aspect-ratio: 4/5; background: linear-gradient(160deg, #3A3233, var(--ink)); display: grid; place-items: center; color: #5C5354; font: 600 12px "Plus Jakarta Sans"; letter-spacing: .14em; overflow: hidden; }
  .pm-ph.lead { background: linear-gradient(160deg, #4A1012, var(--ink)); }
  .pm-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .pm > div:last-child { padding: 40px 40px 36px; overflow: auto; }
  .pm-name { font-size: 32px; margin: 10px 0 18px; letter-spacing: .03em; }
  .pm-mail { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 20px; font-size: 14px; color: var(--red-text); border-bottom: 1px solid currentColor; }
  .pm-mail::before { content: "✉"; font-size: 13px; }
  .pm-lic { margin: -8px 0 20px; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
  .pm-lic:empty { display: none; }
  .pm-lic b { font-weight: 600; color: var(--ink); }
  .pm-bio p { font-size: 15px; color: #3D3536; }
  .pm-bio p + p { margin-top: 12px; }
  dialog#profile .x { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--muted); }

  .social { display: flex; flex-wrap: wrap; }
  .social a { flex: 1 1 0; min-width: 0; }
  .disclaimer { margin-top: 26px; max-width: 760px; font-size: 13px; color: #7A7272; }

  /* print: desktop layout on tall A-ratio pages; team bios as an appendix */
  .print-profiles { display: none; }
  @page { size: 1280px 1810px; margin: 0; }
  @media print {
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .note, .wa, .person .view, .more, dialog { display: none !important; }
    header { position: static; }
    .card, .person, .post, .ind div, .cgrid div, .stats, .tier { break-inside: avoid; }
    .tier { break-after: avoid; }
    section { break-inside: auto; }
    .sec-head { break-after: avoid; }
    #praktik, #profesional, #news, #kontak { break-before: page; }
    #industri { break-inside: avoid; }
    .hero { padding: 80px 0 40px !important; }
    section { padding: 80px 0; }
    .grid { background: none; border: 0; gap: 0; }
    .card { border: 1px solid var(--line); margin: -1px 0 0 -1px; }
    .people.founder { grid-template-columns: 200px; }
    .people.senior { grid-template-columns: repeat(2, 170px); }
    .people { grid-template-columns: repeat(4, 170px); justify-content: center; gap: 24px; }
    .people.single { grid-template-columns: 170px; }
    .people.trio { grid-template-columns: repeat(3, 170px); }
    #profesional .sec-head { margin-bottom: 30px; }
    #profesional { padding-top: 70px; padding-bottom: 40px; }
    .people.founder .ph, .people.senior .ph { aspect-ratio: 4/5; }
    .tier { margin: 26px 0 16px; }
    .tier { margin: 36px 0 20px; }
    .person h3 { font-size: 18px; margin-top: 10px; }
    .print-profiles { display: block; break-before: page; padding: 90px 0 60px; }
    .pp { display: grid; grid-template-columns: 200px 1fr; gap: 36px; padding: 30px 0; border-top: 1px solid var(--line); break-inside: avoid; }
    .pp .pm-ph { aspect-ratio: 4/5; }
    .pp h3 { font-size: 26px; margin: 8px 0 6px; }
    .pp .pm-mail { margin: 0 0 8px; }
    .pp .pm-lic { margin: 0 0 14px; }
    .pp p { font-size: 15px; color: #3D3536; }
    .pp p + p { margin-top: 10px; }
  }

  /* background media (Pexels, free licence) — landscape for desktop, portrait for upright phones */
  :root {
    --hero-poster: url(/assets/bg/hero-poster-l.jpg);
    --about-bg: url(/assets/bg/about-l.jpg);
    --practice-bg: url(/assets/bg/practice-l.jpg);
    --industries-bg: url(/assets/bg/glass-l.jpg);
    --team-bg: url(/assets/bg/glass-l.jpg);
    --news-bg: url(/assets/bg/news-l.jpg);
  }
  @media (orientation: portrait) and (max-width: 860px) {
    :root {
      --hero-poster: url(/assets/bg/hero-poster-p.jpg);
      --about-bg: url(/assets/bg/about-p.jpg);
      --practice-bg: url(/assets/bg/practice-p.jpg);
      --industries-bg: url(/assets/bg/glass-p.jpg);
      --team-bg: url(/assets/bg/glass-p.jpg);
      --news-bg: url(/assets/bg/news-p.jpg);
    }
  }
  .hero.has-bg { position: relative; overflow: hidden; color: #fff; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); display: flex; align-items: center; padding: 90px 0; }
  .hero.has-bg .wrap { position: relative; z-index: 1; width: 100%; }
  .hero-media { position: absolute; inset: 0; background: var(--hero-poster) center / cover; }
  .hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* warm grade: the blue glass is muted toward taupe so the video sits in the same ivory/champagne family as header and About */
  .hero-media, .hero-media video { filter: saturate(.55) sepia(.18) contrast(1.02); }
  .hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at center, rgba(34,30,30,.28), rgba(34,30,30,0) 70%), linear-gradient(180deg, rgba(40,36,36,.5) 0%, rgba(40,36,36,.46) 50%, rgba(52,46,42,.58) 100%); }
  /* hero palette on the cool glass video: warm ivory text, champagne accent, soft buttons — gentle contrast, no pure white/red glare */
  .hero.has-bg { --ivory: #F6F1E8; --champagne: #E8C998; --mist: #E6DED2; }
  .hero.has-bg h1 { color: var(--ivory); text-shadow: 0 1px 22px rgba(30,24,20,.45); }
  .hero.has-bg h1 b { color: var(--champagne) !important; }
  .hero.has-bg p { color: var(--mist); text-shadow: 0 1px 14px rgba(30,24,20,.4); }
  .hero.has-bg .links a.primary { background: var(--ivory); color: #1E2A3C; }
  .hero.has-bg .links a.primary:hover { background: var(--champagne); }
  .hero.has-bg .links a.text { color: var(--ivory); border-color: rgba(244,239,230,.55); }

  /* one calm family: hero and footer are the only dark bookends; sections between alternate ivory / mist, each over a faint, desaturated photo */
  :root { --navy: #1E2A3C; --bronze: #9A7A4C; }
  /* About melts into Practice: About ends in solid ivory, Practice starts in that same ivory and cools to mist */
  #tentang { background: linear-gradient(180deg, rgba(246,242,235,.9) 0%, rgba(246,242,235,.94) 70%, rgb(246,242,235) 100%), var(--about-bg) center / cover; background-blend-mode: normal, luminosity; }
  .practice { background: linear-gradient(180deg, rgb(240,239,236) 0%, rgba(240,239,236,.93) 14%, rgba(237,241,245,.9) 45%, rgba(237,241,245,.93) 85%, rgb(237,241,245) 100%), var(--practice-bg) center / cover !important; background-blend-mode: normal, luminosity !important; color: var(--ink); }
  .practice .sec-head p { color: var(--muted); }
  .practice .card { color: var(--ink); }
  .practice .card:hover { color: #fff; }
  .practice .card.cta, .card.cta { background: var(--navy); color: #F4EFE6; }
  .card:hover { background: var(--navy) !important; }
  .card.cta span { color: #E3C496 !important; }

  #industri { background: linear-gradient(180deg, rgb(237,241,245) 0%, rgba(237,241,245,.93) 14%, rgba(246,242,235,.9) 45%, rgba(246,242,235,.93) 85%, rgb(246,242,235) 100%), var(--industries-bg) center / cover; background-blend-mode: normal, luminosity; }
  /* team: soft, low-contrast backdrop so the portraits stay the focus */
  section.team { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgb(246,242,235) 0%, rgb(240,239,236) 30%, rgb(240,239,236) 100%) !important; }
  /* soft-focus office in daylight: depth without competing with the portraits */
  section.team::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--team-bg) center / cover; filter: grayscale(1) blur(14px); opacity: .18; mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
  section.team::after { content: none; }
  #profesional .person .ph { box-shadow: 0 10px 30px -14px rgba(28,23,24,.35); }
  /* news: a warm "library at dusk" — continues Team's stone tone, warms to champagne-ivory that Contact continues */
  section.news { background: linear-gradient(180deg, rgb(246,242,235) 0%, rgba(244,240,233,.94) 18%, rgba(237,229,216,.84) 50%, rgba(243,236,225,.92) 84%, rgb(246,242,235) 100%), var(--news-bg) center / cover !important; background-blend-mode: normal, normal !important; color: var(--ink); }
  section.news .post .thumb { background: linear-gradient(135deg, #F4EFE6, #E6DBC8); box-shadow: 0 10px 26px -16px rgba(30,42,60,.45); }
  section.news .post .meta { color: var(--bronze); }
  section.news .post p { color: var(--muted); }
  section.news .post:hover h3 { color: var(--red-text); }
  section.news .more { border-color: var(--ink); }

  .note { position: fixed; bottom: 16px; left: 16px; z-index: 9; background: #FFF8D6; color: #5A4A00; font: 500 12px "Plus Jakarta Sans"; padding: 8px 12px; border: 1px solid #E8D88A; }

  @media screen and (max-width: 1100px) { nav { gap: 20px; font-size: 13px; } .hbtn { display: none; }  }
  .menu-btn { display: none; }
  @media screen and (max-width: 860px) {
    .hbtn { display: none; }
    /* phone menu: hamburger opens a full-width ivory drawer under the header */
    header .wrap { position: relative; }
    .hright { order: 2; }
    .menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 34px; padding: 0 8px; background: none; border: 1px solid rgba(154,122,76,.28); cursor: pointer; }
    .menu-btn span { display: block; height: 1.5px; background: #1E2A3C; transition: transform .2s, opacity .2s; }
    header.open .menu-btn span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    header.open .menu-btn span:nth-child(2) { opacity: 0; }
    header.open .menu-btn span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
    nav { display: none; position: absolute; top: 84px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px 28px 18px; background: rgba(246,242,235,.97); border-bottom: 1px solid rgba(154,122,76,.18); font-size: 16px; }
    header.open nav { display: flex; }
    nav a { padding: 13px 0; border-bottom: 1px solid rgba(154,122,76,.15); }
    nav a:last-child { border-bottom: 0; }
    /* last junior associate centred instead of left alone */
    .people.trio { display: flex !important; flex-wrap: wrap; justify-content: center; }
    .people.trio .person { width: calc(50% - 14px); }
    /* news thumbnails: slimmer on phones */
    .post .thumb { aspect-ratio: 16/6; }
    .grid, .about, .cgrid, .ngrid { grid-template-columns: 1fr; }
    .card.cta span { margin-top: 10px; }
    .social { grid-template-columns: 1fr 1fr; }
    .social a { padding: 18px; }
    .people { grid-template-columns: repeat(2, 1fr); }
    .people.founder { grid-template-columns: minmax(0, 240px); }
    .people.founder h3 { font-size: 22px; margin-left: -40px; margin-right: -40px; }
    .people.senior, .people.trio { grid-template-columns: repeat(2, 1fr); }
    .people.single { grid-template-columns: minmax(0, 240px); }
    .sec-head { flex-direction: column; align-items: start; }
    .about { gap: 40px; }
    .hero h1 b { display: inline; }
    .pull { margin-top: 60px; padding-top: 50px; }
    .pull blockquote { font-size: 30px; }
    .pull .sig { font-size: 38px; }
    .pull figcaption { flex-wrap: wrap; }
    .wa-pop { width: calc(100vw - 44px); }
    .ind { grid-template-columns: 1fr; gap: 30px; }
    .pm { grid-template-columns: 1fr; }
    .pm-ph { aspect-ratio: 16/10; }
    .pm > div:last-child { padding: 26px 22px; }
    .person .view { opacity: 1; }
    .social a { flex-basis: 100%; }
  }

/* ===== Insights: archive + article pages ===== */
.archive { padding-top: 90px; }
.archive .ngrid { row-gap: 46px; }
.article { padding: 70px 0 110px; background: linear-gradient(180deg, #F6F2EB 0%, #F2EDE5 100%); }
.wrap.narrow { max-width: 760px; }
.article .back { display: inline-block; font-size: 14px; color: var(--muted); border-bottom: 1px solid currentColor; margin-bottom: 34px; }
.article .meta { font: 500 12px "Plus Jakarta Sans"; letter-spacing: .12em; text-transform: uppercase; color: #9A7A4C; }
.article h1 { font-size: clamp(32px, 4.2vw, 48px); margin: 14px 0 18px; letter-spacing: .005em; }
.article .lede { font-size: 19px; font-weight: 300; color: #3D3536; }
.article .byline { margin-top: 18px; font-size: 14px; color: var(--muted); }
.article .cover { width: 100%; margin: 34px 0 6px; box-shadow: 0 14px 34px -20px rgba(30,42,60,.5); }
.prose { margin-top: 38px; font-size: 17px; line-height: 1.8; color: #2B2526; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 30px; margin-top: 1.8em; }
.prose h3 { font-size: 23px; margin-top: 1.5em; }
.prose a { color: var(--red-text); border-bottom: 1px solid currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 3px solid #9A7A4C; padding-left: 20px; font: italic 400 22px/1.45 "Instrument Serif", Georgia, serif; color: var(--ink); }
.prose img { max-width: 100%; }
.share { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 54px; padding-top: 22px; border-top: 1px solid #DDD5C9; font-size: 14px; }
.share span { font: 600 12px "Plus Jakarta Sans"; letter-spacing: .14em; text-transform: uppercase; color: #9A7A4C; }
.share a { border-bottom: 1px solid currentColor; }
.art-disc { margin-top: 22px; font-size: 13px; color: #7A7272; }
/* short pages: footer stays at the bottom of the window */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .article, body > .archive { flex: 1; }

/* bilingual article cards: show the version matching the page language */
html[lang="en"] .lv-id, html[lang="id"] .lv-en { display: none; }
.post .thumb.has-cover::after { display: none; }  /* logo watermark only on cards without a cover */