@charset "UTF-8";
/* === tokens.scss === */
/* Pellican and Hart theme. PageMotor 0.8.3b. */
/* GRT bridge: Design Options take priority, source design values fall back. */
:root {
  /* ---- GRT typographic scale ---- */
  --f1: 47px;
  --f2: 37px;
  --f3: 29px;
  --f4: 23px;
  --f5: 18px;
  --f6: 14px;
  --g1: calc(73 / 47);
  --g2: calc(59 / 37);
  --g3: calc(47 / 29);
  --g4: calc(38 / 23);
  --g5: calc(31 / 18);
  --g6: calc(25 / 14);
  /* ---- GRT spacing scale ---- */
  --x1: 50px;
  --x2: 31px;
  --x3: 19px;
  --x4: 12px;
  --x5: 7px;
  --x6: 4px;
  /* ---- Golden ratio ---- */
  --phi: 1.61803398875;
  /* ---- Display sizes above 47px (analysis HR97-anchored) ---- */
  --f1-bigger: calc(var(--f5) * 4.6);
  --f1-biggest: calc(var(--f5) * 6.85);
  /* ---- Layout ---- */
  --w-content: 720px;
  --w-total: 1280px;
  --gutter-full: 32px;
  --gutter-mobile: 20px;
  /* ---- Section padding tokens (derived) ---- */
  --section-padding: calc(var(--x1) * var(--phi));
  /* ---- Fonts ---- */
  --font1: Crimson Pro;
  --font2: Inter Tight;
  --font-code: "Inter Tight", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ---- Style palette ---- */
  --bg1: #F5EFE3FF;
  --bg2: #E8E5DDFF;
  --c1: #1C1814FF;
  --c2: #5A554AFF;
  --ca: #A8884AFF;
  --border1: #D8D2C5FF;
  --border2: #B8B0A0FF;
  --border3: #8A8170FF;
  /* ---- Brand-specific secondary chromatic (non-bridged) ---- */
  /* secondary literal (PM does not expose as design opt) */
  --secondary: #5A6A82;
  /* ---- Auxiliary, non-bridged sans-serif (Inter Tight UI face) ---- */
  --font3: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* ---- Extended: callout palette ---- */
  --bg-callout: #FFFFFFFF;
  --bg-callout-alert: #FFFFFFFF;
  --bg-callout-note: #FFFFFFFF;
  --c-callout: hsl(158, 40%, 22%);
  --c-callout-alert: hsl(278, 35%, 28%);
  --c-callout-note: hsl(218, 38%, 26%);
  --p-callout: var(--x3);
  /* ---- Extended: button palette ---- */
  --bg-button: #FFFFFFFF;
  --c-button: #F5EFE3;
  --bg-button-save: #FFFFFFFF;
  --c-button-save: #F5EFE3;
  --bg-button-action: #FFFFFFFF;
  --c-button-action: #F5EFE3;
  --bg-button-update: #FFFFFFFF;
  --c-button-update: #F5EFE3;
  --bg-button-delete: #FFFFFFFF;
  --c-button-delete: #F5EFE3;
  --p-button-x: var(--x3);
  --p-button-y: var(--x4);
  /* ---- Extended: highlight ---- */
  --bg-highlight: #FFFFFFFF;
  /* ---- Extended: pre / code ---- */
  --bg-pre: #1C1814;
  --c-pre: #E8E5DD;
  /* ---- Extended: blockquote ---- */
  --bg-blockquote: transparent;
  --c-blockquote: var(--c1);
  --font-blockquote: var(--font2);
  /* ---- Extended: drop-cap, impact, caption, byline ---- */
  --c-drop-cap: var(--ca);
  --font-drop-cap: var(--font2);
  --c-impact: var(--c1);
  --font-impact: var(--font2);
  --c-caption: var(--c2);
  --font-caption: var(--font3);
  --c-byline: var(--c2);
  --font-byline: var(--font3);
  /* ---- Extended: heading / headline / title fonts ---- */
  --font-heading: var(--font2);
  --font-headline: var(--font2);
  --font-title: var(--font2);
}

/* === reset.scss === */
/* Reset and normalisation. */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal;
}

img, fieldset {
  border: 0;
}

abbr {
  text-decoration: none;
}

sub, sup {
  line-height: 0.5em;
  color: var(--c2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe, video, embed, object {
  display: block;
  max-width: 100%;
}

.left, .right, .center {
  display: block;
}

.center {
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

button, input[type=submit] {
  cursor: pointer;
  overflow: visible;
}

@media all and (min-width: 480px) {
  .left:not(.bar) {
    float: left;
    clear: both;
    margin-right: var(--x2);
  }
  .right:not(.bar) {
    float: right;
    clear: both;
    margin-left: var(--x2);
  }
}
/* === base.scss === */
/* Body and structural foundations. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font1);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c1);
  background-color: var(--bg1);
  font-feature-settings: "kern", "liga";
  font-optical-sizing: auto;
  overflow-x: hidden;
}

::selection {
  background: var(--ca);
  color: var(--bg1);
}

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--w-total);
  padding-left: var(--gutter-mobile);
  padding-right: var(--gutter-mobile);
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 720px) {
  .container {
    padding-left: var(--gutter-full);
    padding-right: var(--gutter-full);
  }
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.text {
  max-width: var(--w-content);
}

@media all and (min-width: 1024px) {
  :root {
    --section-padding: calc(var(--x1) * var(--phi) * 1.2);
  }
}
/* === typography.scss === */
/* Typography: base headings, paragraphs, links. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--c1);
  font-optical-sizing: auto;
  font-weight: normal;
}

h1 {
  font-size: var(--f1);
  line-height: var(--g1);
  font-weight: 500;
}

h2 {
  font-size: var(--f2);
  line-height: var(--g2);
  font-weight: 500;
}

h3 {
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
}

h4 {
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 600;
}

p {
  font-size: var(--f5);
  line-height: var(--g5);
  color: inherit;
}

a {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-color: var(--ca);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
a:hover {
  color: var(--ca);
  text-decoration-color: var(--ca);
}
a:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
}

hr {
  border: 0;
  border-top: var(--border1);
  margin: var(--x2) 0;
}

/* === page-content.scss === */
/* Page-content scoped styles (content-flow margins). */
.page-container, .headline-area, .page-content {
  display: flow-root;
}

.page-container + .page-container {
  margin-top: var(--x1);
}

.page-content h1 {
  margin-bottom: var(--x2);
}
.page-content h2 {
  margin-top: var(--x1);
  margin-bottom: var(--x3);
}
.page-content h3 {
  margin-top: var(--x2);
  margin-bottom: var(--x4);
}
.page-content h4 {
  margin-bottom: var(--x4);
}
.page-content h1 + h2, .page-content h2 + h3, .page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content hr + h2 {
  margin-top: 0;
}
.page-content > :last-child {
  margin-bottom: 0;
}
.page-content ul {
  list-style-type: disc;
}
.page-content ul, .page-content ol {
  margin-left: var(--x2);
  padding-left: var(--x2);
}
.page-content ul ul, .page-content ul ol, .page-content ol ul, .page-content ol ol {
  margin-top: var(--x4);
  margin-bottom: 0;
  margin-left: var(--x2);
}
.page-content li {
  margin-bottom: var(--x4);
}
.page-content li:last-child {
  margin-bottom: 0;
}
.page-content .callout > :last-child {
  margin-bottom: 0;
}
.page-content .caption {
  margin-top: var(--x4);
}
h1 + .page-content .caption, h2 + .page-content .caption {
  margin-top: var(--x4);
}
h3 + .page-content .caption {
  margin-top: var(--x4);
  margin-bottom: var(--x3);
}
.page-content p, .page-content ul, .page-content ol, .page-content blockquote, .page-content pre, .page-content img, .page-content figure, .page-content .callout, .page-content .caption {
  margin-bottom: var(--x2);
}
.page-content p:last-child, .page-content ul:last-child, .page-content ol:last-child, .page-content blockquote:last-child, .page-content pre:last-child, .page-content img:last-child, .page-content figure:last-child, .page-content .callout:last-child, .page-content .caption:last-child {
  margin-bottom: 0;
}
.page-content figure {
  margin-left: 0;
  margin-right: 0;
}
.page-content figcaption {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c2);
  margin-top: var(--x4);
}
.page-content .lead {
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c2);
}
@media all and (min-width: 480px) {
  .page-content h1 + .caption, .page-content h2 + .caption {
    margin-top: var(--x4);
  }
  .page-content h3 + .caption {
    margin-top: var(--x4);
  }
}

.page-title {
  font-family: var(--font-headline);
  font-weight: 500;
}
.page-title a {
  color: var(--c1);
}
.page-title a:hover {
  color: var(--ca);
}

.page-title:has(+ .byline) {
  margin-bottom: 0;
}

.byline {
  font-family: var(--font-byline);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c-byline);
  margin-bottom: var(--x2);
}

.page-content + .modular-content {
  margin-top: var(--x2);
}
.modular-content > :last-child {
  margin-bottom: 0;
}

/* === forms.scss === */
/* Forms: labels, inputs, fieldsets. */
label {
  display: block;
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c2);
  margin-bottom: var(--x5);
}
label .required {
  font-weight: normal;
  color: var(--ca);
}

input, textarea, select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font3);
  font-size: var(--f5);
  line-height: 1em;
  font-weight: inherit;
  padding: var(--x4) var(--x3);
  background: var(--bg1);
  color: var(--c1);
  border: var(--border2);
  border-radius: 0;
  margin-bottom: var(--x2);
}

input[type=checkbox], input[type=radio], input[type=image], input[type=submit], select {
  width: auto;
}

input[type=checkbox], input[type=radio] {
  display: inline-block;
}
input[type=checkbox] + label, input[type=radio] + label {
  display: inline;
  font-weight: normal;
  margin-left: var(--x6);
  user-select: none;
}

textarea {
  line-height: var(--g5);
  resize: vertical;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ca);
  outline-offset: 2px;
  border-color: var(--ca);
}

fieldset {
  border: var(--border1);
  padding: var(--x3) var(--x2);
  margin-bottom: var(--x2);
}

/* === buttons.scss === */
/* Buttons: base + variants. */
button, input[type=submit], .button {
  display: inline-block;
  width: auto;
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: top;
  color: var(--c-button);
  background-color: var(--bg-button);
  padding: var(--p-button-y) var(--p-button-x);
  border: 1px solid var(--bg-button);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
button:hover, button:active, input[type=submit]:hover, input[type=submit]:active, .button:hover, .button:active {
  text-decoration: none;
  background-color: var(--ca);
  color: var(--bg1);
  border-color: var(--ca);
}
button:focus-visible, input[type=submit]:focus-visible, .button:focus-visible {
  outline: 2px solid var(--ca);
  outline-offset: 3px;
}

button.save, .button.save {
  color: var(--c-button-save);
  background-color: var(--bg-button-save);
  border-color: var(--bg-button-save);
}
button.save:hover, button.save:active, .button.save:hover, .button.save:active {
  background-color: var(--ca);
  color: var(--bg1);
  border-color: var(--ca);
}
button.action, .button.action {
  color: var(--c-button-action);
  background-color: var(--bg-button-action);
  border-color: var(--bg-button-action);
}
button.action:hover, button.action:active, .button.action:hover, .button.action:active {
  background-color: var(--ca);
  color: var(--bg1);
  border-color: var(--ca);
}
button.update, .button.update {
  color: var(--c-button-update);
  background-color: var(--bg-button-update);
  border-color: var(--bg-button-update);
}
button.update:hover, button.update:active, .button.update:hover, .button.update:active {
  background-color: var(--ca);
  color: var(--bg1);
  border-color: var(--ca);
}
button.delete, .button.delete {
  color: var(--c-button-delete);
  background-color: var(--bg-button-delete);
  border-color: var(--bg-button-delete);
}
button.delete:hover, button.delete:active, .button.delete:hover, .button.delete:active {
  background-color: var(--ca);
  color: var(--bg1);
  border-color: var(--ca);
}
button.outline, .button.outline {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
button.outline:hover, button.outline:active, .button.outline:hover, .button.outline:active {
  background: currentColor;
  color: var(--c1);
  border-color: currentColor;
}
button svg, .button svg {
  vertical-align: inherit;
}

/* === callouts.scss === */
/* Callouts: default, alert, note. */
.callout {
  background-color: var(--bg-callout);
  color: var(--c-callout);
  font-size: var(--f5);
  line-height: var(--g5);
  padding: var(--p-callout);
  border-left: 3px solid var(--c-callout);
}
.callout.alert {
  background-color: var(--bg-callout-alert);
  color: var(--c-callout-alert);
  border-left-color: var(--c-callout-alert);
}
.callout.note {
  background-color: var(--bg-callout-note);
  color: var(--c-callout-note);
  border-left-color: var(--c-callout-note);
}

/* === primitives.scss === */
/* Formatting primitives: blockquote, code, kbd, pre, svg, .small, .highlight,
   .impact, .pop, .caption, .drop-cap. Aspect-ratio image utilities. */
blockquote {
  font-family: var(--font-blockquote);
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c-blockquote);
  background-color: var(--bg-blockquote);
  padding: 0 0 0 var(--x2);
  border-left: 2px solid var(--ca);
  font-style: normal;
}
blockquote > :last-child {
  margin-bottom: 0;
}

blockquote.pull-quote {
  font-family: var(--font2);
  font-style: italic;
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 400;
  border-left: 3px solid var(--ca);
  padding: var(--x4) 0 var(--x4) var(--x2);
  color: inherit;
}
blockquote.pull-quote > :last-child {
  margin-bottom: 0;
}

code, pre, kbd {
  font-family: var(--font-code);
}

code {
  font-size: 0.92em;
  line-height: inherit;
  background-color: var(--bg2);
  color: var(--c1);
  padding: 0.1em 0.3em;
  border-radius: 2px;
}
strong code {
  font-weight: normal;
}

pre {
  overflow: auto;
  word-wrap: normal;
  tab-size: 4;
  font-size: var(--f6);
  line-height: var(--g6);
  background-color: var(--bg-pre);
  color: var(--c-pre);
  padding: var(--x3) var(--x2);
  overflow-x: auto;
}
pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
}

kbd {
  font-size: var(--f6);
  line-height: var(--g6);
  color: #4e4e4e;
  background-color: #f7f7f7;
  padding: var(--x6) var(--x5);
  border: 1px solid #ccc;
  border-radius: var(--x5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px #fff inset;
}

svg {
  width: var(--f5);
  height: var(--f5);
  vertical-align: text-bottom;
}

.small {
  font-family: var(--font-caption);
  font-size: var(--f6);
  line-height: var(--g6);
  color: var(--c-caption);
}

.highlight {
  background-color: var(--bg-highlight);
  color: var(--c1);
  padding: 0 0.18em;
}

.impact {
  font-family: var(--font-impact);
  font-size: var(--f4);
  line-height: var(--g4);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-impact);
  font-feature-settings: "kern", "liga", "ss01";
}

.pop {
  font-style: italic;
  color: var(--ca);
  font-weight: 500;
}

.caption {
  font-family: var(--font-caption);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-caption);
}
.center + .caption {
  text-align: center;
}

.drop-cap {
  font-family: var(--font-drop-cap);
  font-size: calc(2 * var(--x2));
  line-height: 1em;
  font-weight: 600;
  color: var(--c-drop-cap);
  margin-right: var(--x5);
  margin-top: var(--x5);
  float: left;
}

@media all and (min-width: 480px) {
  .impact {
    font-size: var(--f3);
    line-height: var(--g3);
  }
}
/* Aspect-ratio image utilities. */
.aspect-16-9 {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.aspect-4-5 {
  aspect-ratio: 4/5;
  object-fit: cover;
}

.aspect-1-1 {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.aspect-3-2 {
  aspect-ratio: 3/2;
  object-fit: cover;
}

/* === skip-link.scss === */
/* Skip link (keyboard accessibility). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c1);
  color: var(--bg1);
  padding: var(--x4) var(--x3);
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--gutter-mobile);
  top: var(--gutter-mobile);
}

/* === visual-language.scss === */
/* Visual language: Crescent, Tower, Brass-rule SVG mark utilities. */
.mark-crescent,
.mark-tower,
.mark-rule {
  display: block;
  color: var(--c1);
}

.mark-crescent {
  width: 100%;
  height: auto;
  max-width: 720px;
}

.mark-tower {
  width: 100%;
  height: auto;
  max-width: 360px;
}

.mark-rule {
  width: 100%;
  height: auto;
  max-width: 320px;
  color: var(--ca);
}

.mark-crescent--small {
  max-width: 200px;
}

.mark-tower--small {
  max-width: 120px;
}

.mark-rule--short {
  max-width: 96px;
}

.mark-rule--inverted {
  color: var(--ca);
}

.mark-rule--cream {
  color: var(--bg1);
}

/* === wordmark.scss === */
/* Wordmark: 'Pellican & Hart' inline-flex with brass italic ampersand. */
.wordmark {
  font-family: var(--font2);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.wordmark .amp {
  font-style: italic;
  font-weight: 500;
  font-size: 1.12em;
  line-height: 1;
  color: var(--ca);
  display: inline-block;
}

/* === header.scss === */
/* Site header and primary nav. */
.site-header {
  background: var(--bg1);
  border-bottom: var(--border1);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--x2);
  padding-top: var(--x3);
  padding-bottom: var(--x3);
}
.site-header .wordmark {
  font-size: var(--f4);
  line-height: var(--g4);
}

.nav-list {
  list-style: none;
  margin: 0;
  margin-bottom: 0;
  padding: 0;
  display: none;
  align-items: center;
  gap: var(--x2);
}
.nav-list li {
  margin: 0;
}
.nav-list a {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c1);
  padding: var(--x5) 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease;
}
.nav-list a:hover, .nav-list a[aria-current=page] {
  color: var(--ca);
  border-bottom-color: var(--ca);
}
.nav-list.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg1);
  padding: var(--x3) var(--gutter-mobile);
  border-bottom: var(--border1);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: var(--border2);
  color: var(--c1);
  cursor: pointer;
  padding: 0;
  border-radius: 0;
}
.nav-toggle .bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle .bar::before, .nav-toggle .bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle .bar::before {
  top: -6px;
}
.nav-toggle .bar::after {
  top: 6px;
}

@media all and (min-width: 720px) {
  .nav-list {
    display: inline-flex;
  }
  .nav-toggle {
    display: none;
  }
}
/* === breadcrumbs.scss === */
/* Breadcrumbs trail. */
.breadcrumbs {
  border-bottom: var(--border1);
}
.breadcrumbs .container {
  padding-top: var(--x3);
  padding-bottom: var(--x3);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x4);
  list-style: none;
  margin: 0;
  margin-bottom: 0;
  padding: 0;
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.breadcrumbs li + li::before {
  content: "·";
  margin-right: var(--x4);
  color: var(--c2);
}
.breadcrumbs a {
  color: var(--c2);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--ca);
}
.breadcrumbs [aria-current=page] {
  color: var(--c1);
  font-weight: 500;
}

/* === kicker.scss === */
/* Kicker: monospaced uppercase tag with brass-dot prefix. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--x5);
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ca);
  border-radius: 50%;
  flex: 0 0 6px;
}

/* === hero.scss === */
/* Hero section: full-bleed photograph + thesis ladder. */
.hero {
  position: relative;
  background: var(--c1);
  color: var(--bg1);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
}
.hero .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 24, 20, 0.18) 0%, rgba(28, 24, 20, 0.62) 70%, rgba(28, 24, 20, 0.82) 100%);
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
.hero .kicker {
  color: var(--bg1);
  opacity: 0.78;
  margin-bottom: var(--x3);
}
.hero .kicker::before {
  background: var(--ca);
}
.hero h1 {
  color: var(--bg1);
  font-size: var(--f1-bigger);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 var(--x3) 0;
  max-width: var(--w-content);
}
.hero h1 .clause {
  display: block;
  font-style: italic;
  color: var(--ca);
  font-weight: 400;
}
.hero h1 .clause-final {
  display: block;
  font-weight: 500;
  font-style: normal;
  color: var(--bg1);
}
.hero .hero-rule {
  margin: var(--x2) 0 var(--x3) 0;
}
.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x3);
  align-items: center;
  margin-top: var(--x2);
}
.hero .hero-meta {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg1);
  opacity: 0.72;
}

@media all and (min-width: 1024px) {
  .hero h1 {
    font-size: var(--f1-biggest);
    line-height: 1.02;
  }
}
@media all and (max-width: 720px) {
  .hero {
    min-height: 88vh;
  }
  .hero h1 {
    font-size: calc(var(--f1) * 1.05);
    line-height: 1.08;
  }
}
/* === two-registers.scss === */
/* Two Registers signature section: Bath and London side by side. */
.two-registers {
  background: var(--bg1);
}
.two-registers .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x1);
}
.two-registers .register {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--x3);
  align-content: start;
}
.two-registers .register-mark {
  color: var(--c1);
  margin-bottom: var(--x3);
}
.two-registers .register h2 {
  font-size: var(--f2);
  line-height: var(--g2);
  font-weight: 500;
}
.two-registers .register .lead {
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c2);
  font-style: italic;
}
.two-registers .register .meta {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c2);
}

@media all and (min-width: 1024px) {
  .two-registers .container {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--x1) * 1.5);
    align-items: start;
  }
  .two-registers .register-bath .register-mark {
    max-width: 480px;
  }
  .two-registers .register-london .register-mark {
    max-width: 280px;
  }
}
/* === senior-partner.scss === */
/* Senior Partner dark band: portrait + italic pull-quote + body stack. */
.senior-partner {
  background: var(--c1);
  color: var(--bg1);
}
.senior-partner h2, .senior-partner h3, .senior-partner p {
  color: var(--bg1);
}
.senior-partner .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x1);
  align-items: start;
}
.senior-partner .portrait-frame {
  max-width: 480px;
}
.senior-partner .portrait-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.senior-partner .portrait-credit {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg1);
  opacity: 0.72;
  margin-top: var(--x4);
}
.senior-partner .pull-quote {
  color: var(--bg1);
  border-left-color: var(--ca);
}
.senior-partner .body-stack {
  display: grid;
  gap: var(--x3);
}
.senior-partner .body-stack p {
  color: var(--bg1);
  opacity: 0.92;
}

@media all and (min-width: 1024px) {
  .senior-partner .container {
    grid-template-columns: 5fr 7fr;
    gap: calc(var(--x1) * 1.2);
  }
}
/* === considered-counsel.scss === */
/* Considered Counsel section: video moment alongside body stack. */
.considered-counsel {
  background: var(--bg2);
}
.considered-counsel .container {
  display: grid;
  gap: var(--x2);
  grid-template-columns: 1fr;
  align-items: center;
}
.considered-counsel .video-frame {
  width: 100%;
  background: var(--c1);
}
.considered-counsel .video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.considered-counsel .body-stack {
  display: grid;
  gap: var(--x3);
}
.considered-counsel h2 {
  max-width: var(--w-content);
}

@media all and (min-width: 1024px) {
  .considered-counsel .container {
    grid-template-columns: 7fr 5fr;
    gap: var(--x1);
  }
}
/* === practice-areas.scss === */
/* Practice Areas: editorial vertical list with rule dividers. */
.practice-areas {
  background: var(--bg1);
}
.practice-areas h2 {
  margin-bottom: var(--x2);
}
.practice-areas .practice-list {
  list-style: none;
  margin: var(--x2) 0 0 0;
  padding: 0;
  border-top: var(--border1);
}
.practice-areas .practice-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x3);
  padding: var(--x2) 0;
  border-bottom: var(--border1);
  align-items: baseline;
}
.practice-areas .practice-row .area-name {
  font-family: var(--font2);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  color: var(--c1);
  margin: 0;
}
.practice-areas .practice-row .area-summary {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
  margin: 0;
}
.practice-areas .practice-row .area-link {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca);
  text-decoration: none;
  white-space: nowrap;
}
.practice-areas .practice-row .area-link:hover {
  color: var(--c1);
  border-bottom: 1px solid var(--ca);
}
.practice-areas .area-rule {
  grid-column: 1/-1;
  margin: 0;
}

@media all and (min-width: 720px) {
  .practice-areas .practice-row {
    grid-template-columns: 5fr 7fr auto;
    gap: var(--x2);
  }
}
@media all and (max-width: 720px) {
  .practice-areas .practice-row .area-link {
    padding-top: var(--x4);
  }
}
/* === locations.scss === */
/* Locations: full-bleed photo + two-office overlay. */
.locations {
  position: relative;
  background: var(--c1);
  color: var(--bg1);
  padding-top: 0;
  padding-bottom: 0;
}
.locations .locations-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.locations .container {
  padding-top: calc(var(--x1) * var(--phi));
  padding-bottom: calc(var(--x1) * var(--phi));
}
.locations h2 {
  color: var(--bg1);
  margin-bottom: var(--x3);
}
.locations .offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--x1);
}
.locations .office-card {
  display: grid;
  gap: var(--x4);
}
.locations .office-card .office-mark {
  color: var(--ca);
  margin-bottom: var(--x4);
}
.locations .office-card .office-name {
  font-family: var(--font2);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  color: var(--bg1);
  margin: 0;
}
.locations .office-card .office-meta {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg1);
  opacity: 0.78;
}
.locations .office-card .office-address {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--bg1);
  opacity: 0.92;
}

@media all and (min-width: 720px) {
  .locations .offices {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--x1) * 1.2);
  }
}
/* === insights-teasers.scss === */
/* Insights teasers: editorial list with date/title/summary rows. */
.insights-teasers {
  background: var(--bg1);
}
.insights-teasers h2 {
  margin-bottom: var(--x2);
}
.insights-teasers .teaser-list {
  list-style: none;
  margin: var(--x3) 0 0 0;
  padding: 0;
  display: grid;
  gap: var(--x2);
  border-top: var(--border1);
}
.insights-teasers .teaser {
  display: grid;
  gap: var(--x4);
  padding-top: var(--x2);
  padding-bottom: var(--x2);
  border-bottom: var(--border1);
}
.insights-teasers .teaser .teaser-meta {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c2);
}
.insights-teasers .teaser .teaser-title {
  font-family: var(--font2);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  color: var(--c1);
  margin: 0;
}
.insights-teasers .teaser .teaser-title a {
  color: inherit;
  text-decoration: none;
}
.insights-teasers .teaser .teaser-title a:hover {
  color: var(--ca);
}
.insights-teasers .teaser .teaser-summary {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--c2);
  margin: 0;
}

@media all and (min-width: 720px) {
  .insights-teasers .teaser {
    grid-template-columns: 5fr 7fr;
    align-items: baseline;
    gap: var(--x2);
  }
  .insights-teasers .teaser .teaser-meta {
    padding-top: 0.4em;
  }
}
/* === final-cta.scss === */
/* Final CTA on slate-blue secondary chromatic. */
.final-cta {
  background: var(--secondary);
  color: var(--bg1);
}
.final-cta h2, .final-cta p {
  color: var(--bg1);
}
.final-cta .container {
  display: grid;
  gap: var(--x2);
  justify-items: start;
}
.final-cta h2 {
  font-size: var(--f2);
  line-height: var(--g2);
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: var(--w-content);
}
.final-cta p {
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--bg1);
  opacity: 0.92;
  max-width: var(--w-content);
}
.final-cta .button {
  background-color: var(--bg1);
  color: var(--secondary);
  border-color: var(--bg1);
  margin-top: var(--x3);
}
.final-cta .button:hover, .final-cta .button:active {
  background-color: var(--ca);
  color: var(--c1);
  border-color: var(--ca);
}
.final-cta .cta-rule {
  margin-top: var(--x3);
}

@media (prefers-reduced-motion: no-preference) {
  .final-cta .button {
    animation: cta-pulse 3.4s ease-in-out infinite;
  }
}
@keyframes cta-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 239, 227, 0);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 239, 227, 0.18);
    transform: translateY(-2px);
  }
}
/* === page-template.scss === */
/* Shared interior templates: page-header (kicker, title, lead) and page-body. */
.page-header {
  background: var(--bg2);
  border-bottom: var(--border1);
}
.page-header .container {
  padding-top: calc(var(--x1) * 1.1);
  padding-bottom: calc(var(--x1) * 1.1);
}
.page-header .kicker {
  margin-bottom: var(--x3);
}
.page-header h1 {
  font-size: var(--f1);
  line-height: var(--g1);
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: var(--w-content);
  margin: 0 0 var(--x3) 0;
}
.page-header .lead {
  font-size: var(--f4);
  line-height: var(--g4);
  color: var(--c2);
  max-width: var(--w-content);
  font-style: italic;
}

.page-body {
  background: var(--bg1);
}
.page-body .container > .page-content {
  max-width: var(--w-content);
  margin-inline: 0;
}

/* === firm.scss === */
/* Firm template: partners block with group photograph. */
.partners-block {
  background: var(--bg1);
}
.partners-block .container {
  display: grid;
  gap: var(--x1);
  grid-template-columns: 1fr;
}
.partners-block h2 {
  margin-bottom: var(--x3);
}
.partners-block .partners-photo {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.partners-block .partners-photo-credit {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c2);
  margin-top: var(--x4);
}

/* === practice.scss === */
/* Practice Areas detail template.
   Inherits .practice-areas list, .page-header, .page-body, and the
   considered-counsel section as inline punctuation. No template-specific
   selectors required at this stage; placeholder reserved for future detail. */
/* === insights.scss === */
/* Insights long-form article template.
   The article body uses .page-content for content-flow margins, plus the
   formatting primitives partial for callouts, blockquote, pull-quote,
   .impact, .drop-cap, .pop, .highlight, pre, code, .small, .caption.
   No template-specific selectors required at this stage; placeholder
   reserved for future detail (subscription block bespoke layout, etc.). */
/* === contact.scss === */
/* Contact template: form layout + office summary. */
.contact-form-block {
  background: var(--bg1);
}
.contact-form-block .container {
  display: grid;
  gap: var(--x1);
  grid-template-columns: 1fr;
  align-items: start;
}
.contact-form-block .office-summary h3 {
  font-family: var(--font2);
  font-size: var(--f3);
  line-height: var(--g3);
  font-weight: 500;
  margin: 0 0 var(--x4) 0;
}
.contact-form-block .office-summary p {
  margin-bottom: var(--x3);
}
.contact-form-block .office-summary .meta {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c2);
}

@media all and (min-width: 1024px) {
  .contact-form-block .container {
    grid-template-columns: 1fr 1fr;
    gap: var(--x1);
  }
}
/* === error.scss === */
/* Error template (404 / 500).
   Inherits .page-header, .page-body, and the typography + buttons partials.
   No template-specific selectors required at this stage; placeholder
   reserved for future detail. */
/* === footer.scss === */
/* Site footer: institutional grid with footer wordmark and Crescent + Tower
   signature mark pair. */
.site-footer {
  background: var(--c1);
  color: var(--bg1);
  padding: calc(var(--x1) * 1.2) 0 var(--x2) 0;
}
.site-footer h3 {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg1);
  opacity: 0.65;
  margin: 0 0 var(--x3) 0;
}
.site-footer .container {
  display: grid;
  gap: var(--x1);
  grid-template-columns: 1fr;
}
.site-footer .footer-grid {
  display: grid;
  gap: var(--x1);
  grid-template-columns: 1fr;
}
.site-footer .footer-list {
  list-style: none;
  margin: 0;
  margin-bottom: 0;
  padding: 0;
}
.site-footer .footer-list li {
  margin: 0;
  padding: var(--x5) 0;
}
.site-footer .footer-list a {
  color: var(--bg1);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  border-bottom: 1px solid transparent;
  font-size: var(--f5);
  line-height: var(--g5);
  transition: color 200ms ease, text-decoration-color 200ms ease, border-color 200ms ease;
}
.site-footer .footer-list a:hover {
  color: var(--ca);
  text-decoration-color: var(--ca);
  border-bottom-color: var(--ca);
}
.site-footer .footer-address {
  font-size: var(--f5);
  line-height: var(--g5);
  color: var(--bg1);
  opacity: 0.86;
}
.site-footer .footer-meta {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg1);
  opacity: 0.6;
}
.site-footer .footer-wordmark {
  font-family: var(--font2);
  font-weight: 500;
  font-size: var(--f3);
  line-height: var(--g3);
  color: var(--bg1);
}
.site-footer .footer-wordmark .amp {
  color: var(--ca);
  font-style: italic;
  font-size: 1.15em;
  line-height: 1;
}
.site-footer .footer-signature {
  margin-top: var(--x2);
  display: flex;
  gap: var(--x3);
  align-items: center;
  border-top: 1px solid rgba(245, 239, 227, 0.18);
  padding-top: var(--x2);
}
.site-footer .footer-signature .mark-crescent {
  color: var(--ca);
  width: 160px;
}
.site-footer .footer-signature .mark-tower {
  color: var(--ca);
  width: 80px;
}
.site-footer .footer-signature .mark-rule {
  color: var(--ca);
  width: 60px;
}
.site-footer .copyright {
  font-family: var(--font3);
  font-size: var(--f6);
  line-height: var(--g6);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg1);
  opacity: 0.55;
  margin-top: var(--x2);
}

@media all and (min-width: 720px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--x1);
  }
}
/* === bleed.scss === */
/* Bleed sections.
   The full-bleed moments in this design (.hero, .two-registers,
   .locations, .final-cta, .site-footer) ride the .section / page-template
   padding tokens directly, so no shared .bleed* utility class is required
   at this stage. Placeholder reserved for future bleed-specific helpers
   (bleed-bg-l, bleed-text-l, etc.). */
/* === reveal.scss === */
/* Reveal-on-scroll (HR67), with prefers-reduced-motion respected. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }
  .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal[data-stagger="1"] {
    transition-delay: 80ms;
  }
  .reveal[data-stagger="2"] {
    transition-delay: 180ms;
  }
  .reveal[data-stagger="3"] {
    transition-delay: 280ms;
  }
  .reveal[data-stagger="4"] {
    transition-delay: 380ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}