/* ==========================================================================
   Go APE — Adaptive Product Experiences
   One stylesheet, three display themes driven by [data-theme] on <html>.
   ========================================================================== */

/* ---- Theme tokens -------------------------------------------------------- */
:root,
[data-theme="light"] {
  --bg:        #ffffff;
  --surface:   #ffffff;
  --text:      #202020;
  --muted:     #565656;
  --divider:   #e5e5e5;
  --line-strong: #d1d1d1;
  --accent:    #f16722;   /* orange */
  --accent-quiet: #f16722;
  --soft:      #c1e8fa;   /* light blue chip / highlight */
  --chip:      #eaf6fd;
  --card:      #ffffff;
  --card-border: #e5e5e5;
  --focus:     #f16722;
  --logo-filter: none;
  --footer-bg: #f6f6f6;
  --footer-text: #565656;
}

[data-theme="dark"] {
  --bg:        #171717;
  --surface:   #232323;
  --text:      #f4f4f4;
  --muted:     #bdbdbd;
  --divider:   #333333;
  --line-strong: #3d3d3d;
  --accent:    #f16722;
  --accent-quiet: #f6a072;
  --soft:      #22333c;   /* restrained blue-tinted chip */
  --chip:      #22333c;
  --card:      #232323;
  --card-border: #343434;
  --focus:     #f6a072;
  --logo-filter: none;
  --footer-bg: #101010;
  --footer-text: #bdbdbd;
}

[data-theme="gray"] {
  --bg:        #d1d1d1;
  --surface:   #dedede;
  --text:      #242424;
  --muted:     #515151;
  --divider:   #a3a3a3;
  --line-strong: #9a9a9a;
  --accent:    #383838;   /* no orange/blue in gray mode */
  --accent-quiet: #383838;
  --soft:      #c4c4c4;
  --chip:      #c9c9c9;
  --card:      #dedede;
  --card-border: #b4b4b4;
  --focus:     #383838;
  --logo-filter: grayscale(1);  /* strip brand hues from marks */
  --footer-bg: #bdbdbd;
  --footer-text: #414141;
}

/* ---- Reset & base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Themeable properties transition on switch; not on first paint. */
body,
.utility, .masthead, .footer,
.theme__menu, .theme__toggle, .theme__option,
.product, .product__action,
.drawer__panel, .btn, .rule, .ico-chip, .col__head .ico {
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

p { margin: 0 0 1rem; }
img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: min(1120px, 100% - 48px);
  margin-inline: auto;
}

.rule {
  border: 0;
  border-top: 1px solid var(--divider);
  width: min(1120px, 100% - 48px);
  margin: 40px auto;
}

/* ---- Utility bar --------------------------------------------------------- */
.utility {
  border-bottom: 1px solid var(--divider);
  background: var(--bg);
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 46px;
  padding-block: 8px;
}
.utility__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* ---- Theme control ------------------------------------------------------- */
.theme { position: relative; flex: none; }

.theme__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.theme__toggle:hover { border-color: var(--accent); }
.theme__caret { flex: none; transition: transform .18s ease; }
.theme__toggle[aria-expanded="true"] .theme__caret { transform: rotate(180deg); }

.theme__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.theme__menu[hidden] { display: none; }

.theme__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
}
.theme__option:hover,
.theme__option.is-active { background: var(--chip); }
.theme__check { width: 16px; flex: none; color: var(--accent); visibility: hidden; }
.theme__option[aria-selected="true"] .theme__check { visibility: visible; }
.theme__option[aria-selected="true"] { font-weight: 600; }

/* ---- Masthead ------------------------------------------------------------ */
.masthead { padding-block: 22px; background: var(--bg); }
.masthead__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.masthead__spacer { display: block; }

.contact-trigger {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}
.contact-trigger:hover { border-color: var(--accent); }
.contact-trigger__icon { flex: none; }

.masthead__logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}
.masthead__logo-img {
  width: auto;
  height: 68px;
  max-width: 100%;
  object-fit: contain;
}
/* Show the mark that suits the active theme; hide the other. */
.masthead__logo-img--dark { display: none; }
[data-theme="dark"] .masthead__logo-img--light { display: none; }
[data-theme="dark"] .masthead__logo-img--dark { display: inline-block; }
/* Gray mode uses the dark-ink mark, desaturated. */
[data-theme="gray"] .masthead__logo-img--light { filter: grayscale(1); }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: 26px; }
.hero__title {
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--muted);
}

/* ---- Content rows -------------------------------------------------------- */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
}
.col__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 650;
}
.col__head .ico {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: 9px;
  background: var(--chip);
  color: var(--text);
  fill: currentColor;
  stroke: none;
}
/* icon paths that use stroke inherit currentColor already */

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  color: var(--text);
}
.list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}
[data-theme="gray"] .list li::before { background: var(--line-strong); }

.emph {
  margin-top: 14px;
  font-weight: 650;
  color: var(--text);
}

/* Truth -> Pattern line */
.motif {
  width: min(1120px, 100% - 48px);
  margin: 26px auto 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.motif span { color: var(--accent); padding: 0 4px; }
[data-theme="gray"] .motif span { color: var(--muted); }

/* ---- Portfolio ----------------------------------------------------------- */
.portfolio__intro { max-width: 60ch; margin-bottom: 26px; }
.portfolio__title {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product {
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.product__logo {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.product__logo img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: var(--logo-filter);
}
.product__name {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
}
.product__status {
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.product__copy {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--text);
}
.product__action {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}
.product__action:hover {
  border-color: var(--accent);
}

/* "Your Challenge" pitch card: same layout as the other product cards,
   dashed border as the one cue it's different. Logo sizing, gray-theme
   grayscale, and text color are already inherited from .product__logo img,
   .product__name, and .product__copy — only the mark swap and the two
   bold lines need their own rules. */
.product--soon { border-style: dashed; }

/* Show the mark that suits the active theme; hide the other. */
.soon-mark--dark { display: none; }
[data-theme="dark"] .soon-mark--light { display: none; }
[data-theme="dark"] .soon-mark--dark { display: inline-block; }

.product__copy--lead {
  font-weight: 700;
  margin-bottom: 10px;
}
/* ---- Footer -------------------------------------------------------------- */
.footer {
  margin-top: 56px;
  padding-block: 26px;
  background: var(--footer-bg);
  border-top: 1px solid var(--divider);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.footer__note { margin: 0; color: var(--footer-text); font-size: 15px; }
.footer__cta {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.footer__cta:hover { text-decoration-thickness: 3px; }

.footer__meta { display: flex; align-items: center; gap: 16px; }
.footer__copy { margin: 0; font-size: 13px; color: var(--footer-text); }

/* ---- Contact drawer ------------------------------------------------------ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
}
.drawer[hidden] { display: none; }

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .18s ease;
}
.drawer.is-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  position: relative;
  width: min(400px, 88vw);
  height: 100%;
  padding: 30px 28px;
  background: var(--surface);
  border-right: 1px solid var(--divider);
  box-shadow: 0 0 60px rgba(0,0,0,.22);
  transform: translateX(-100%);
  transition: transform .2s ease;
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel { transition: none; }
  .drawer__backdrop { transition: none; }
}

.drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}
.drawer__close:hover { border-color: var(--accent); }

.drawer__title {
  display: inline-block;
  margin: 6px 0 10px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.drawer__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.drawer__copy { color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.drawer__lead {
  margin: 0 0 12px;
  font-weight: 650;
  color: var(--text);
}

.drawer__actions { display: flex; flex-direction: column; gap: 18px; }
.drawer__contact { display: flex; flex-direction: column; gap: 10px; }
.drawer__value { font-size: 16px; font-weight: 600; }
.drawer__links { display: flex; gap: 10px; }
.drawer__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0a66c2;   /* LinkedIn blue */
  color: #ffffff;
}
.drawer__linkedin:hover { background: #084d94; }
[data-theme="gray"] .drawer__linkedin { background: #4a4a4a; color: #f2f2f2; }
[data-theme="gray"] .drawer__linkedin:hover { background: #383838; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.btn:hover { border-color: var(--accent); }

.drawer__email {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  word-break: break-all;
}
.drawer__pending { color: var(--muted); font-size: 15px; }

/* Content sits above the mascot. (Close button keeps its own absolute pos.) */
.drawer__title,
.drawer__copy,
.drawer__lead,
.drawer__actions,
.drawer__pending { position: relative; z-index: 1; }
.drawer__close { z-index: 2; }

/* Gorilla mascot: full width, bleeds to both edges, flush to the bottom.
   Starts below the contact text so it never sits under the fonts.
   Transparent PNG, so it reads in light, dark, and gray alike. */
.drawer__panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 410px;
  background-image: url("/assets/img/gorilla.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

/* Prevent background scroll while the drawer is open. */
body.drawer-open { overflow: hidden; }

/* ---- 404 page ------------------------------------------------------------ */
.notfound {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Sits a touch above dead-center so it feels intentional, not generic. */
  padding: clamp(48px, 11vh, 132px) 24px 64px;
}
.notfound__img {
  width: min(360px, 74vw);
  height: auto;
  margin-bottom: 6px;
}
.notfound__code {
  margin: 4px 0 12px;
  font-size: clamp(52px, 9vw, 68px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.notfound__msg {
  margin: 0 auto 10px;
  max-width: 26ch;
  font-size: clamp(19px, 2.4vw, 22px);
  font-weight: 650;
  color: var(--text);
}
.notfound__sub {
  margin: 0 auto 28px;
  font-size: 16px;
  color: var(--muted);
}
.notfound__btn { align-self: center; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .utility__line { font-size: 15px; }
  .theme__menu { right: auto; left: 0; }
  .products { grid-template-columns: 1fr; }
  .utility__inner { flex-wrap: wrap; gap: 8px 16px; }
  .masthead__inner { grid-template-columns: auto 1fr; }
  .masthead__logo { justify-self: end; }
  .masthead__logo-img { height: 46px; }
  .masthead__spacer { display: none; }
  .footer__inner { justify-content: flex-start; }
}