:root {
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: Manrope, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

html {
  font-synthesis: none;
}

body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
}

button,
input,
select,
textarea {
  font-family: var(--sans);
}

h1,
h2,
h3,
blockquote {
  text-wrap: balance;
}

/* Header and slide-out navigation */
.desktop-nav a {
  font-family: var(--sans);
  font-weight: 600;
}

.brand-slogan {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}

.mobile-menu a {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
}

.mobile-menu a span {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mobile-menu button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Homepage wordmark. The elliptical rule is one continuous gold line:
   hairline-thin at both ends and gently fuller at its centre. */
body:has(.home-hero) .header-inner::after {
  content: "MASTER CRAFT" !important;
  display: block !important;
  width: max-content !important;
  min-width: 0 !important;
  margin-right: -.3em !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  color: #fffdf8 !important;
  background: radial-gradient(ellipse at center, rgba(215, 186, 120, .98) 0%, rgba(215, 186, 120, .9) 43%, rgba(215, 186, 120, .52) 70%, rgba(215, 186, 120, 0) 100%) center bottom / 100% 4px no-repeat;
  font-family: var(--serif) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .3em !important;
  text-indent: 0 !important;
  text-transform: uppercase;
  white-space: nowrap;
}

body:has(.home-hero) .header-inner::before {
  content: "™";
  position: absolute;
  z-index: 3;
  top: calc(50% - 24px);
  left: calc(50% + clamp(128px, 13.7vw, 176px));
  display: block !important;
  color: #fffdf8;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(8, 18, 16, .65);
  pointer-events: none;
}

body:has(.home-hero) .menu-button::before {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase;
}

/* Homepage hero */
.home-hero > h1.visually-hidden::before,
.home-hero > h1.visually-hidden::after {
  max-width: 14ch;
  font-family: var(--serif) !important;
  font-size: clamp(30px, 4.2vw, 58px) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: normal !important;
  text-shadow:
    0 0 1px rgba(8, 18, 16, .95),
    0 1px 3px rgba(8, 18, 16, .85),
    0 2px 10px rgba(8, 18, 16, .7),
    0 0 28px rgba(8, 18, 16, .55) !important;
}

.home-hero > h1.visually-hidden::before {
  color: #fffdf8 !important;
}

.home-hero > h1.visually-hidden::after {
  content: "Delivering Excellence." !important;
  color: #f5cf6e !important;
  font-style: italic;
  white-space: normal !important;
}

.home-hero-overlay::before {
  color: #d7ba78 !important;
  font-family: var(--serif) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.home-hero-overlay::after {
  color: #fffdf8 !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase;
}

.home-hero-actions .button {
  border: 1px solid rgba(255, 253, 248, .72);
  background: transparent;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Section hierarchy */
.section-head h2,
.testimonial-intro h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}

.section-head > div:last-child > p,
.section-head > p {
  max-width: 62ch;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: normal;
}

.kicker,
.founder-quote-tile figcaption,
.tower-card > span,
.project-meta,
.project-directory-copy > p:first-child,
.project-directory-copy small,
.career-value-grid article > span,
.privacy-grid aside p,
.privacy-copy > section > span {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.tower-card h3,
.project-card h3,
.project-directory-copy h2,
.completed-card .project-directory-copy h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: normal;
}

.tower-card p,
.project-card p,
.project-directory-copy > p:nth-of-type(2),
.career-value-grid p {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
}

.project-meta,
.project-directory-copy > p:first-child {
  font-size: 10.5px;
}

.project-meta span:first-child,
.project-directory-image > span {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.text-link,
.founder-vision-link,
.project-toolbar button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.founder-quote-tile blockquote,
.founder-message blockquote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 42px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: normal;
}

.quote-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}

.founder-quote-author-copy strong,
.founder-quote-author-copy span,
.founder-signature-copy strong,
.founder-signature-copy > span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-hero-content h1,
.about-story .editorial-copy h2,
.identity-copy h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: normal;
}

body:has(.career-values) .page-hero-content h1,
.career-values .editorial-copy h2,
.career-practice h2,
.application-section h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: normal;
}

.page-hero-content > p:last-child,
.editorial-copy .lead {
  max-width: 62ch;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: normal;
}

.mini-stats strong,
.completed-overview-grid strong {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.career-value-grid article > span {
  font-size: 12px;
  letter-spacing: .16em;
}

/* Buttons and forms */
.button,
.site-form button,
.enquiry-tabs button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-information dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.site-form label > span,
.enquiry-drawer .site-form label > span {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-form input,
.site-form select,
.site-form textarea {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: normal;
}

.icon-button {
  font-weight: 400;
}

/* Footer */
.footer-statement h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: normal;
}

.footer-columns h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.footer-columns a,
.footer-columns p {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
}

.footer-bottom {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
}

/* Floating controls */
.contact-dock {
  font-family: var(--sans);
}

.enquire-float {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.chat-symbol {
  color: #d7ba78;
  font-family: var(--sans);
  font-size: 17px;
}

.call-float {
  font-family: Arial, "Segoe UI Symbol", sans-serif;
  font-size: 21px;
}

@media (max-width: 560px) {
  body:has(.home-hero) .header-inner::after {
    display: block !important;
    margin-right: -.14em !important;
    padding-bottom: 8px !important;
    background-size: 100% 3px;
    font-size: 18px !important;
    letter-spacing: .14em !important;
  }

  body:has(.home-hero) .header-inner::before {
    top: calc(50% - 15px);
    left: calc(50% + 68px);
    font-size: 10px;
  }

  .mini-stats strong,
  .completed-overview-grid strong {
    font-size: 38px;
  }

  .enquire-float {
    font-size: 11px;
  }
}

