/* Color is carried by paper surfaces, useful highlights and small details. */
:root {
  --ink: #293E39;
  --muted: #586B61;
  --sun: #E8CE75;
  --coral: #DD8C7A;
  --sea: #8CB8D4;
  --sage: #BDD3C5;
  --lilac: #B7ACD1;
  --paper: #FFFEFB;
  --mist-sun: #FCF6DE;
  --mist-mint: #EDF5EF;
  --mist-sea: #E3EEF7;
  --mist-coral: #F8E4DB;
  --mist-lilac: #EEE8F7;
  --coral-button: #E29A88;
  --page-inset: max(6vw, calc((100vw - 1120px) / 2));
}

body { background: var(--paper); }
.site-header nav a[href="/hello/"] {
  padding: 8px 15px;
  background: #F6D6CC;
  border-radius: 25px 22px 24px 20px;
}
.site-header nav a[href="/hello/"]:hover { background: var(--coral-button); }
.site-header nav a[aria-current="page"]::after { background: var(--coral); }
.site-header nav a[href="/hello/"][aria-current="page"]::after { display: none; }

.home-hero {
  background: var(--mist-sun);
  border-top: 1px solid #F0E7C8;
  border-bottom: 1px solid #F0E7C8;
}
.idea-highlight { box-shadow: inset 0 -.13em 0 #C7DDEA; }
.mint-highlight { box-shadow: inset 0 -.13em 0 #D3E8D9; }
.coral-highlight { box-shadow: inset 0 -.13em 0 #F0C5B8; }
.workbench img, .about-illustration img, .hello-illustration img {
  mix-blend-mode: multiply;
  filter: contrast(1.08);
}
.home-hero .text-link { border-bottom-color: #D0AC6D; }

.client-sun { --client-paper: #F9EFCC; }
.client-mint { --client-paper: #E7F2E9; }
.client-sea { --client-paper: #E6F0F7; }
.client-coral { --client-paper: #F7E4DD; }
.client-apricot { --client-paper: #F8EDDE; }
.client-lilac { --client-paper: #EFE8F7; }
.client-ink { --client-paper: #293E39; }
.client-card { border-color: #D4DDD3; }
.client-card:not(.client-ink):hover { background: #FFFEFB; }
.client-more { border-color: #C9D8CB; background: #F3F8F2; }

.shared-section {
  background: var(--mist-mint);
  max-width: none;
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
  border-top-color: #D9E7DB;
  border-bottom: 1px solid #D9E7DB;
}
.shared-card { background: #FFF; border-color: #C9DCCC; }
.human-note label { color: #8D4E37; }
.riley-note label { color: #41694F; }
.draft-row input { background: #F4F0FA; }
.button-soft { background: #EAF2F8; }
.button-soft:hover { background: #DBEAF5; }
.button-apricot { background: var(--sun); color: var(--ink); }
.button-apricot:hover { background: #DDC266; }
.surface-sage { background: var(--mist-sea); }
.surface-apricot { background: var(--mist-coral); }
.experiment-surface { border-radius: 12px 16px 14px 12px; }
.surface-sage .onboard-demo { border-color: #C8D9E5; }
.surface-apricot .source-demo { border-color: #E4C9BF; }
.tags li { background: #FAF8EF; border-color: #E3DFCD; color: #4F6457; }

.invitation {
  max-width: none;
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
  background: var(--mist-lilac);
  border-top: 1px solid #DFD6EB;
}
.invitation .button { border-radius: 24px 21px 23px 20px; }
.site-footer { position: relative; border-top-color: #D9DFD4; }
.site-footer::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 5%;
  width: 180px;
  height: 3px;
  background: linear-gradient(to right,
    #E8CE75 0 16.66%, #DD8C7A 16.66% 33.33%,
    #D7A27D 33.33% 50%, #8CB8D4 50% 66.66%,
    #BDD3C5 66.66% 83.33%, #B7ACD1 83.33% 100%);
}

.about-statement {
  max-width: none;
  margin: 0 auto;
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
  background: var(--mist-lilac);
  border-top-color: #DFD6EB;
}
.capabilities { padding-top: 65px; }
.capability-list article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  color: var(--ink);
  border-radius: 50%;
  background: var(--sun);
}
.capability-list article:nth-child(2) > span { background: var(--sea); }
.capability-list article:nth-child(3) > span { background: var(--sage); }
.capability-list article:nth-child(4) > span { background: #EDB5A6; }
.approach-list { gap: 24px; }
.approach-list li {
  padding: 25px 25px 28px;
  border-top: 3px solid var(--sun);
  border-radius: 8px 11px 9px 8px;
  background: #FCF5DD;
}
.approach-list li:nth-child(2) { background: #F9EAE3; border-top-color: var(--coral); }
.approach-list li:nth-child(3) { background: #EAF2F8; border-top-color: var(--sea); }
.name-note > div { background: #F7EBDF; border: 1px solid #EBDCCA; }

.enquiry-wrap {
  background: #ECF3F9;
  border: 1px solid #CDDEEA;
  border-radius: 12px 15px 13px 11px;
  padding: 30px;
}
.enquiry-preview { background: #E4F1E7; border-color: #BDD7C3; }
.interest-options label > span { border-color: #C6D8E6; }
.interest-options input:checked + span { background: #D8EBDC; border-color: #86AE92; }
.hello-bottom {
  max-width: none;
  margin: 0 auto;
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
  background: var(--mist-mint);
  border-top-color: #D4E4D8;
}

.logo-study-page .intro {
  background: #EAF2F7;
  margin-top: 30px;
  padding: 42px 30px 36px;
  border-radius: 10px 14px 12px 9px;
}
.logo-study-page .index-strip { margin-top: 26px; }
.logo-study-page .study { border-top: 3px solid var(--sun); }
.logo-study-page .study:nth-child(3n+2) { border-top-color: var(--sea); }
.logo-study-page .study:nth-child(3n) { border-top-color: var(--coral); }

@media(max-width:700px) {
  .site-header nav a[href="/hello/"] { padding: 7px 12px; }
  .shared-section, .about-statement, .invitation, .hello-bottom {
    padding-left: 6%;
    padding-right: 6%;
    margin-left: 0;
    margin-right: 0;
  }
  .capabilities { padding-top: 45px; }
  .approach-list li { padding: 22px; }
  .enquiry-wrap { padding: 24px 20px; }
  .logo-study-page .intro { padding: 28px 22px; margin-top: 20px; }
}

/* The studio header and hero share one warm paper surface. */
body[data-page="work"] .site-header{background:var(--mist-sun);max-width:none}
body[data-page="work"] .home-hero{border-top:0}