/* Incodio surfaces: a white canvas, fine edges, and deliberate depth. */
:root {
  --soft: #ffffff;
  --line: #e6e5e2;
  --surface: #fff;
  --surface-subtle: #f0efed;
  --accent-wash: #fff1e8;
  --accent-line: #ffc299;
  --focus: #9b3900;
  --radius-card: 18px;
  --shadow-card: inset 0 0 0 1px #15191d0b, 0 1px 2px #15191d05, 0 10px 26px #15191d08;
  --shadow-raised: inset 0 1px 0 #ffffffc9, 0 2px 4px #15191d08, 0 16px 32px -12px #15191d24;
  --shadow-bar: inset 0 1px 0 #fff, 0 1px 2px #15191d05, 0 5px 13px -5px #15191d12;
  --shadow-control: inset 0 1px 0 #ffffffcc, 0 1px 3px #15191d0b, 0 8px 18px -8px #15191d24;
  --shadow-icon: inset 0 1px 0 #ffffff24, 0 2px 3px #15191d16, 0 10px 17px -6px #15191d40;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.audience-panel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}
.nav-pill {
  border-color: #15191d09;
  box-shadow: var(--shadow-control);
}
.btn-plain {
  border-color: #15191d0a;
  box-shadow: var(--shadow-control);
}
.btn-plain:hover {
  border-color: var(--accent-line);
  background: #fff;
}
.mobile-menu {
  border-color: transparent;
  border-radius: 16px;
}
.mobile-toggle,
.icon-button {
  border-color: var(--line);
  background: var(--surface);
}

/* A fine inner edge defines white cards without a heavy frame. */
.product-feature,
.service-link,
.audience-panel,
.case-details,
.service-detail-grid > section,
.journal-takeaway {
  border-color: transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.service-link {
  border-radius: 12px;
  transition:
    border-color 0.55s,
    box-shadow 0.55s,
    background 0.55s,
    translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-link > .arrow {
  transition:
    translate 0.24s,
    color 0.24s;
}
.product-feature {
  transition:
    border-color 0.55s,
    box-shadow 0.55s;
}
.product-visual,
.reason-canvas {
  background-color: var(--surface-subtle);
  border-radius: 12px;
}
.service-link:focus-visible {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-raised);
}
.service-link:focus-visible > .arrow {
  color: var(--focus);
}
.audience-services a {
  background: #f5f4f2;
  border-color: transparent;
  border-radius: 6px;
}
.audience-services a:hover {
  background: var(--accent-wash);
  border-color: var(--accent-line);
}

/* A single white selection surface follows pointer, touch, and keyboard choice. */
.audience-tabs {
  --tab-gap: 12px;
  position: relative;
  isolation: isolate;
  gap: var(--tab-gap);
}
.audience-tabs:before {
  box-shadow: var(--shadow-control);
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc((100% - 2 * var(--tab-gap)) / 3);
  border-radius: 12px;
  background: #fff;
  pointer-events: none;
  transform: translateX(calc(var(--audience-index, 0) * (100% + var(--tab-gap))));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.audience-tab {
  background: transparent;
  border-color: transparent;
  border-radius: 12px;
  color: #5b5b57;
  box-shadow: none;
  transition:
    color 0.22s,
    border-color 0.22s;
}
.audience-tab:hover {
  background: transparent;
  border-color: var(--accent-line);
}
.audience-tab[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  box-shadow: none;
}
.audience-tab[aria-selected="true"]:hover {
  border-color: var(--accent-line);
}
.audience-tab-icon {
  background: transparent;
  color: #777671;
  border-radius: 8px;
  transition:
    background 0.25s,
    color 0.25s;
}
.audience-tab[aria-selected="true"] .audience-tab-icon {
  background: var(--accent-wash);
  color: var(--focus);
}
.audience-panel {
  border-radius: var(--radius-card);
}
.audience-visual {
  border-radius: 12px;
}
.audience-visual-founders {
  background: #efefeb;
  background-image: none;
}
.audience-visual-business {
  background: #f0efed;
}
.audience-visual-teams {
  background: #ededeb;
}
.visual-label-dot,
.audience-visual-business .visual-label-dot {
  background: var(--accent);
}
.launch-plan,
.workflow-plan,
.release-plan {
  border-color: #ffffffd9;
  border-radius: 12px;
  box-shadow: var(--shadow-raised);
}
.workflow-step,
.release-column,
.release-task {
  border-color: transparent;
}
.workflow-step,
.release-column {
  background: #f6f5f3;
}
.workflow-icon,
.workflow-state,
.workflow-plan .artifact-tag {
  background: #eeede9;
  color: #696660;
}
.workflow-connector {
  border-color: #d4d1cb;
}
.artifact-tag {
  background: #eeede9;
  color: #696660;
}
.release-column .task-type {
  background: #eeede9;
  color: #696660;
}
.release-column .coral-tag {
  background: var(--accent-wash);
  color: var(--focus);
}

/* Keep the selected-work contrast, with a quieter charcoal frame. */
.featured-experiences .experience-card {
  border-color: #30302e;
  border-radius: 20px;
  background: #242523;
  box-shadow: none;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.featured-experiences .experience-preview {
  border-radius: 13px;
}
.featured-experiences .experience-preview-badge {
  background: #252724ed;
}
.featured-experiences .case-study-link {
  border-color: #3c3d38;
}
.featured-experiences .experience-caption p {
  color: #fff;
}
.featured-experiences .preview-outline {
  background: #eeede9;
}
.featured-experiences .preview-daylight {
  background: #ebece9;
}
.featured-experiences .case-study-link:hover > .arrow {
  background: var(--accent);
  color: var(--ink);
}
.experience-viewer,
.viewer-toolbar,
.viewer-sizes,
.viewer-close {
  border-color: var(--line);
}
.viewer-stage {
  background: #e8e7e3;
}

/* The process still stacks; its surface provides the edge and depth. */
.stack-card-shell {
  border-color: #15191d0c;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}
.stack-card-header,
.approach-stack-card .stage-art,
.stage-review {
  border-color: var(--line);
}
.approach-stack-card .stage-art {
  background: #eeede9;
}
.approach-stack-card:nth-child(2) .stage-art {
  background: #f1ede8;
}
.approach-stack-card:nth-child(3) .stage-art {
  background: #eaece8;
}
.approach-stack-card:nth-child(4) .stage-art {
  background: #eeeee9;
}
.engagement-leaf,
.engagement-leaf.is-open {
  border-color: transparent;
  border-radius: 14px;
}
.fold-toggle {
  background: #eeedea;
  color: #6d6b66;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
.engagement-leaf.is-open .fold-toggle {
  background: #fff;
  color: var(--focus);
  box-shadow: inset 2px 0 var(--accent);
}
.fold-toggle:hover {
  background: var(--accent-wash);
  color: var(--focus);
}
.engagement-leaf.is-open .fold-toggle:hover {
  background: var(--accent-wash);
}
.engagement-visual {
  border-color: transparent;
  background: #eeede9;
}
.visual-project {
  background: #eceee9;
}
.visual-support {
  background: #efeeea;
}
.fold-deliverables li {
  border-color: transparent;
  background: #f5f4f1;
}
.engagement-leaf.is-open .fold-toggle {
  border-bottom-color: var(--line);
}

/* Fine rules stay where they clarify structure; form fields stay identifiable. */
.reason-list,
.reason-tab,
.faq-list,
.faq-item,
.studio-footer-bottom,
.footer-studio,
.journal-section,
.footer-conversation,
.approach-section .process-footnote {
  border-color: var(--line);
}
.footer-invitation {
  background: #efefec;
  border-color: transparent;
  border-radius: 24px;
}
.journal-image,
.journal-article-cover {
  border-radius: 14px;
}
dialog,
.project-inquiry-dialog {
  border-color: transparent;
  border-radius: 18px;
}
.modal-services a {
  background: #f6f5f3;
  border-color: transparent;
  border-radius: 10px;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.modal-services a:hover {
  background: var(--accent-wash);
  border-color: var(--accent-line);
}
.project-inquiry-dialog input,
.project-inquiry-dialog select,
.project-inquiry-dialog textarea {
  background: #f9f9f7;
  border: 1px solid #deddd7;
  border-radius: 8px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.project-inquiry-dialog input:focus-visible,
.project-inquiry-dialog select:focus-visible,
.project-inquiry-dialog textarea:focus-visible {
  background: white;
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: none;
}
.inquiry-progress-line > i {
  background: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .service-link:hover {
    border-color: var(--accent-line);
    box-shadow: var(--shadow-raised);
    translate: 0 -2px;
  }
  .service-link:hover > .arrow {
    translate: 2px -2px;
    color: var(--focus);
  }
  .product-feature:hover {
    border-color: #e6d6c9;
    box-shadow: var(--shadow-raised);
  }
  .featured-experiences .experience-card:hover {
    border-color: #a45324;
    box-shadow:
      inset 0 1px 0 #ffffff18,
      0 12px 26px -12px #15191d45;
  }
}
@media (max-width: 600px) {
  .audience-tabs {
    --tab-gap: 7px;
  }
  .audience-tabs:before,
  .audience-tab {
    border-radius: 10px;
  }
  .audience-panel {
    border-radius: 16px;
  }
  .audience-visual {
    border-radius: 10px;
  }
  .featured-experiences .experience-card {
    border-radius: 18px;
  }
  .featured-experiences .experience-preview {
    border-radius: 12px;
  }
  .footer-invitation {
    border-radius: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .audience-tabs:before,
  .audience-tab,
  .audience-tab-icon,
  .service-link,
  .service-link > .arrow,
  .product-feature,
  .featured-experiences .experience-card,
  .fold-toggle {
    transition: none !important;
  }
  .service-link:hover > .arrow {
    translate: none;
  }
}

/* Selected project cards use Incodio's black and orange palette. */
.featured-experiences .experience-card {
  background: #000;
  border-color: #000;
}
.featured-experiences .experience-card:hover {
  border-color: var(--accent);
}
.featured-experiences .experience-preview-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.featured-experiences .experience-preview-badge > i {
  background: #fff;
}

/* Small carriers sit above their parent surface; large panels stay softly grounded. */
body .service-icon {
  background: #000;
  color: #fff;
  box-shadow: var(--shadow-icon);
}
body .btn-coral {
  box-shadow:
    inset 0 1px 0 #ffffff4d,
    0 1px 2px #15191d0d,
    0 7px 15px -9px #15191d38;
  transition:
    box-shadow 0.55s,
    background 0.55s;
}
body .button-arrow,
body .round-arrow {
  box-shadow:
    inset 0 0 0 1px #15191d08,
    0 1px 3px #15191d0b;
}
body .mobile-toggle,
body .icon-button,
body .carousel-arrows > button,
body .story-control {
  box-shadow: var(--shadow-control);
}
body .audience-tabs {
  background: #f5f5f3;
  border-radius: 14px;
  padding: 0;
  box-shadow: inset 0 0 0 1px #15191d08;
}
body .audience-tab[aria-selected="true"] .audience-tab-icon {
  box-shadow: 0 1px 2px #15191d08;
}
body .audience-panel {
  box-shadow: var(--shadow-card);
}
body .product-visual,
body .reason-canvas,
body .audience-visual,
body .engagement-visual {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px #15191d05;
}
body .idea-slip,
body .craft-frame,
body .clarity-ticket,
body .brief-paper,
body .design-page,
body .build-window,
body .launch-sheet,
body .direction-paper,
body .support-board {
  box-shadow: var(--shadow-raised);
}
body .workflow-step,
body .release-task,
body .fold-deliverables li {
  box-shadow: var(--shadow-bar);
}
body .fold-workspace {
  box-shadow: var(--shadow-card);
}
body .engagement-leaf.is-open .fold-toggle {
  box-shadow:
    inset 2px 0 var(--accent),
    inset 0 1px 0 #fff,
    0 4px 12px -7px #15191d24;
}
body .journal-image {
  box-shadow:
    inset 0 0 0 1px #15191d09,
    0 2px 4px #15191d06,
    0 11px 24px -14px #15191d28;
}
body .footer-invitation {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px #15191d05,
    0 12px 28px -22px #15191d30;
}

/* Compact question rows: white bars with a fine rim, instead of heavier boxes. */
body .faq-list {
  border-top: 0;
}
body .faq-item,
body .business-faq {
  background: #fff;
  border: 1px solid #e9e9e6;
  border-radius: 10px;
  margin-bottom: 10px;
  padding-inline: 18px;
  box-shadow: var(--shadow-bar);
  transition:
    box-shadow 0.5s,
    border-color 0.5s;
}
body .faq-item[open],
body .business-faq[open] {
  border-color: #dcdcd7;
  box-shadow: var(--shadow-card);
}
body .faq-item summary {
  padding-block: 21px;
}
body .business-faq summary {
  padding-block: 19px;
}

/* The same depth system on the service and business-size landing pages. */
body.business-landing-page .business-offer-card {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 0.55s,
    border-color 0.55s,
    translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body .business-package-selector,
body .sole-showcase-layout,
body .startup-journey-frame,
body .work-project-strip {
  box-shadow: var(--shadow-card);
}
body .business-size-tabs {
  background: #f6f6f4;
  box-shadow: inset 0 1px 0 #fff;
}
body .business-size-tabs > button[aria-selected="true"] {
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 3px 9px -4px #15191d40;
}
body .business-offer-detail {
  background: #fff;
  border: 1px solid #e9e9e6;
  border-radius: 11px;
  margin-bottom: 10px;
  padding-inline: 18px;
  box-shadow: var(--shadow-bar);
}
body .business-offer-detail:last-child {
  border-bottom-color: #e9e9e6;
}
body .business-offer-detail summary {
  padding-block: 21px;
}
body .sole-hero-visual > .sole-mock-browser,
body .sole-preview-art .sole-mock-browser,
body .startup-hero-visual > .relay-app {
  box-shadow: var(--shadow-raised);
}

/* Pure white copy on black surfaces, without touching light preview art or inputs. */
body .featured-experiences .experience-card {
  box-shadow:
    inset 0 1px 0 #ffffff21,
    0 8px 22px -14px #15191d55;
}
body .featured-experiences .experience-caption :is(h3, p),
body .featured-experiences .case-study-link {
  color: #fff;
}
body.business-landing-page .business-offer-card.business-offer-primary {
  color: #fff;
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 10px 24px -15px #15191d66;
}
body.business-landing-page
  .business-offer-card.business-offer-primary
  :is(h3, p, li, li > span, .eyebrow, .package-service-link) {
  color: #fff;
}
body .article-promotion {
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 9px 24px -14px #15191d55;
}
body .article-promotion :is(h2, p, .eyebrow) {
  color: #fff;
}
body .journal-newsletter {
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 10px 26px -17px #15191d55;
}
body .journal-newsletter > div > p,
body .journal-newsletter label,
body .journal-newsletter .newsletter-note,
body .journal-newsletter .newsletter-message {
  color: #fff;
}
body .studio-promise {
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 10px 26px -17px #15191d55;
}
body .studio-promise > .eyebrow,
body .studio-promise h2 > span,
body .studio-promise-foot {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.business-landing-page .business-offer-card:hover {
    box-shadow: var(--shadow-raised);
    translate: 0 -3px;
  }
  body.business-landing-page .business-offer-card.business-offer-primary:hover {
    box-shadow:
      inset 0 1px 0 #ffffff24,
      0 16px 30px -17px #15191d77;
  }
  body .btn-coral:hover {
    box-shadow:
      inset 0 1px 0 #ffffff66,
      0 2px 4px #15191d12,
      0 11px 20px -11px #15191d40;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .service-link:hover,
  body.business-landing-page .business-offer-card:hover {
    translate: none;
  }
  body .btn-coral,
  body .faq-item,
  body .business-faq,
  body.business-landing-page .business-offer-card {
    transition: none;
  }
}