@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ElMessiri-Bold.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  scroll-behavior: auto;
}

[id] {
  scroll-margin-top: var(--space-7);
}

body {
  margin: 0;
  min-width: 100%;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
blockquote,
ol {
  margin-block-start: 0;
}

h1,
h2,
h3,
blockquote {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

h2 {
  font-size: clamp(2.45rem, 5vw, 4.5rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

h3 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

p,
li,
label,
input,
button,
summary,
a {
  font-size: var(--font-size-body);
}

p,
li {
  max-width: var(--measure-reading);
}

img,
picture {
  display: block;
  max-width: 100%;
}

a {
  color: var(--text-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

button,
input {
  color: inherit;
  font-family: inherit;
}

:focus-visible {
  outline: var(--focus-width) solid var(--border-focus);
  outline-offset: var(--focus-offset);
}

[hidden] {
  display: none !important;
}

.site-header,
.site-footer,
.section,
.error-main {
  margin-inline: auto;
  max-width: var(--layout-max);
}

.site-header {
  align-items: center;
  background: var(--surface-base);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--page-gutter);
}

.wordmark {
  align-items: center;
  display: inline-flex;
  min-height: var(--target-min);
  width: clamp(7.5rem, 13vw, 10.5rem);
}

.site-nav,
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.site-nav a,
.footer-nav a {
  align-items: center;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  min-height: var(--target-min);
  text-decoration: none;
}

.site-nav a:not(.nav-consultation),
.footer-nav a {
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current],
.footer-nav a:hover {
  border-bottom-color: var(--accent-primary);
}

.nav-consultation {
  display: none;
  text-decoration: none;
}

.sticky-consultation {
  bottom: var(--space-2);
  box-shadow: var(--elevation-overlay-shadow);
  left: var(--page-gutter);
  position: fixed;
  right: var(--page-gutter);
  text-decoration: none;
  z-index: 5;
}

.site-main {
  display: grid;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
}

.section {
  display: grid;
  gap: var(--space-4) var(--grid-gutter);
  overflow: hidden;
  padding: var(--space-5) var(--page-gutter);
  position: relative;
}

.hero-kicker,
.section-kicker {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.025em;
  margin-block-end: var(--space-2);
}

.hero-kicker {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3.25rem);
  line-height: 1;
}

.section-kicker {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
}

.section-kicker::before {
  background: var(--decorative-system);
  border-radius: 50%;
  content: "";
  height: 0.7rem;
  width: 0.7rem;
}

.position-section {
  align-items: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-container);
  min-height: min(47rem, calc(100svh - 7rem));
}

.position-section::before,
.position-section::after {
  border: 3px solid var(--accent-primary);
  border-color: var(--accent-primary) transparent transparent;
  border-radius: 50%;
  content: "";
  height: 5rem;
  pointer-events: none;
  position: absolute;
  width: 12rem;
}

.position-section::before {
  right: 8%;
  top: 13%;
  transform: rotate(-5deg);
}

.position-section::after {
  bottom: 5%;
  left: 3%;
  transform: rotate(165deg);
}

.position-copy {
  position: relative;
  z-index: 1;
}

.position-copy h1 {
  margin-block-end: var(--space-3);
}

.position-copy h1::after {
  background: var(--accent-primary);
  border-radius: var(--radius-control);
  content: "";
  display: block;
  height: 0.25rem;
  margin-block-start: var(--space-2);
  transform: rotate(-1deg);
  width: min(65%, 22rem);
}

.position-copy > p:last-child,
.mentoring-intro > p:last-child,
.consultation-section > p {
  font-size: var(--font-size-lead);
  line-height: 1.5;
}

.portrait-frame {
  display: block;
  overflow: hidden;
  width: 100%;
}

.portrait-frame img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.portrait-frame--hero {
  aspect-ratio: 4 / 5;
  border-radius: 48% 48% var(--radius-container) var(--radius-container);
  box-shadow: var(--elevation-raised-shadow);
  position: relative;
  z-index: 1;
}

.portrait-frame--about {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-container) 45% var(--radius-container)
    var(--radius-container);
  box-shadow: var(--elevation-raised-shadow);
}

.system-seam {
  display: none;
}

.integrated-section {
  background: var(--surface-elevated);
  border-radius: var(--radius-container);
}

.integrated-copy,
.about-copy,
.project-proof,
.placeholder-proof,
.proof-copy,
.process-copy,
.enquiry-form,
.mentoring-intro,
.mentoring-proof-copy {
  border-radius: var(--radius-container);
  padding: var(--component-padding);
}

.integrated-copy {
  align-self: stretch;
  background: var(--field-personal);
}

.integrated-copy h2,
.services-copy h2,
.proof-copy h2 {
  margin-block-end: var(--space-3);
}

.integrated-copy p:last-child,
.about-copy p:last-child,
.services-copy p:last-child,
.proof-copy p:last-child,
.mentoring-proof-copy p:last-child {
  margin-block-end: 0;
}

.about-copy {
  align-self: end;
  background: var(--surface-sunken);
}

.about-copy h3 {
  margin-block-end: var(--space-2);
}

.services-section {
  align-items: start;
  background: var(--surface-base);
}

.services-copy {
  background: var(--surface-elevated);
  border-radius: var(--radius-container);
  box-shadow: var(--elevation-raised-shadow);
  padding: var(--component-padding);
}

.services-copy h3 {
  margin-block: var(--space-4) var(--space-2);
}

.project-proof,
.placeholder-proof {
  background: var(--surface-elevated);
}

.project-proof {
  background: var(--field-technical);
  box-shadow: var(--elevation-raised-shadow);
}

.project-proof h3 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-block-end: var(--space-1);
}

.route-link {
  align-items: center;
  display: inline-flex;
  font-weight: var(--font-weight-bold);
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  min-height: var(--target-min);
}

.route-link img {
  height: var(--icon-size-medium);
  transition: transform var(--motion-micro-duration) var(--motion-easing);
  width: var(--icon-size-medium);
}

.route-link:hover img {
  transform: translateX(0.35rem);
}

.project-media,
.proof-media {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.project-shot,
.proof-shot {
  display: block;
  overflow: hidden;
}

.project-shot {
  aspect-ratio: var(--ratio-project);
  border-radius: var(--radius-nested);
}

.project-shot img,
.proof-shot img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.placeholder-proof {
  background: var(--surface-sunken);
  border: 1px solid var(--surface-sunken);
}

.placeholder-proof img {
  aspect-ratio: var(--ratio-project);
  border-radius: var(--radius-nested);
  height: auto;
  object-fit: cover;
  width: 100%;
}

.placeholder-label {
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  margin-block-end: 0;
}

.proof-section {
  background: var(--surface-sunken);
  border-radius: var(--radius-container);
}

.proof-copy {
  align-self: center;
  background: var(--field-personal);
}

.proof-media {
  align-self: center;
  margin-block-start: 0;
  position: relative;
}

.proof-media::before {
  border: 3px solid var(--decorative-system);
  border-color: var(--decorative-system) transparent transparent;
  border-radius: 50%;
  content: "";
  height: 4rem;
  left: -2rem;
  position: absolute;
  top: -2rem;
  transform: rotate(18deg);
  width: 9rem;
}

.proof-shot {
  aspect-ratio: 1;
  border-radius: var(--radius-container) var(--radius-nested)
    var(--radius-container) var(--radius-nested);
  box-shadow: var(--elevation-raised-shadow);
  position: relative;
}

.proof-shot:nth-child(2) {
  border-radius: var(--radius-nested) var(--radius-container)
    var(--radius-nested) var(--radius-container);
}

blockquote {
  font-size: var(--font-size-title);
  line-height: 1.25;
  margin-inline: 0;
}

.faq-section {
  background: var(--surface-elevated);
  border-radius: var(--radius-container);
  gap: var(--space-2);
}

.faq-section > .section-kicker {
  margin-block-end: 0;
}

.faq-section h2 {
  margin-block-end: var(--space-3);
}

details {
  background: var(--surface-sunken);
  border-radius: var(--radius-nested);
  padding: var(--space-2) var(--space-3);
}

summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  font-family: var(--font-body);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-bold);
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  min-height: var(--target-min);
}

summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  height: var(--icon-size-large);
  width: var(--icon-size-large);
}

.faq-icon--minus {
  display: none;
}

details[open] .faq-icon--plus {
  display: none;
}

details[open] .faq-icon--minus {
  display: block;
}

details p {
  margin-block: var(--space-2) var(--space-1);
}

.consultation-section {
  background: var(--field-personal);
  border-radius: var(--radius-container);
}

.consultation-section > h2 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  margin-block-end: 0;
}

.consultation-section > p {
  margin-block-end: var(--space-2);
}

.process-copy {
  background: var(--field-technical);
}

.process-copy ol {
  margin-block-end: 0;
  padding-inline-start: var(--space-3);
}

.process-copy li + li {
  margin-block-start: var(--space-2);
}

.enquiry-form {
  background: var(--surface-elevated);
  box-shadow: var(--elevation-raised-shadow);
}

.field-group + .field-group {
  margin-block-start: var(--space-3);
}

.field-group label {
  display: block;
  font-weight: var(--font-weight-bold);
}

.field-group p {
  color: var(--text-muted);
  font-size: var(--font-size-caption);
  margin-block: var(--space-1);
}

.field-group p[hidden] {
  display: none;
}

.field-group p:not([hidden])[id$="-error"] {
  color: var(--text-primary);
}

.field-group p:not([hidden])[id$="-error"]::before {
  background: var(--feedback-error-marker);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: var(--icon-size-small);
  margin-inline-end: var(--space-1);
  width: var(--icon-size-small);
}

.field-group input {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  min-height: 3.25rem;
  padding: var(--space-1) var(--space-2);
  width: 100%;
}

.field-group input:focus {
  background: var(--surface-elevated);
}

.field-group input[aria-invalid="true"] {
  border: 2px solid var(--feedback-error-marker);
}

.form-status {
  min-height: var(--space-4);
}

.form-status[data-state] {
  background: var(--surface-sunken);
  border-radius: var(--radius-nested);
  padding: var(--space-2);
}

.form-status[data-state="offline"] {
  border: 1px dashed var(--border-strong);
}

.consultation-action {
  align-items: center;
  background: var(--accent-primary);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--text-inverse);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--font-weight-bold);
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  transition:
    background-color var(--motion-micro-duration) var(--motion-easing),
    transform var(--motion-micro-duration) var(--motion-easing);
}

.consultation-action:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-2px);
}

.consultation-action:active {
  background: var(--accent-primary-active);
  transform: translateY(0);
}

.consultation-action:disabled {
  cursor: wait;
}

.button-progress {
  background: var(--text-inverse);
  height: var(--icon-size-medium);
  margin-inline-end: var(--space-1);
  mask: url("/assets/icons/progress.svg") center / contain no-repeat;
  width: var(--icon-size-medium);
}

.form-success {
  background: var(--surface-elevated);
  border-radius: var(--radius-container);
  box-shadow: var(--elevation-raised-shadow);
  grid-column: 1 / -1;
  padding: var(--component-padding);
}

.form-success p {
  margin-block-end: 0;
}

.mentoring-section {
  background: var(--surface-sunken);
  border-radius: var(--radius-container);
}

.mentoring-intro {
  background: var(--field-technical);
}

.mentoring-proof-copy {
  align-self: center;
  background: var(--field-personal);
}

.site-footer {
  align-items: start;
  background: var(--surface-elevated);
  border-radius: var(--radius-container) var(--radius-container) 0 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--page-gutter);
}

.site-footer::before {
  background: var(--surface-sunken);
  content: "";
  height: 1px;
  width: 100%;
}

.error-main {
  min-height: 100vh;
  padding: var(--space-7) var(--page-gutter);
}

@media (min-width: 35rem) {
  .site-header {
    border-radius: 0 0 var(--radius-nested) var(--radius-nested);
    box-shadow: 0 0.5rem 1.5rem rgb(16 16 16 / 4%);
    grid-template-columns: repeat(8, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .nav-consultation:not([hidden]) {
    display: inline-flex;
  }

  .sticky-consultation {
    display: none;
  }

  .wordmark {
    grid-column: span 2;
  }

  .site-nav {
    grid-column: span 6;
    justify-content: flex-end;
  }

  .site-main {
    gap: var(--space-5);
    padding-block: var(--space-2) var(--space-5);
  }

  .section {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding-block: var(--space-6);
  }

  .position-copy,
  .integrated-copy,
  .services-copy,
  .proof-copy,
  .mentoring-intro,
  .mentoring-proof-copy {
    grid-column: span 5;
  }

  .position-section > .portrait-frame,
  .integrated-section > .portrait-frame {
    grid-column: span 3;
  }

  .about-copy {
    grid-column: span 5;
  }

  .project-proof,
  .placeholder-proof,
  .proof-media,
  .process-copy,
  .enquiry-form {
    grid-column: span 4;
  }

  .project-media,
  .proof-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-media > :first-child {
    grid-column: 1 / -1;
  }

  .faq-section > *,
  .consultation-section > h2,
  .consultation-section > p {
    grid-column: 1 / span 7;
  }

  .site-footer {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .site-footer::before {
    grid-column: 1 / -1;
  }

  .site-footer .wordmark {
    grid-column: span 3;
  }

  .footer-nav {
    grid-column: span 5;
    justify-content: flex-end;
  }
}

@media (min-width: 56.25rem) {
  .site-header,
  .site-footer,
  .section {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .site-header .wordmark {
    grid-column: span 3;
  }

  .site-nav {
    grid-column: span 9;
  }

  .section {
    padding-inline: var(--space-5);
  }

  .position-section {
    padding-block: var(--space-6);
  }

  .position-copy {
    align-self: center;
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  .position-section > .portrait-frame {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .integrated-copy {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
  }

  .integrated-section > .portrait-frame {
    grid-column: 7 / span 6;
    grid-row: 1;
    justify-self: end;
    max-width: 28rem;
  }

  .about-copy {
    grid-column: 8 / span 5;
    grid-row: 2;
    margin-block-start: calc(var(--space-6) * -1);
    position: relative;
    z-index: 2;
  }

  .services-copy {
    grid-column: 1 / span 6;
  }

  .project-proof {
    grid-column: 7 / span 6;
    margin-block-start: var(--space-6);
  }

  .services-section > .placeholder-proof {
    grid-column: 1 / span 5;
    margin-block-start: calc(var(--space-6) * -1);
  }

  .proof-copy {
    grid-column: 1 / span 6;
  }

  .proof-section > .proof-media {
    grid-column: 7 / span 6;
  }

  .proof-section > .placeholder-proof {
    grid-column: span 6;
  }

  .faq-section > * {
    grid-column: 3 / span 8;
  }

  .consultation-section > h2,
  .consultation-section > p {
    grid-column: 1 / span 9;
  }

  .process-copy {
    grid-column: 1 / span 5;
  }

  .enquiry-form {
    grid-column: 7 / span 6;
  }

  .mentoring-intro {
    grid-column: 1 / span 7;
  }

  .mentoring-proof-copy {
    grid-column: 1 / span 5;
  }

  .mentoring-section > .proof-media {
    grid-column: 7 / span 6;
    grid-row: 2;
  }

  .site-footer .wordmark {
    grid-column: span 4;
  }

  .footer-nav {
    grid-column: 7 / span 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0ms !important;
  }
}