:root {
    color-scheme:only light;
    --ox:#8D1D20;
    --ox-deep:#6E1518;
    --ox-tint:#F6EDEC;
    --deep:#191919;
    --ink:#33312E;
    --mid:#6B6862;
    --faint:#93908A;
    --line:#DCD8CF;
    --line-ox:rgba(141,29,32,.22);   /* oxblood-tinted hairline */
    --paper:#FAF9F6;
    --paper-2:#F3F1EA;
    --display:'Petrona', Georgia, serif;
    --body:'Figtree', -apple-system, sans-serif;
    --measure:880px;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  /* the palette is fixed — never invert under a system dark theme */
  html { background:#FAF9F6; forced-color-adjust:none; }
  ::selection { background:var(--ox); color:#FAF9F6; }
  ::-moz-selection { background:var(--ox); color:#FAF9F6; }
  @media (prefers-color-scheme:dark) {
    html, body { background:#FAF9F6; color:#33312E; }
  }
  html { scroll-behavior:smooth; scroll-padding-top:78px; }

  body {
    font-family:var(--body); font-size:17px; line-height:1.62;
    -webkit-text-size-adjust:100%;
    color:var(--ink); background:var(--paper);
    -webkit-font-smoothing:antialiased;   }



  /* ---------- nav ---------- */
  nav {
    position:sticky; top:0; z-index:50;
    background:rgba(250,249,246,.94); backdrop-filter:saturate(160%) blur(8px);
    border-bottom:1px solid var(--line-ox);
  }
  nav .inner {
    max-width:var(--measure); margin:0 auto; padding:14px 32px;
    display:flex; align-items:center; gap:22px;
  }
  nav .mark {
    margin-right:auto; display:flex; align-items:center;
    text-decoration:none; border:0; opacity:1; transition:opacity .2s ease;
  }
  nav .mark:after { content:none; }
  nav .mark:hover { opacity:.7; }
  nav .mark img { height:26px; width:auto; display:block; }
  nav .menu a {
    position:relative; font-family:var(--display);
    font-size:12px; font-weight:500; letter-spacing:.1em;
    text-transform:uppercase; color:var(--mid); text-decoration:none;
    padding:4px 0;
  }
  nav .menu a:after {
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--ox); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav .menu a:hover { color:var(--ox); }
  nav .menu a:hover:after, nav .menu a.on:after { transform:scaleX(1); }
  nav .menu a.on { color:var(--ox); }
  nav .menu { display:flex; gap:22px; }

  main { max-width:var(--measure); margin:0 auto; padding:0 32px; }

  section { padding:64px 0; border-bottom:1px solid var(--line-ox); }
  /* A trailing paragraph carries 14px of margin, a trailing list does not,
     which made the gaps between sections uneven. Strip the margin from
     whatever element ends a section so every boundary is exactly 128px. */
  section > *:last-child,
  .band .wrap > *:last-child,
  .connect-block > *:last-child { margin-bottom:0; }
  section:last-of-type { border-bottom:none; }

  h2 {
    font-family:var(--display); font-size:42px; font-weight:600;
    letter-spacing:-0.018em; line-height:1.12; color:var(--deep);
    margin-bottom:12px;
  }
  .kicker { width:60px; height:3px; background:var(--ox); margin-bottom:22px; }
  /* justified, as in the brochure. Hyphenation is essential here —
     without it a justified web column opens ugly gaps between words. */
  p {
    margin-bottom:14px;
    text-align:justify; text-align-last:left;
    hyphens:manual; -webkit-hyphens:manual;
  }
  .lede {
    font-family:var(--display); font-style:italic; font-weight:400;
    font-size:22px; line-height:1.5; color:var(--mid); margin-bottom:22px;
  }

  /* ---------- masthead ---------- */
  /* masthead: the lockup alone, centred. No headline, no stats. */
  .masthead {
    min-height:0;
    display:flex; align-items:center; justify-content:center;
    padding:52px 22px 46px; border-bottom:1px solid var(--line);
    position:relative; overflow:hidden;
  }
  .masthead:before {
    content:""; position:absolute; inset:0;
    background:radial-gradient(520px 220px at 50% 40%, var(--ox-tint), transparent 74%);
    pointer-events:none;
  }
  .masthead .in { position:relative; width:100%; text-align:center; }

  .masthead img.lock {
    width:min(300px, 68%); height:auto; display:block; margin:0 auto;
    opacity:0; transform:translateY(8px);
    transition:opacity .9s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s;
  }
  .masthead.in-view img.lock { opacity:1; transform:none; }




  /* ---------- expertise: an always-readable bulleted list ---------- */
  .exp { border-top:1px solid var(--line-ox); margin-top:22px; list-style:none; }
  .exp li {
    position:relative; padding:18px 14px 18px 28px;
    border-bottom:1px solid var(--line-ox);
    transition:background .25s ease;
  }
  /* The row shifts on hover with a transform rather than by animating
     padding. Transforms do not affect layout, so the text box keeps its
     exact width and no line ever rewraps between states. */
  .exp li h3, .exp li p {
    transition:transform .25s ease, color .25s ease;
  }
  .exp li:hover h3, .exp li:hover p { transform:translateX(6px); }
  /* oxblood bullet */
  .exp li:before {
    content:""; position:absolute; left:8px; top:26px;
    width:7px; height:7px; border-radius:50%; background:var(--ox);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  /* accent bar that wipes down the left edge on hover */
  .exp li:after {
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--ox); transform:scaleY(0); transform-origin:top;
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .exp li:hover { background:var(--paper-2); }
  .exp li:hover:after { transform:scaleY(1); }
  .exp li:hover:before { transform:scale(1.25); box-shadow:0 0 0 4px var(--ox-tint); }
  .exp h3 {
    font-family:var(--display); font-size:21px; font-weight:500;
    color:var(--ox); letter-spacing:-0.005em; margin-bottom:5px; line-height:1.3;
    transition:color .25s ease;
  }
  .exp li:hover h3 { color:var(--ox-deep); }
  .exp p {
    font-size:15.5px; line-height:1.65; color:var(--mid); margin:0;
    text-align:justify; text-align-last:left; hyphens:manual; -webkit-hyphens:manual;
  }

  /* ---------- reach: numbered cards ---------- */
  .reach { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 22px; }
  .reach article {
    position:relative; overflow:hidden;
    background:var(--ox); color:#fff; border:1px solid var(--ox);
    padding:22px 20px 24px; cursor:default;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .reach article:hover {
    transform:translateY(-4px); background:var(--ox-deep);
    box-shadow:0 12px 28px rgba(141,29,32,.24);
  }
  .reach h3 {
    font-family:var(--display); font-size:20px; font-weight:500;
    color:#fff; margin-bottom:6px; line-height:1.25;
  }
  .reach p {
    font-size:15px; line-height:1.6; color:rgba(255,255,255,.85); margin:0;
    text-align:left;
  }


  /* ---------- connect: a two-column register ---------- */
  .band { background:var(--paper); position:relative; }
  .band:before {
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:calc(min(var(--measure), 100%) - 64px); height:1px; background:var(--line-ox);
  }
  .band .wrap { max-width:var(--measure); margin:0 auto; padding:64px 32px; }

  /* set as it reads in the brochure: a lead-in, then the paragraph */
  .connect-block { margin-top:20px; }
  .connect-block h3 {
    font-family:var(--display); font-size:21px; font-weight:600;
    letter-spacing:-0.005em; color:var(--deep); margin:28px 0 7px;
  }
  .connect-block h3:first-child { margin-top:0; }
  .connect-block p { margin-bottom:0; }

  /* ---------- contact ---------- */
  /* ---------- contact: the page's one full oxblood field ---------- */
  /* ---------- contact: the page's one oxblood field ---------- */
  .contact { background:var(--ox); color:#fff; }
  .contact .wrap {
    max-width:var(--measure); margin:0 auto; padding:60px 32px;
    display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;
  }
  .contact .lbl {
    font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.72); margin-bottom:14px; font-size:12px;
  }
  .contact .who { font-family:var(--display); font-size:33px; color:#fff; margin-bottom:10px; }
  .contact .role { color:rgba(255,255,255,.78); font-size:16px; margin:0; }
  .contact a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45); }
  .contact a:hover { border-bottom-color:#fff; }
  .contact .rows div {
    padding:12px 0; border-bottom:1px solid rgba(255,255,255,.24);
    font-size:16px; color:rgba(255,255,255,.92);
  }
  .contact .rows div:first-child { border-top:1px solid rgba(255,255,255,.24); }
  .contact .rows .addr { line-height:1.65; padding:14px 0; }

  footer {
    background:var(--paper); padding:16px 32px;
    font-size:13px; color:var(--faint); text-align:center;
  }

  /* ---------- tablet ---------- */
  @media (max-width:900px) {
    main, nav .inner, .band .wrap, .contact .wrap, footer {
      padding-left:24px; padding-right:24px;
    }
    .band:before { width:calc(min(var(--measure), 100%) - 48px); }
    .reach { grid-template-columns:1fr 1fr; }
    .reach article:last-child { grid-column:1 / -1; }
    h2 { font-size:35px; }
    section { padding:52px 0; }
  }

  /* ---------- phone ---------- */
  @media (max-width:680px) {
    body { font-size:16.5px; }

    /* nav becomes logo + a scrollable row of links */
    nav .inner { padding:11px 18px; flex-wrap:wrap; gap:10px; }
    nav .mark img { height:22px; }
    nav .menu {
      order:3; width:100%;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      gap:18px; padding-bottom:2px;
      scrollbar-width:none;
    }
    nav .menu::-webkit-scrollbar { display:none; }
    nav .menu a { white-space:nowrap; font-size:11.5px; letter-spacing:.08em; }
    html { scroll-padding-top:104px; }

    main, .band .wrap, .contact .wrap, footer {
      padding-left:20px; padding-right:20px;
    }
    .band:before { width:calc(min(var(--measure), 100%) - 40px); }

    .masthead { padding:38px 20px 34px; }
    .masthead img.lock { width:min(240px, 72%); }

    section { padding:40px 0; }
    h2 { font-size:31px; line-height:1.16; }
    .kicker { margin-bottom:18px; }
    .lede { font-size:20px; }
    p { margin-bottom:13px; }

    .exp li { padding:16px 4px 16px 24px; }
    .exp li:before { left:6px; top:23px; }
    .exp h3 { font-size:19px; line-height:1.3; }
    .exp p { font-size:15px; }
    /* the column is too narrow here for justification to look right */
    p, .exp p { text-align:left; }

    .reach { grid-template-columns:1fr; gap:14px; }
    .reach article { padding:20px 18px; }
    .reach article:last-child { grid-column:auto; }

    .connect-block h3 { font-size:19px; margin-top:24px; }

    .band .wrap { padding:48px 20px; }
    .contact .wrap { grid-template-columns:1fr; gap:26px; padding:44px 20px; }
    .contact .who { font-size:26px; }

    footer { padding:14px 20px; }
  }

  /* ---------- small phone ---------- */
  @media (max-width:400px) {
    .masthead img.lock { width:min(210px, 76%); }
    h2 { font-size:28px; }
    .exp h3 { font-size:18px; }
  }

  /* respect reduced-motion preferences */
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    * { transition-duration:.01ms !important; }
  }