/* Theme and foundations */
:root {
  color-scheme:dark;
  --bg:#0c0d0d;
  --surface:#141515;
  --surface-raised:#1a1b1b;
  --text:#f4f1ea;
  --muted:#aba9a3;
  --accent:#c2a66c;
  --line:#303130;
  --max:1240px;
  --font:"Segoe UI",Arial,Helvetica,sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:104px;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 1rem/1.65 var(--font);
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

a,button {
  touch-action:manipulation;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.035em;
}

p+p {
  margin-top:1rem;
}

ul,ol {
  padding:0;
  margin:0;
  list-style:none;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}

.container {
  width:min(var(--max),calc(100% - 96px));
  margin-inline:auto;
}

.section {
  padding-block:104px;
  border-top:1px solid var(--line);
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.75rem;
  font-weight:600;
  color:var(--accent);
  line-height:1.7;
}

.section-number {
  color:var(--muted);
  font-weight:400;
  letter-spacing:.04em;
}

.section-heading h2 {
  font-size:clamp(2rem,3.25vw,2.75rem);
  margin-top:21px;
}

.section-intro {
  color:var(--muted);
  max-width:470px;
}

.section-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:44px;
}

.gold {
  color:var(--accent);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:13px;
  min-height:44px;
  font-size:.875rem;
  transition:color .2s;
}

.text-link:hover {
  color:var(--accent);
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  min-height:50px;
  padding:12px 22px;
  font-size:.875rem;
  font-weight:600;
  border:1px solid transparent;
  border-radius:3px;
  transition:background .2s,border-color .2s,color .2s;
}

.button-primary {
  background:var(--accent);
  color:#12130f;
}

.button-primary:hover {
  background:#d5bc86;
}

.button-outline {
  border-color:#555550;
}

.button-outline:hover {
  background:var(--surface-raised);
  border-color:var(--accent);
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  padding:10px 18px;
  background:var(--accent);
  color:var(--bg);
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:translateY(0);
}

h2[data-i18n],h2 [data-i18n] {
  white-space:pre-line;
}

/* Header */
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(12,13,13,.96);
  border-bottom:1px solid var(--line);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:82px;
}

.wordmark {
  font-weight:600;
  font-size:1.125rem;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.wordmark span {
  color:var(--accent);
}

.main-nav {
  display:flex;
  gap:26px;
  margin-left:auto;
}

.main-nav a {
  font-size:.875rem;
  color:var(--muted);
  padding-block:12px;
  transition:color .2s;
}

.main-nav a:hover,.main-nav a[aria-current] {
  color:var(--text);
}

.header-controls {
  display:flex;
  align-items:center;
  gap:20px;
}

.language-switch {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.75rem;
  color:#777971;
  border-left:1px solid var(--line);
  padding-left:22px;
}

.language-switch button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 4px;
  min-height:44px;
  min-width:32px;
  font-size:.8125rem;
}

.language-switch button[aria-pressed=true] {
  color:var(--accent);
  font-weight:700;
}

.menu-toggle {
  display:none;
}

/* Hero */
.hero {
  display:grid;
  grid-template-columns:1.22fr 1fr;
  align-items:center;
  gap:70px;
  padding-block:68px 80px;
}

.location {
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.13em;
}

.location-mark {
  font-size:1.25rem;
  color:var(--accent);
}

.hero h1 {
  font-size:clamp(3.2rem,6.1vw,5.5rem);
  letter-spacing:-.06em;
  margin-top:27px;
  white-space:nowrap;
}

.hero-role {
  font-size:clamp(1.2rem,2.1vw,1.75rem);
  color:var(--accent);
  margin-top:8px;
  font-weight:400;
  letter-spacing:-.025em;
}

.hero-proposition {
  color:#c7c5bf;
  font-size:1.125rem;
  line-height:1.75;
  max-width:515px;
  margin-top:27px;
}

.availability {
  margin-top:31px;
}

.availability>p {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.875rem;
}

.availability-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.availability-types {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
}

.availability-types li {
  font-size:.875rem;
  border:1px solid var(--line);
  border-radius:3px;
  padding:4px 10px;
  color:var(--muted);
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:29px;
}

.cv-link {
  margin-top:14px;
  color:var(--muted);
}

.file-type {
  font-size:.6875rem;
  letter-spacing:.09em;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:12px;
}

.hero-portrait {
  position:relative;
  isolation:isolate;
  aspect-ratio:0.87;
  overflow:hidden;
  border-radius:4px;
  background:var(--surface);
}

.hero-portrait:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(6,8,9,.78));
  pointer-events:none;
}

.hero-portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:53% center;
}

.hero-portrait figcaption {
  position:absolute;
  bottom:25px;
  left:27px;
  right:27px;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.75rem;
  letter-spacing:.06em;
}

.hero-portrait figcaption>span:last-child {
  font-size:1.25rem;
  font-weight:300;
  color:#e5dcc8;
  letter-spacing:-.06em;
}

/* Value proposition */
.about-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:90px;
}

.about-copy {
  padding-top:37px;
  color:var(--muted);
}

.about-copy .lead {
  color:#d9d6ce;
  font-size:1.125rem;
}

.value-chain {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:48px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:24px;
}

.value-chain li {
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding-left:26px;
  border-left:1px solid var(--line);
}

.value-chain li:first-child {
  padding-left:0;
  border-left:0;
}

.value-chain span {
  font-size:.75rem;
  color:var(--accent);
}

.value-chain strong {
  font-size:.9375rem;
  font-weight:400;
}

/* Impact */
.impact-section {
  background:var(--surface);
}

.impact-section>.section {
  border-top:0;
}

.metric-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.metric-card {
  padding:33px 32px 29px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.metric-value {
  display:block;
  color:var(--accent);
  font-weight:400;
  font-size:clamp(2.8rem,4.1vw,3.75rem);
  line-height:1.2;
  letter-spacing:-.05em;
}

.metric-card h3 {
  font-size:1rem;
  letter-spacing:-.01em;
  margin-top:14px;
  font-weight:500;
}

.metric-card p {
  font-size:.875rem;
  color:var(--muted);
  line-height:1.7;
  margin-top:11px;
  max-width:310px;
}

.section-footnote {
  font-size:.75rem;
  color:var(--muted);
  margin-top:22px;
}

/* Approach */
.approach-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.approach-card {
  border-top:1px solid var(--line);
  padding-top:23px;
}

.step-number {
  font-size:.875rem;
  color:var(--accent);
  letter-spacing:.04em;
}

.approach-card h3 {
  font-size:1.1875rem;
  margin-top:34px;
  margin-bottom:17px;
  letter-spacing:-.025em;
}

.approach-card p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.75;
}

.capabilities {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:37px;
}

.capabilities li {
  font-size:.875rem;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:3px;
  padding:5px 11px;
}

/* Services */
.services-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:58px;
}

.service-card {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:18px;
  border-top:1px solid var(--line);
  padding:27px 0 29px;
}

.service-index {
  color:var(--accent);
  font-size:.75rem;
  padding-top:3px;
}

.service-card h3 {
  font-size:1.125rem;
  letter-spacing:-.02em;
}

.service-card p {
  margin-top:11px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
  max-width:450px;
}

/* Ways to work together */
.work-section {
  background:var(--surface);
}

.work-section>.section {
  border-top:0;
}

.work-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.work-card {
  padding:32px;
  border:1px solid var(--line);
  border-radius:3px;
}

.work-card:first-child {
  border-top-color:var(--accent);
}

.work-label {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent);
}

.work-card h3 {
  font-size:1.5rem;
  margin-top:26px;
  margin-bottom:17px;
}

.work-card>p:last-child {
  color:var(--muted);
  font-size:1rem;
  line-height:1.75;
}

.work-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:32px;
}

.work-cta p {
  font-size:1rem;
  color:#d4d1c9;
}

/* Experience */
.experience-list {
  border-top:1px solid var(--line);
}

.experience-item {
  display:grid;
  grid-template-columns:190px 1fr 1.5fr;
  gap:35px;
  padding:34px 0;
  border-bottom:1px solid var(--line);
}

.experience-period {
  font-size:.875rem;
  color:var(--muted);
  padding-top:3px;
}

.experience-current .experience-period {
  color:var(--accent);
}

.experience-role h3 {
  font-size:1.1875rem;
  line-height:1.4;
  letter-spacing:-.02em;
}

.experience-company {
  color:var(--accent);
  font-size:.875rem;
  margin-top:8px;
}

.experience-notes {
  font-size:1rem;
  color:var(--muted);
}

.experience-notes li {
  position:relative;
  padding-left:16px;
}

.experience-notes li:before {
  content:"";
  position:absolute;
  top:.78em;
  left:0;
  width:4px;
  height:4px;
  background:#64655e;
  border-radius:50%;
}

.experience-notes li+li {
  margin-top:10px;
}

.experience-notes strong {
  color:var(--text);
  font-weight:500;
}

.experience-download {
  margin-top:26px;
}

/* First 90 days */
.ninety-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.ninety-card {
  border-top:2px solid #4a473d;
  padding-top:22px;
}

.ninety-card:nth-child(2) {
  border-top-color:#8d7b55;
}

.ninety-card:nth-child(3) {
  border-top-color:var(--accent);
}

.day-label {
  color:var(--accent);
  font-size:.875rem;
}

.ninety-card h3 {
  font-size:1.375rem;
  line-height:1.3;
  margin:19px 0;
}

.ninety-card ul {
  color:var(--muted);
  font-size:1rem;
}

.ninety-card li+li {
  margin-top:9px;
}

.outcomes {
  display:flex;
  gap:32px;
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:37px;
  flex-wrap:wrap;
  font-size:.8125rem;
  color:#cfccc3;
}

.outcomes li:before {
  content:"+";
  color:var(--accent);
  margin-right:10px;
}

.ninety-note {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:23px;
}

/* Contact and footer */
.contact-section {
  border-top:1px solid var(--line);
  background:var(--surface);
}

.contact-inner {
  padding-block:85px 62px;
}

.contact-section h2 {
  font-size:clamp(2.5rem,5.3vw,4.6rem);
  line-height:1.1;
  letter-spacing:-.045em;
  max-width:950px;
  margin-top:26px;
}

.email-link {
  display:inline-flex;
  gap:36px;
  align-items:center;
  font-size:clamp(1.3rem,2.5vw,2rem);
  letter-spacing:-.025em;
  color:var(--accent);
  margin-top:29px;
  padding-block:8px;
  border-bottom:1px solid #6a5d40;
}

.email-link:hover {
  color:#dfc793;
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  padding-top:58px;
}

.contact-bottom>p {
  display:flex;
  flex-direction:column;
  font-size:.875rem;
  color:var(--muted);
}

.contact-bottom strong {
  font-size:1rem;
  color:var(--text);
  font-weight:500;
  margin-bottom:5px;
}

.contact-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:26px;
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:23px;
  color:var(--muted);
  font-size:.75rem;
}

.site-footer a {
  padding-block:10px;
}

.site-footer a:hover {
  color:var(--accent);
}

/* Responsive layouts */
@media(min-width:1600px) {
  .hero {
    padding-block:82px 96px;
  }
}

@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px);
  }
  .hero {
    gap:35px;
    grid-template-columns:1.15fr 1fr;
  }
  .main-nav {
    gap:18px;
  }
  .header-inner {
    gap:22px;
  }
  .hero h1 {
    font-size:4.4rem;
  }
  .about-section {
    column-gap:45px;
  }
  .experience-item {
    grid-template-columns:150px 1fr 1.35fr;
    gap:25px;
  }
  .contact-actions {
    gap:17px;
  }
  .section-top {
    gap:36px;
  }
  .section-intro {
    max-width:350px;
  }
  .metric-card {
    padding:28px;
  }
  .value-chain li {
    gap:12px;
    padding-left:18px;
  }
  .value-chain strong {
    font-size:.875rem;
  }
}

@media(max-width:850px) {
  .header-inner {
    min-height:72px;
    flex-wrap:wrap;
    gap:0;
  }
  .header-controls {
    margin-left:auto;
  }
  .menu-toggle {
    display:block;
    background:transparent;
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--text);
    font-size:.8125rem;
    min-height:40px;
    padding:6px 12px;
  }
  .main-nav {
    display:none;
    order:3;
    width:100%;
    margin:0;
    padding:10px 0 16px;
    grid-template-columns:repeat(3,1fr);
    gap:6px 15px;
  }
  .main-nav.is-open {
    display:grid;
  }
  .main-nav a {
    min-height:44px;
    text-align:center;
    background:var(--surface);
    border-radius:3px;
  }
  .language-switch {
    padding-left:0;
    border-left:0;
  }
  .hero {
    padding-block:45px 60px;
    gap:30px;
    grid-template-columns:1.1fr .9fr;
  }
  .hero h1 {
    font-size:3.1rem;
  }
  .hero-role {
    font-size:1.2rem;
  }
  .hero-proposition {
    font-size:1rem;
    margin-top:20px;
  }
  .hero-portrait {
    aspect-ratio:.72;
    align-self:start;
    margin-top:20px;
  }
  .hero-actions {
    gap:10px;
  }
  .hero .button {
    padding:11px 15px;
    gap:15px;
  }
  .availability {
    margin-top:22px;
  }
  .availability>p {
    font-size:.8125rem;
  }
  .availability-types {
    gap:6px;
  }
  .availability-types li {
    font-size:.875rem;
    padding:3px 8px;
  }
  .section {
    padding-block:75px;
  }
  .about-section {
    gap:25px;
  }
  .about-copy {
    padding-top:30px;
  }
  .about-copy .lead {
    font-size:1rem;
  }
  .about-copy p {
    font-size:1rem;
  }
  .value-chain {
    grid-template-columns:1fr 1fr;
    row-gap:20px;
    margin-top:20px;
  }
  .value-chain li:nth-child(3) {
    border-left:0;
    padding-left:0;
  }
  .section-top {
    display:block;
  }
  .section-intro {
    margin-top:22px;
    max-width:560px;
  }
  .metric-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .approach-grid {
    grid-template-columns:repeat(2,1fr);
    row-gap:35px;
  }
  .approach-card h3 {
    margin-top:23px;
  }
  .services-grid {
    column-gap:30px;
  }
  .service-card {
    grid-template-columns:23px 1fr;
    gap:10px;
  }
  .work-grid {
    gap:12px;
  }
  .work-card {
    padding:24px 20px;
  }
  .work-card h3 {
    font-size:1.25rem;
  }
  .work-card>p:last-child {
    font-size:1rem;
  }
  .experience-item {
    grid-template-columns:140px 1fr;
    gap:18px 25px;
  }
  .experience-notes {
    grid-column:2;
  }
  .experience-role h3 {
    font-size:1.125rem;
  }
  .ninety-grid {
    gap:22px;
  }
  .ninety-card h3 {
    font-size:1.1875rem;
  }
  .ninety-card ul {
    font-size:1rem;
  }
  .contact-bottom {
    align-items:flex-start;
  }
  .contact-actions {
    justify-content:flex-end;
    max-width:350px;
  }
  .contact-actions .button {
    width:100%;
  }
  .outcomes {
    gap:14px 28px;
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:92px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .header-inner {
    min-height:68px;
  }
  .wordmark {
    font-size:1.0625rem;
  }
  .header-controls {
    gap:12px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:36px 48px;
    gap:33px;
  }
  .hero h1 {
    font-size:clamp(2.6rem,12vw,4.2rem);
    margin-top:20px;
  }
  .hero-role {
    font-size:1.375rem;
  }
  .hero-proposition {
    font-size:1.0625rem;
    line-height:1.7;
    max-width:480px;
  }
  .hero-actions {
    margin-top:25px;
  }
  .hero .button {
    padding:12px 18px;
    gap:24px;
  }
  .availability>p {
    font-size:.875rem;
  }
  .hero-portrait {
    aspect-ratio:1.06;
    margin:0;
    width:100%;
  }
  .hero-portrait img {
    object-position:center 38%;
  }
  .hero-portrait figcaption {
    left:21px;
    right:21px;
    bottom:17px;
  }
  .section {
    padding-block:58px;
  }
  .section-heading h2 {
    font-size:2rem;
    margin-top:17px;
  }
  .section-top {
    margin-bottom:32px;
  }
  .about-section {
    grid-template-columns:1fr;
    gap:0;
  }
  .about-copy {
    padding-top:25px;
  }
  .about-copy .lead {
    font-size:1.0625rem;
  }
  .value-chain {
    margin-top:30px;
    padding-block:20px;
    gap:18px 0;
  }
  .value-chain li {
    gap:9px;
    padding-left:14px;
  }
  .value-chain strong {
    font-size:.8125rem;
  }
  .metric-card {
    padding:25px 19px;
  }
  .metric-value {
    font-size:2.7rem;
  }
  .metric-card h3 {
    font-size:.9375rem;
    line-height:1.4;
  }
  .metric-card p {
    font-size:.875rem;
  }
  .approach-grid {
    grid-template-columns:1fr;
    gap:27px;
  }
  .approach-card {
    display:grid;
    grid-template-columns:34px 1fr;
    gap:10px 14px;
    padding-top:23px;
  }
  .approach-card h3 {
    margin:0;
    font-size:1.1875rem;
  }
  .approach-card p {
    grid-column:2;
  }
  .capabilities {
    margin-top:28px;
  }
  .services-grid {
    grid-template-columns:1fr;
  }
  .service-card {
    grid-template-columns:30px 1fr;
    padding-block:25px;
  }
  .service-card h3 {
    font-size:1.125rem;
  }
  .work-grid {
    grid-template-columns:1fr;
    gap:14px;
  }
  .work-card {
    padding:26px;
  }
  .work-card h3 {
    font-size:1.375rem;
    margin-top:19px;
  }
  .work-card>p:last-child {
    font-size:1rem;
  }
  .work-cta {
    align-items:flex-start;
    flex-direction:column;
    gap:17px;
    margin-top:26px;
  }
  .experience-item {
    grid-template-columns:1fr;
    gap:13px;
    padding-block:28px;
  }
  .experience-notes {
    grid-column:auto;
    margin-top:3px;
  }
  .experience-role h3 {
    font-size:1.1875rem;
  }
  .experience-company {
    margin-top:5px;
  }
  .experience-period {
    font-size:.8125rem;
  }
  .ninety-grid {
    grid-template-columns:1fr;
    gap:33px;
  }
  .ninety-card h3 {
    font-size:1.375rem;
    margin:14px 0;
  }
  .ninety-card ul {
    font-size:1rem;
  }
  .outcomes {
    flex-direction:column;
    gap:10px;
  }
  .contact-inner {
    padding-block:57px 38px;
  }
  .contact-section h2 {
    font-size:clamp(2.3rem,9.5vw,3.2rem);
  }
  .email-link {
    font-size:1.5rem;
    gap:22px;
    margin-top:22px;
  }
  .contact-bottom {
    flex-direction:column;
    gap:27px;
    padding-top:39px;
  }
  .contact-actions {
    justify-content:flex-start;
    gap:14px 25px;
    max-width:none;
  }
  .contact-actions .button {
    width:auto;
  }
  .site-footer {
    font-size:.75rem;
    gap:20px;
    padding-block:15px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}
