/* Self-hosted fonts */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-htM8A_6pUKz9ugk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-iNM8A_6pUKz9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKky2F7i6C.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CxCis4UvI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59CxCis4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CxCis4UvI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59CxCis4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CxCis4UvI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59CxCis4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Heracles CS website styles
   Layout, type scale, spacing, colour and motion.
   ============================================================ */

:root {
  /* Palette (Heracles CS navy and gold) */
  --paper:     #f4f0e6;   /* warm cream background */
  --paper-2:   #ebe4d3;   /* alt band */
  --ink:       #0c1a3a;   /* navy, primary text and dark bands */
  --ink-soft:  #4d5878;   /* muted navy, secondary text */
  --line:      #dcd4c2;   /* warm hairline */
  --gold:      #a87f2a;   /* deeper antique gold, on navy and as graphic accents */
  --gold-ink:  #8a6a1c;   /* deep gold, legible accent text on cream */
  --navy:      #0c1a3a;   /* dark band fill */
  --on-dark:   #f1ecde;   /* cream text on navy */

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale */
  --fs-base:    clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.186), 1.13rem);
  --fs-small:   clamp(0.78rem, 0.75rem + ((1vw - 0.2rem) * 0.186), 0.88rem);
  --fs-medium:  clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.9), 1.55rem);
  --fs-large:   clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.429), 2.4rem);
  --fs-xlarge:  clamp(2.1rem, 2.1rem + ((1vw - 0.2rem) * 1.671), 3.4rem);
  --fs-xxlarge: clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 2.5), 4.6rem);

  /* Spacing scale */
  --sp-m:    clamp(1.5rem, 4vw, 2rem);
  --sp-l:    clamp(2rem, 5vw, 3rem);
  --sp-xl:   clamp(3rem, 7vw, 5rem);
  --sp-xxl:  clamp(2.75rem, 6vw, 5rem);
  --sp-xxxl: clamp(3.5rem, 8vw, 6rem);

  --wide: 1760px;
  --gut:  clamp(20px, 5vw, 60px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }

.wrap {
  width: 100%; max-width: var(--wide);
  margin: 0 auto; padding: 0 var(--gut);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600;
  margin: 0 0 1.6em;
}
/* Brand device: short gold rule beneath each kicker. */
.eyebrow::after {
  content: ""; display: block;
  width: 100%; height: 2px;
  background-image: radial-gradient(circle, var(--gold) 0.7px, transparent 1px);
  background-size: 3px 2px; background-repeat: repeat-x; background-position: left center;
  margin-top: .85em;
}
.eyebrow-light, .contact .eyebrow { color: var(--gold); }

/* ---------- Button ---------- */
.btn {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-small); font-weight: 500;
  padding: .85em 1.5em; border-radius: 5px;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--gold); color: var(--navy); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(168,127,42,.32); }
/* Three-zone bar: wordmark left, menu centred, bordered CTA right. */
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; height: 104px; }
.brand {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--serif); font-weight: 600; font-size: 2.6rem; line-height: 1;
  letter-spacing: 0.01em; color: var(--gold);
  margin-left: -0.13em; /* optical: hang the serif capital to the content edge */
}
/* Fixed sizes, not viewport based, so the logo never resizes on scroll or navigation. */
@media (min-width: 700px) { .brand { font-size: 3.2rem; } }
.brand-mark { width: 42px; height: 42px; flex: none; display: block; }
.brand-word { font-family: inherit; }
.footer-brand .brand-mark { width: 50px; height: 50px; }
.tm { font-size: 0.42em; vertical-align: super; margin-left: 2px; font-weight: 500; }
.nav { display: flex; gap: 38px; }
.nav a {
  font-size: var(--fs-small); letter-spacing: .04em; color: rgba(241,236,222,.82);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  padding-bottom: 6px;
  transition: color .2s ease, background-size .3s ease;
}
.nav a:hover, .nav a:focus { color: var(--gold); background-size: 100% 2px; }
.header-end { display: flex; align-items: center; gap: 22px; justify-self: end; }
.cta-link {
  font-size: var(--fs-small); font-weight: 500; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 4px; padding: .65em 1.2em;
  transition: background .2s ease, color .2s ease;
}
.cta-link:hover { background: var(--gold); color: var(--navy); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--gold); transition: transform .25s ease, opacity .25s ease; }

/* ---------- Hero: full-width navy colour block with diagonal gold wedge ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--on-dark);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 7rem);
}
.hero-inner { position: relative; z-index: 2; }
.hero-bg {
  position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 82% 100%);
  background:
    radial-gradient(130% 100% at 88% 32%, rgba(168,127,42,.55), rgba(168,127,42,.12) 50%, rgba(12,26,58,0) 72%),
    linear-gradient(150deg, rgba(168,127,42,.18), rgba(12,26,58,0) 60%);
}
.hero-title {
  font-size: var(--fs-xxlarge);
  line-height: 1.05;
  margin: .4em 0 .55em;
  max-width: 19ch;
  color: var(--on-dark);
}
.hero-title .accent { color: var(--gold); }
.hero-sub { font-size: var(--fs-medium); color: rgba(241,236,222,.82); max-width: 46ch; margin: 0 0 var(--sp-l); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero .btn { background: var(--gold); color: var(--navy); }
.hero .btn:hover { background: var(--on-dark); color: var(--navy); }
.hero-ghost {
  display: inline-block; border: 1px solid rgba(241,236,222,.55); color: var(--on-dark);
  border-radius: 5px; padding: .85em 1.5em; font-size: var(--fs-small); font-weight: 500;
  transition: background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap;
}
.hero-ghost:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }
@media (max-width: 700px) { .hero-bg { clip-path: polygon(70% 0, 100% 0, 100% 100%, 90% 100%); opacity: .7; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
.marquee-track {
  display: inline-flex; align-items: center; gap: 1.4rem;
  white-space: nowrap; will-change: transform;
  animation: marquee 38s linear infinite;
  font-family: var(--serif); font-weight: 500; font-size: var(--fs-large); color: var(--ink);
}
.marquee-track .dot { color: var(--gold-ink); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Statement ---------- */
.statement { padding: var(--sp-xxxl) 0; }
.statement-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start;
}
.statement-lead { font-family: var(--serif); font-weight: 500; font-size: var(--fs-large); line-height: 1.22; margin: 0; max-width: 22ch; }
.statement-body { font-size: var(--fs-medium); color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ---------- Section heads ---------- */
.section-head {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l);
  align-items: start; padding-bottom: var(--sp-l);
  border-bottom: 1px solid var(--line);
}
.section-title { font-size: var(--fs-xlarge); line-height: 1.2; margin: 0; }
.section-intro { font-size: var(--fs-base); color: var(--ink-soft); margin: 0; max-width: 46ch; }

/* ---------- Services as four photo cards ---------- */
.services { padding: var(--sp-xxxl) 0; }
.services .section-head { display: block; margin-bottom: var(--sp-xl); }
.services .section-intro { margin-top: .7em; max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .services .section-intro { white-space: normal; } }
.dowork-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-l); }
.dowork-card { margin: 0; }
.dowork-thumb { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: var(--sp-m); }
.dowork-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.dowork-card:hover .dowork-thumb img { transform: scale(1.05); }
.dowork-card h3 { font-size: var(--fs-medium); line-height: 1.18; margin: 0 0 .45em; transition: color .25s ease; }
.dowork-card:hover h3 { color: var(--gold-ink); }
.dowork-card p { color: var(--ink-soft); margin: 0; font-size: var(--fs-base); text-align: left; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 900px) { .dowork-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-l) var(--sp-m); } }
@media (max-width: 560px) { .dowork-grid { grid-template-columns: 1fr; } }
.service-list { list-style: none; margin: 0; padding: 0; }
.service-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l);
  padding: var(--sp-l) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.service-row h3 { font-size: var(--fs-large); line-height: 1.15; margin: 0; }
.service-row p { color: var(--ink-soft); margin: 0; max-width: 50ch; }

/* ---------- Work ---------- */
.work { padding-bottom: var(--sp-xxxl); }
/* Match the work header to the image grid below so the intro starts at the right image's edge. */
.work .section-head { display: block; margin-bottom: var(--sp-xl); }
.work .section-intro { margin-top: .7em; max-width: none; white-space: nowrap; }
@media (max-width: 820px) { .work .section-intro { white-space: normal; } }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-l); }
.work-item { display: block; grid-column: span 2; }
.work-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--sp-m); }
.work-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.work-item:hover .work-media img { transform: scale(1.05); }
.work-tag {
  position: absolute; top: 16px; left: 16px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(12,26,58,.82); color: var(--on-dark);
  padding: 5px 11px; border-radius: 4px;
}
.work-client { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .7em; }
.work-item h3 { font-size: var(--fs-large); line-height: 1.15; margin: 0 0 .5em; transition: color .25s ease; }
.work-item:hover h3 { color: var(--gold-ink); font-weight: 600; }
.work-desc { color: var(--ink-soft); margin: 0; }

/* ---------- Video feature band ---------- */
.feature { padding: var(--sp-xxl) 0; }
.feature-frame {
  position: relative; min-height: clamp(320px, 44vw, 560px);
  display: flex; align-items: center; overflow: hidden;
  color: var(--on-dark);
  background: var(--navy) url("assets/feature.webp") center / cover no-repeat;
}
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.feature-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,26,58,.86), rgba(12,26,58,.55)); }
.feature-content { position: relative; z-index: 2; padding: 0 clamp(28px, 6vw, 72px); }
.feature-line { font-family: var(--serif); font-weight: 500; font-size: var(--fs-xlarge); line-height: 1.14; max-width: 22ch; margin: 0; }

/* ---------- About ---------- */
.about { padding: var(--sp-xxxl) 0; background: var(--paper-2); }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-xl); align-items: center; }
.about-figure { aspect-ratio: 3 / 4; overflow: hidden; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-title { font-size: var(--fs-xlarge); line-height: 1.12; margin: 0 0 .7em; }
.about-main p { font-size: var(--fs-medium); color: var(--ink-soft); line-height: 1.5; }
.about-main p:last-child { margin-bottom: 0; }

/* ---------- Insights ---------- */
.insights { padding: var(--sp-xxxl) 0; }
.insights .section-head { display: block; margin-bottom: var(--sp-xl); }
.insights .section-intro { margin-top: .7em; max-width: none; white-space: nowrap; }
@media (max-width: 820px) { .insights .section-intro { white-space: normal; } }
.insight-more { margin-top: var(--sp-xl); padding-top: var(--sp-l); border-top: 1px solid var(--line); text-align: center; }
.more-link { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-medium); font-family: var(--serif); color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 4px; transition: color .2s ease; }
.more-link span { transition: transform .2s ease; }
.more-link:hover { color: var(--gold-ink); }
.more-link:hover span { transform: translateX(4px); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.insight-item { display: block; }
.insight-thumb { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--sp-m); }
.insight-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.insight-item:hover .insight-thumb img { transform: scale(1.05); }
.insight-kind { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.insight-item h3 { font-size: var(--fs-medium); line-height: 1.2; margin: .8em 0 .4em; transition: color .25s ease; }
.insight-item:hover h3 { color: var(--gold-ink); font-weight: 600; }
.insight-item p { color: var(--ink-soft); margin: 0; font-size: var(--fs-base); }

/* ---------- Contact ---------- */
.contact { background: var(--navy); color: var(--on-dark); padding: var(--sp-xxxl) 0; }
.contact .eyebrow { color: var(--gold); }
/* Equal columns with the same gap as the case/work image grids, so the right column starts at the image's left edge. */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 var(--sp-l); align-items: start; }
.contact-title { font-size: var(--fs-xxlarge); line-height: 1.04; margin: -0.18em 0 0; color: var(--on-dark); max-width: 18ch; }
.contact-side p { font-size: var(--fs-medium); color: rgba(239,233,220,.78); line-height: 1.5; max-width: 54ch; }
.contact-meta { font-size: var(--fs-base) !important; color: rgba(239,233,220,.6) !important; }
.contact-side .btn { background: var(--gold); color: var(--navy); margin-top: .6em; }
.contact-side .btn:hover { background: var(--on-dark); color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { padding: var(--sp-xl) 0; background: var(--navy); color: var(--on-dark); }
/* Footer: logo and strapline on one row (logo left, strapline beside), then nav/social, then copyright/legal. */
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-l); flex-wrap: wrap; padding-bottom: var(--sp-m); border-bottom: 1px solid rgba(241,236,222,.16); }
.footer-news { max-width: 460px; }
.signup-inline { font-family: var(--serif); font-weight: 500; font-size: var(--fs-medium); line-height: 1.2; color: var(--on-dark); margin: 0 0 .6em; }
.footer-brand { flex: none; line-height: 0; }
.footer-brand .brand-mark { width: 52px; height: 52px; }
.footer-strap { font-family: var(--serif); font-weight: 500; font-size: var(--fs-medium); line-height: 1.2; color: var(--on-dark); margin: 0; white-space: nowrap; }
.footer-mid { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-l); flex-wrap: wrap; padding: var(--sp-l) 0; }
.footer-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-l); }
.footer-nav a { font-size: var(--fs-small); color: rgba(241,236,222,.82); transition: color .2s ease; }
.footer-nav a:hover { color: var(--gold); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold); border: 1px solid rgba(168,127,42,.65);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-legalbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-m) var(--sp-l); flex-wrap: wrap; }
.footer-brand { font-size: 1.7rem; }
.footer-word { font-family: var(--serif); font-weight: 600; color: var(--gold); }
.footer-end { display: flex; align-items: center; gap: var(--sp-m) var(--sp-l); flex-wrap: wrap; }
.footer-copy { margin: 0; font-size: var(--fs-small); color: rgba(241,236,222,.55); max-width: 62ch; line-height: 1.5; }
.footer-legal { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-m) var(--sp-l); }
.footer-legal a { font-size: var(--fs-small); color: rgba(241,236,222,.72); transition: color .2s ease; }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Cap-top alignment for two-column heading/paragraph rows ----------
   Trims the leading above the first line to the cap height, so a large serif
   heading and a small sans paragraph line up at the top at every viewport. */
.section-title, .section-intro,
.service-row h3, .service-row p,
.statement-lead, .statement-body,
.case-body h2, .case-body > p:first-of-type {
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  text-box: trim-start cap alphabetic;
}

/* ---------- Active nav (current page) ---------- */
.nav a.is-active { color: var(--gold); font-style: italic; background-size: 100% 2px; }

/* ---------- Inner page head ---------- */
.page-head { padding: calc(var(--sp-xxl) + 1rem) 0 var(--sp-xl); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: var(--fs-xxlarge); line-height: 1.04; margin: 0 0 .35em; max-width: 18ch; }
.page-lead { font-size: var(--fs-medium); color: var(--ink-soft); max-width: 54ch; margin: 0; line-height: 1.45; }

/* ---------- Work detail (case rows) ---------- */
.cases { padding: var(--sp-xxl) 0; }
.case-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: center; padding: var(--sp-xl) 0; border-bottom: 1px solid var(--line); }
.case-row:last-of-type { border-bottom: 0; }
.case-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.case-row:hover .case-media img { transform: scale(1.04); }
.case-row:nth-child(even) .case-media { order: 2; }
.case-client { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .7em; }
.case-body h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0 0 .5em; transition: color .25s ease; }
.case-row:hover .case-body h2 { color: var(--gold-ink); font-weight: 600; }
.case-body p { color: var(--ink-soft); margin: 0 0 1em; }
.case-body p:last-child { margin-bottom: 0; }

/* ---------- About page extras ---------- */
.about-page-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start; padding-top: var(--sp-xxl); padding-bottom: var(--sp-xxl); }
/* About page contact band: match the principles columns so its text lines up with the blocks above. */
.contact--text .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); }
.principles { padding: var(--sp-xxl) 0; background: var(--paper-2); }

/* ---------- Contact page ---------- */
.contact-page { padding: var(--sp-xxl) 0; }
.contact-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-xl); align-items: start; }
@media (max-width: 760px) { .contact-cols { grid-template-columns: 1fr; gap: var(--sp-l); } }
.contact-details { text-align: left; }
.contact-details p { color: var(--ink-soft); margin: 0 0 1.6em; max-width: 34ch; }
.contact-details .label { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .4em; }
.contact-details a.line { color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s ease; }
.contact-details a.line:hover { border-color: var(--gold); }
.contact-form { display: grid; gap: var(--sp-m); }
.field label { display: block; font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5em; }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); padding: .8em 1em; background: #fff; border: 1px solid var(--line); border-radius: 5px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-ink); }
.form-note { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.form-status { font-size: var(--fs-small); line-height: 1.5; margin: 0; min-height: 1.4em; }
.form-status.ok { color: var(--gold-ink); }
.form-status.err { color: #a4302c; }
button.btn { border: 0; cursor: pointer; }
button.btn:disabled { opacity: .6; cursor: default; }

/* ---------- Services / packages ---------- */
.packages { padding: var(--sp-xxl) 0 var(--sp-xxxl); }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.package-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-l); background: var(--paper); transition: border-color .25s ease, transform .25s ease; }
.package-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.pk-num { font-family: var(--serif); font-size: var(--fs-small); color: var(--gold-ink); letter-spacing: .12em; }
.package-card h3 { font-size: var(--fs-medium); line-height: 1.18; margin: .5em 0 .5em; }
.package-card > p { color: var(--ink-soft); margin: 0 0 1.2em; flex: 1; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.package-card > .pk-price { flex: 0 0 auto; margin-top: auto; }
.pk-price { font-family: var(--serif); font-weight: 500; font-size: var(--fs-large); color: var(--ink); line-height: 1; }
.pk-price small { display: block; font-family: var(--sans); font-size: var(--fs-small); color: var(--gold-ink); letter-spacing: .08em; text-transform: uppercase; margin-top: .6em; }
.packages-note { font-size: var(--fs-small); color: var(--ink-soft); margin: var(--sp-l) 0 0; max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .packages-note { white-space: normal; } }
.beyond { background: var(--paper-2); padding: var(--sp-xxl) 0; }
.beyond-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start; }
.beyond-grid h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0; }
.beyond-grid p { color: var(--ink-soft); margin: 0 0 1em; }
@media (max-width: 900px) { .package-grid { grid-template-columns: 1fr 1fr; } .beyond-grid { grid-template-columns: 1fr; } .howwork-grid { grid-template-columns: 1fr; gap: var(--sp-l); } }
@media (max-width: 600px) { .package-grid { grid-template-columns: 1fr; } }

/* ---------- Services: trust line, package framing, how we work, FAQ ---------- */
.head-trust { font-size: var(--fs-base); color: var(--gold-ink); margin: var(--sp-m) 0 0; max-width: 64ch; line-height: 1.5; }
/* Services intro: widen the measure so the copy fills more of the page. */
.page-head--wide .page-lead { max-width: 80ch; }
.page-head--wide .head-trust { max-width: 80ch; }
.page-head--wide h1 { max-width: 22ch; }
/* Founder note: a signed first-person statement on the About page. */
.founder-note { padding: 0 0 var(--sp-xxl); }
.founder-quote { max-width: 62ch; margin: 0; border-left: 3px solid var(--gold); padding-left: var(--sp-l); }
.founder-quote p { font-family: var(--serif); font-style: italic; font-size: var(--fs-medium); line-height: 1.5; color: var(--ink); margin: 0 0 1em; }
.founder-quote cite { display: block; margin-top: .5em; font-family: var(--sans); font-style: normal; font-weight: 600; font-size: var(--fs-base); letter-spacing: .02em; color: var(--gold-ink); }
.package-card .pk-for { flex: 0 0 auto; font-family: var(--serif); font-style: italic; font-size: var(--fs-medium); color: var(--ink); margin: 0 0 .8em; line-height: 1.25; }
.howwork { padding: var(--sp-xxl) 0; }
.howwork-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: start; }
.howwork-head .section-intro { margin-top: .5em; max-width: none; }
.howwork-body { max-width: none; }
.howwork-body p { color: var(--ink-soft); margin: 0 0 1em; }
.howwork-body p:last-child { margin-bottom: 0; }
.faq { background: var(--paper-2); padding: var(--sp-xxl) 0; }
.faq-list { margin-top: var(--sp-l); display: grid; gap: var(--sp-l); max-width: none; }
.faq-item h3 { font-size: var(--fs-medium); line-height: 1.2; margin: 0 0 .4em; }
.faq-item p { color: var(--ink-soft); margin: 0; text-align: left; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Related reading on articles ---------- */
.related { padding: var(--sp-xl) 0 var(--sp-xxl); border-top: 1px solid var(--line); }
.related-title { font-size: var(--fs-large); line-height: 1.15; margin: 0 0 var(--sp-l); }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.related-list a { font-family: var(--serif); font-size: var(--fs-medium); color: var(--ink); line-height: 1.2; display: inline-block; transition: color .25s ease; }
.related-list a:hover { color: var(--gold-ink); }
@media (max-width: 760px) { .related-list { grid-template-columns: 1fr; gap: var(--sp-m); } }

/* ---------- Article pages ---------- */
.article { padding: var(--sp-xl) 0 var(--sp-xxxl); }
.article-hero { height: clamp(240px, 40vw, 460px); overflow: hidden; margin-bottom: var(--sp-xl); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-layout { display: grid; grid-template-columns: 0.85fr 1.55fr; gap: var(--sp-xl); align-items: start; }
.article-meta { }
.article-stand { font-family: var(--serif); font-weight: 500; font-size: var(--fs-large); line-height: 1.2; color: var(--ink); margin: 0 0 var(--sp-l); }
.article-date { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 var(--sp-l); }
.share-label { display: block; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .8em; }
.article-share { display: block; }
.share-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: color .2s ease, border-color .2s ease; }
.share-ico:hover { color: var(--gold-ink); border-color: var(--gold); }
.article-body { max-width: 68ch; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: var(--sp-l); }
  .article-share { margin-bottom: var(--sp-l); }
}
.article-body h2 { font-size: var(--fs-large); line-height: 1.16; margin: 1.6em 0 .4em; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { color: var(--ink-soft); margin: 0 0 1.1em; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.article-body p:first-child { font-size: var(--fs-medium); color: var(--ink); }
.article-body a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.article-body a:hover { color: var(--gold-ink); }

/* ---------- Justified body copy ---------- */
.hero-sub, .page-lead, .statement-body, .section-intro,
.service-row p, .work-desc, .case-body p, .about-main p,
.insight-item p, .contact-side p,
.legal-body p, .legal-body li {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- Legal / policy pages ---------- */
.legal { padding: var(--sp-xxl) 0 var(--sp-xxxl); }
.legal-body { max-width: 74ch; }
.legal-body h2 { font-size: var(--fs-large); line-height: 1.15; margin: 2em 0 .5em; }
.legal-body h4 { font-size: var(--fs-base); font-weight: 600; color: var(--ink); margin: 1.4em 0 .3em; }

/* Bundled legal page: sticky contents nav beside the policy sections. */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-xl); align-items: start; }
.legal-toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; }
.legal-toc a { font-size: var(--fs-small); color: var(--ink-soft); border-left: 2px solid var(--line); padding: 4px 0 4px 14px; transition: color .2s ease, border-color .2s ease; }
.legal-toc a:hover { color: var(--gold-ink); border-color: var(--gold); }
.legal-section { padding: var(--sp-xl) 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-section > h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0 0 .2em; }
.legal-section > .legal-meta { font-size: var(--fs-small); color: var(--gold-ink); letter-spacing: .04em; margin: 0 0 1.4em; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--sp-m); margin-bottom: var(--sp-l); }
  .legal-toc a { border-left: 0; border-bottom: 2px solid var(--line); padding: 4px 0; }
}
.legal-body h3 { font-size: var(--fs-medium); line-height: 1.2; margin: 1.6em 0 .4em; color: var(--ink); }
.legal-body h2:first-child, .legal-body h3:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-soft); margin: 0 0 1.1em; }
.legal-body ul { color: var(--ink-soft); margin: 0 0 1.3em; padding-left: 1.2em; }
.legal-body li { margin: 0 0 .5em; }
.legal-body a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.legal-body a:hover { color: var(--gold-ink); }
.ptable-wrap { overflow-x: auto; margin: 0 0 1.6em; }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: .7em .9em; border-bottom: 1px solid var(--line); }
.ptable th { color: var(--ink); font-weight: 600; background: var(--paper-2); }
.ptable td { color: var(--ink-soft); }

/* ---------- Logo concepts grid ---------- */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-l); }
.logo-card { margin: 0; }
.logo-swatches { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.logo-swatch { display: flex; align-items: center; justify-content: center; padding: var(--sp-l); }
.logo-swatch svg { width: 96px; height: 96px; display: block; }
.logo-swatch.on-navy { background: var(--navy); }
.logo-swatch.on-cream { background: var(--paper); }
.logo-card figcaption { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); margin-top: .9em; }
@media (max-width: 700px) { .logo-grid { grid-template-columns: 1fr; } }

/* ---------- Policies index ---------- */
.policy-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.policy-list li { border-bottom: 1px solid var(--line); }
.policy-list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-l); padding: var(--sp-m) 0; transition: color .2s ease; }
.policy-list a:hover { color: var(--gold-ink); }
.policy-list h2 { font-size: var(--fs-large); line-height: 1.1; margin: 0; transition: color .2s ease; }
.policy-list a:hover h2 { color: var(--gold-ink); }
.policy-list .pl-note { color: var(--ink-soft); font-size: var(--fs-small); max-width: 36ch; text-align: right; }

/* ---------- Scroll-reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
.service-row:nth-child(2) { transition-delay: .06s; }
.service-row:nth-child(3) { transition-delay: .12s; }
.service-row:nth-child(4) { transition-delay: .18s; }
.work-item:nth-child(2) { transition-delay: .1s; }
.insight-item:nth-child(2) { transition-delay: .08s; }
.insight-item:nth-child(3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .feature-video { display: none; }
  .work-media img, .insight-thumb img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .header-inner { display: flex; justify-content: space-between; align-items: center; height: 86px; }
  .nav, .header-end { display: none; }
  .nav-toggle { display: flex; }
  body.nav-open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 74px 0 auto 0; background: var(--navy);
    border-bottom: 1px solid rgba(168,127,42,.28); padding: 8px var(--gut) 20px;
  }
  body.nav-open .nav a { padding: 14px 0; border-bottom: 1px solid rgba(241,236,222,.16); font-size: 1.1rem; color: var(--on-dark); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .statement-grid, .section-head, .service-row, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
  .work-grid { grid-template-columns: 1fr; }
  .work-item { grid-column: auto; }
  .case-row { grid-template-columns: 1fr; gap: var(--sp-l); }
  .case-row:nth-child(even) .case-media { order: 0; }
  .insight-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--sp-m); }
  .hero-foot { flex-direction: column; align-items: flex-start; }
}

/* Below the width where the strapline fits on one line, let it wrap and shrink. */
@media (max-width: 760px) {
  .footer-top { flex-wrap: wrap; }
  .footer-strap { white-space: normal; }
}

/* ---------- Section headings: gold underline grows left to right on hover ---------- */
.section-title, .dowork-card h3 {
  width: fit-content;
  max-width: 100%;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 6px;
  transition: background-size .4s ease, color .25s ease;
}
.section-title:hover, .dowork-card:hover h3 {
  color: var(--gold-ink);
  background-size: 100% 2px;
}

/* ---------- Card headings: gold underline grows under every wrapped line ---------- */
.insight-item h3 .hl, .news-card h3 .hl, .work-item h3 .hl, .case-body h2 .hl {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size .4s ease;
}
.insight-item:hover h3 .hl, .news-card:hover h3 .hl,
.work-item:hover h3 .hl, .case-row:hover .case-body h2 .hl {
  background-size: 100% 2px;
}
.news-card:hover h3 { color: var(--gold-ink); }

/* ---------- Insights pagination ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: var(--sp-xl); }
.pager button { font: inherit; font-size: var(--fs-small); cursor: pointer; background: none; color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.pager-num { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); }
.pager-num:hover { border-color: var(--gold); color: var(--gold-ink); }
.pager-num.is-current { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.pager-step { height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--gold); color: var(--ink); }
.pager-step:hover:not(:disabled) { background: var(--gold); color: var(--navy); }
.pager-step:disabled { opacity: .35; cursor: default; border-color: var(--line); }

/* ---------- News from the firm ---------- */
.news { padding: var(--sp-xxl) 0 var(--sp-xxxl); border-top: 1px solid var(--line); }
.news .section-head { display: block; margin-bottom: var(--sp-xl); }
.news .section-intro { margin-top: .6em; max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .news .section-intro { white-space: normal; } }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
.news-card { margin: 0; }
.news-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; margin-bottom: var(--sp-m); background: var(--navy); }
.news-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.news-mark { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; }
.news-mark svg { width: 100%; height: 100%; display: block; }
.news-tag { position: absolute; left: 14px; bottom: 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: rgba(12,26,58,.82); color: var(--on-dark); padding: 5px 11px; border-radius: 4px; }
.news-card h3 { font-size: var(--fs-medium); line-height: 1.18; margin: 0 0 .4em; }
.news-card p { color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ---------- Optical left edge: hang serif headings to the content edge ---------- */
.hero-title, .page-head h1, .section-title, .contact-title, .statement-lead, .beyond-grid h2 {
  margin-left: -0.13em;
}

/* ---------- Cookie consent ---------- */
.cookie-fab {
  position: fixed; left: 14px; bottom: 16px; z-index: 90;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); border: 1.5px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(12,26,58,.28); transition: transform .2s ease;
}
.cookie-fab:hover { transform: translateY(-2px); }
.cookie-fab svg { width: 15px; height: 15px; display: block; }
.cookie-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
  width: min(440px, 100vw); height: 100%; overflow-y: auto;
  background: var(--navy); color: var(--on-dark);
  border-right: 1px solid rgba(168,127,42,.40);
  box-shadow: 0 0 60px rgba(0,0,0,.45);
  padding: var(--sp-xl) var(--sp-l);
  display: none;
}
.cookie-panel.is-open { display: block; }
.cookie-panel h2 { font-size: var(--fs-large); line-height: 1.18; margin: 0 0 .6em; color: var(--on-dark); }
.cookie-panel p { font-size: var(--fs-small); color: rgba(241,236,222,.78); margin: 0 0 1em; line-height: 1.55; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 var(--sp-l); }
.cookie-btn {
  font-size: var(--fs-small); font-weight: 500; padding: .8em 1.2em; border-radius: 5px;
  border: 1px solid var(--gold); background: var(--gold); color: var(--navy); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cookie-btn.ghost { background: transparent; color: var(--on-dark); border-color: rgba(241,236,222,.45); }
.cookie-btn:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }
.cookie-cat {
  border-top: 1px solid rgba(241,236,222,.16); padding: var(--sp-m) 0;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center;
}
.cookie-cat h3 { font-size: var(--fs-medium); margin: 0; color: var(--on-dark); }
.cookie-cat p { grid-column: 1 / -1; margin: 0; }
.cookie-state { font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.cookie-control { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; }
.cookie-onoff { font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: rgba(241,236,222,.7); }
.cookie-switch {
  width: 52px; height: 28px; border-radius: 14px; border: 1px solid rgba(241,236,222,.3);
  background: rgba(241,236,222,.18); position: relative; cursor: pointer; padding: 0; flex: none;
  transition: background .2s ease, border-color .2s ease;
}
.cookie-switch[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
.cookie-switch .knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .2s ease;
}
.cookie-switch[aria-pressed="true"] .knob { transform: translateX(24px); }
.cookie-save { margin-top: var(--sp-m); }
.cookie-link { color: var(--gold); text-decoration: underline; }
.article-body a.cookie-link { color: var(--gold-ink); text-decoration: none; }
.article-body a.cookie-link:hover { color: var(--ink); }
@media (max-width: 560px) { .cookie-fab { left: 12px; bottom: 12px; } }

/* ---------- Skip link and screen-reader utility ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: var(--navy); padding: .7em 1.2em; border-radius: 0 0 6px 0; font-size: var(--fs-small); font-weight: 600; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Footer newsletter and company details ---------- */
.footer-signup { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-l); flex-wrap: wrap; padding: var(--sp-m) 0; border-bottom: 1px solid rgba(241,236,222,.16); }
.signup-title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-medium); color: var(--on-dark); margin: 0 0 .25em; }
.signup-note { font-size: var(--fs-small); color: rgba(241,236,222,.62); margin: 0; max-width: 48ch; }
.signup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form input { background: rgba(241,236,222,.08); border: 1px solid rgba(241,236,222,.3); color: var(--on-dark); border-radius: 5px; padding: .75em 1em; font: inherit; font-size: var(--fs-small); min-width: 240px; }
.signup-form input::placeholder { color: rgba(241,236,222,.45); }
.signup-form .btn { background: var(--gold); color: var(--navy); }
.signup-form .btn:hover { background: var(--on-dark); color: var(--navy); }
.signup-done { font-size: var(--fs-small); color: var(--gold); margin: 0; }
.signup-done a { color: var(--on-dark); text-decoration: underline; }
.signup-done a:hover { color: var(--gold); }
.footer-company { margin: .6em 0 0; font-size: var(--fs-small); color: rgba(241,236,222,.5); max-width: 60ch; line-height: 1.5; }

/* ---------- Contact form: consent and spam trap ---------- */
.field-check { display: flex; gap: 12px; align-items: flex-start; }
.field-check input { margin-top: .1em; flex: none; width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.field-check label { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; cursor: pointer; }
.field-check a { color: var(--gold-ink); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Not found page ---------- */
.notfound { padding: var(--sp-xxxl) 0; }
.notfound .eyebrow { color: var(--gold-ink); }
.notfound h1 { font-size: var(--fs-xlarge); margin: 0 0 .5em; }
.notfound p { color: var(--ink-soft); max-width: 52ch; margin: 0 0 var(--sp-l); }

/* ---------- Cross-page transitions ----------
   Disabled: the navigation view transition scaled the header wordmark
   when the logo was clicked, which read as a glitch. */
@view-transition { navigation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Extra staggered reveals ---------- */
.dowork-card:nth-child(2) { transition-delay: .06s; }
.dowork-card:nth-child(3) { transition-delay: .12s; }
.dowork-card:nth-child(4) { transition-delay: .18s; }
.package-card:nth-child(2) { transition-delay: .06s; }
.package-card:nth-child(3) { transition-delay: .12s; }
.faq-item:nth-child(2) { transition-delay: .05s; }
.faq-item:nth-child(3) { transition-delay: .1s; }

/* ---------- AI readiness assessment ---------- */
.assess-section { padding: var(--sp-l) 0 var(--sp-xxl); }
.assess-list { list-style: none; margin: 0 0 var(--sp-l); padding: 0; display: grid; gap: var(--sp-l); max-width: 760px; }
.assess-q { border-top: 1px solid var(--line); padding-top: var(--sp-m); }
.assess-qtext { font-family: var(--serif); font-size: var(--fs-medium); color: var(--ink); margin: 0 0 .8em; line-height: 1.25; }
.assess-opts { display: grid; gap: 10px; }
.assess-opt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--ink-soft); cursor: pointer; }
.assess-opt input { flex: none; width: 18px; height: 18px; accent-color: var(--gold-ink); }
.assess-result { max-width: 760px; margin-top: var(--sp-l); padding: var(--sp-l); border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.assess-result h2 { font-size: var(--fs-large); margin: 0 0 .3em; display: flex; align-items: center; gap: .5em; line-height: 1.15; }
.assess-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; }
.assess-dot.early { background: #b4532e; }
.assess-dot.developing { background: var(--gold); }
.assess-dot.ready { background: #3f7a52; }
.assess-score { font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 1em; }
.assess-result p { color: var(--ink-soft); margin: 0 0 1em; }
.assess-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-m); }
.assess-actions .hero-ghost { border-color: var(--ink); color: var(--ink); }
.assess-actions .hero-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Assistant widget ---------- */
.assistant-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--navy); border: none; border-radius: 30px; padding: .7em 1.1em; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(12,26,58,.28); transition: transform .2s ease; }
.assistant-fab:hover { transform: translateY(-2px); }
.assistant-panel { position: fixed; right: 20px; bottom: 84px; z-index: 95; width: min(380px, calc(100vw - 40px)); max-height: 72vh; display: none; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(12,26,58,.3); overflow: hidden; }
.assistant-panel.is-open { display: flex; }
.assistant-head { background: var(--navy); color: var(--on-dark); padding: var(--sp-m); }
.assistant-head h2 { font-size: var(--fs-medium); margin: 0 0 .2em; color: var(--on-dark); }
.assistant-head p { font-size: var(--fs-small); color: rgba(241,236,222,.72); margin: 0; }
.assistant-body { padding: var(--sp-m); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.assistant-msg { font-size: var(--fs-small); line-height: 1.5; padding: .7em .9em; border-radius: 10px; max-width: 90%; }
.assistant-msg.bot { background: var(--paper-2); color: var(--ink); align-self: flex-start; }
.assistant-msg.you { background: var(--navy); color: var(--on-dark); align-self: flex-end; }
.assistant-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--sp-m) var(--sp-m); }
.assistant-chip { font-size: var(--fs-small); border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 20px; padding: .45em .9em; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.assistant-chip:hover { border-color: var(--gold); color: var(--gold-ink); }
@media (max-width: 560px) { .assistant-panel { right: 12px; left: 12px; width: auto; } }

/* ---------- Readiness check call-to-action band ---------- */
.assess-cta { background: var(--paper-2); padding: var(--sp-xl) 0; }
.assess-cta-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 var(--sp-l); align-items: start; }
.assess-cta-inner > .eyebrow { grid-column: 1 / -1; }
.assess-cta-inner > .section-title { margin-top: 0.20em; }
.contact-grid > .eyebrow { grid-column: 1 / -1; }
.assess-cta-side p { color: var(--ink-soft); margin: 0 0 var(--sp-m); }
@media (max-width: 760px) { .assess-cta-inner { grid-template-columns: 1fr; } }

/* ---------- Services: stack section heads, two-column FAQ ---------- */
.howwork .section-head, .faq .section-head { display: block; margin-bottom: var(--sp-l); }
.howwork .section-intro, .faq .section-intro { margin-top: .6em; max-width: none; }
.faq-item { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-l); align-items: baseline; }
.faq-item h3 { margin: 0; }
@media (max-width: 760px) { .faq-item { grid-template-columns: 1fr; gap: .5em; } }

/* ---------- Newsletter band (Insights page) ---------- */
.newsletter-band { background: var(--paper-2); padding: var(--sp-xl) 0; }
.newsletter-band .section-title { margin: 0 0 .3em; }
.newsletter-note { color: var(--ink-soft); margin: 0 0 var(--sp-m); max-width: 58ch; }
.newsletter-band .signup-form input { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.newsletter-band .signup-form input::placeholder { color: var(--ink-soft); }
.newsletter-band .signup-done { color: var(--gold-ink); }

/* Free readiness-check package card */
.package-card.pk-free { border-color: var(--gold); }
.pk-price small { display: block; }

/* Footer brand roundel beside copyright */
.footer-id { display: flex; align-items: center; gap: 14px; }
.footer-brand { line-height: 0; display: inline-flex; }
.footer-brand .brand-mark { width: 46px; height: 46px; display: block; }

/* ---------- AI for law firms guide hub ---------- */
.guide-hub { padding: var(--sp-xxl) 0; }
.hub-section { margin-bottom: var(--sp-xl); max-width: 75ch; }
.hub-section h2 { font-size: var(--fs-xlarge); line-height: 1.1; margin: 0 0 .4em; }
.hub-intro { color: var(--ink-soft); margin: 0 0 1.1em; max-width: 62ch; }
.hub-list { list-style: none; margin: 0 0 .5em; padding: 0; }
.hub-list li { padding: .55em 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); line-height: 1.55; }
.hub-list li:last-child { border-bottom: none; }
.hub-list a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
.hub-list a:hover { color: var(--gold-ink); }