/* ===========================================================================
   Zoic Software landing page
   Layout and components hand-authored from the Claude Design artboard
   MarketingPage.dc.html. Component visuals (Button/Card/Badge/Tag/Dialog/
   IconButton) mirror _ds_bundle.js; every value resolves to a token.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--surface-page);
  font:var(--type-body);
  font-family:var(--font-ui);
  color:var(--text-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
button{font:inherit;margin:0}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs)}
.on-dark :focus-visible{outline-color:var(--pulse-400)}

/* Screen-reader-only, but focusable (skip link). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:var(--space-5);left:var(--space-5);z-index:100;
  width:auto;height:auto;margin:0;clip-path:none;white-space:normal;
  padding:var(--space-4) var(--space-6);border-radius:var(--radius-sm);
  background:var(--surface-card);color:var(--text-strong);
  font:var(--type-label);box-shadow:var(--shadow-lg);
}

/* --- layout shell -------------------------------------------------------- */
.wrap{max-width:var(--width-content);margin:0 auto;padding:0 var(--space-9)}
.section-pad{padding-top:var(--space-13);padding-bottom:var(--space-13)}
.hairline-b{border-bottom:var(--border-width-hair) solid var(--border-hairline)}

.eyebrow{
  font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--text-subtle);
}
.headline{
  font-family:var(--font-serif);font-weight:var(--weight-regular);
  font-size:clamp(28px,1.35rem + 2.1vw,var(--text-3xl));
  line-height:var(--leading-snug);color:var(--text-strong);
  letter-spacing:var(--tracking-tight);
}
.lede{font:var(--type-body-serif);color:var(--text-muted);max-width:46ch}

/* --- icons (inline lucide sprite, ISC) ----------------------------------- */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{
  display:inline-block;flex:0 0 auto;width:20px;height:20px;
  vertical-align:-.14em;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.icon--sm{width:16px;height:16px}
.icon--md{width:20px;height:20px}
.icon--lg{width:24px;height:24px}

/* --- Button -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);line-height:1.25;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-instant) var(--ease-growth);
}
.btn:active{transform:scale(var(--press-scale))}
.btn:hover{text-decoration:none}

.btn--sm{padding:5px 12px;font-size:var(--text-sm);border-radius:var(--radius-sm);gap:var(--space-3)}
.btn--md{padding:8px 16px;font-size:var(--text-base);border-radius:var(--radius-md);gap:var(--space-4)}
.btn--lg{padding:12px 22px;font-size:var(--text-md);border-radius:var(--radius-md);gap:10px}
.btn--sm .icon,.btn--md .icon{width:16px;height:16px}
.btn--lg .icon{width:20px;height:20px}

.btn--primary{
  background:var(--action-primary);color:var(--text-inverse);
  border:var(--border-width-hair) solid var(--action-primary);
}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--text-inverse)}

.btn--accent{
  background:var(--action-accent);color:var(--bone-50);
  border:var(--border-width-hair) solid var(--action-accent);
}
.btn--accent:hover{
  background:var(--action-accent-hover);border-color:var(--action-accent-hover);
  color:var(--bone-50);
}

.btn--secondary{
  background:var(--surface-card);color:var(--text-body);
  border:var(--border-width-hair) solid var(--border-default);
  box-shadow:var(--shadow-sm);
}
.btn--secondary:hover{
  background:var(--bone-100);border-color:var(--border-strong);color:var(--text-body);
}

.btn--ghost{
  background:transparent;color:var(--text-body);
  border:var(--border-width-hair) solid transparent;
}
.btn--ghost:hover{background:var(--action-ghost-hover);color:var(--text-strong)}

/* --- IconButton ---------------------------------------------------------- */
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;
  border-radius:var(--radius-sm);transition:var(--transition-control);
  background:transparent;border:var(--border-width-hair) solid transparent;
  color:var(--text-muted);
}
.iconbtn:hover{background:var(--action-ghost-hover);color:var(--text-strong)}
.iconbtn .icon{width:16px;height:16px}

/* --- Card ---------------------------------------------------------------- */
.card{
  border-radius:var(--radius-lg);padding:22px;
  background:var(--surface-card);
  border:var(--border-width-hair) solid var(--border-subtle);
  box-shadow:var(--shadow-sm);
  transition:var(--transition-surface);
}
.card--interactive{
  cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;
  align-items:stretch;
}
.card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* --- Tag ----------------------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:var(--space-3);padding:3px 9px;
  border-radius:var(--radius-sm);font:var(--type-caption);
  font-weight:var(--weight-medium);
  background:var(--surface-card);color:var(--text-muted);
  border:var(--border-width-hair) solid var(--border-subtle);
  transition:var(--transition-control);
}

/* --- header -------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(246,241,231,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:var(--border-width-hair) solid var(--border-hairline);
}
.site-header__bar{
  max-width:var(--width-content);margin:0 auto;padding:0 var(--space-9);
  min-height:68px;display:flex;align-items:center;gap:var(--space-9);
}
.wordmark{
  font-family:var(--font-serif);font-size:26px;line-height:1;
  letter-spacing:-.02em;color:var(--text-strong);text-decoration:none;
}
.wordmark:hover{color:var(--text-strong)}
.site-nav{display:flex;gap:var(--space-2);flex:1}
.site-nav a{
  padding:7px 12px;font:var(--type-label);color:var(--text-muted);
  text-decoration:none;border-radius:var(--radius-sm);
  transition:var(--transition-control);
}
.site-nav a:hover{color:var(--text-strong);background:var(--action-ghost-hover)}
.nav-toggle{display:none}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:var(--border-width-hair) solid var(--border-hairline)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,35,38,.82) 0%,rgba(24,35,38,.62) 48%,rgba(24,35,38,.78) 100%);
}
.hero__inner{
  position:relative;max-width:var(--width-content);margin:0 auto;
  padding:132px var(--space-9) 124px;
  display:flex;flex-direction:column;gap:22px;align-items:flex-start;
}
.hero h1{
  font-family:var(--font-serif);font-weight:var(--weight-light);
  font-size:clamp(32px,1.3rem + 4vw,var(--text-5xl));
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);
  color:var(--bone-50);max-width:16ch;
  text-shadow:0 1px 24px rgba(18,26,28,.45);
}
.hero__lede{
  font:var(--type-body-serif);color:var(--bone-200);max-width:46ch;
  text-shadow:0 1px 16px rgba(18,26,28,.4);
  /* Keeps a single short word off the last line. Ignored where unsupported. */
  text-wrap:pretty;
}
.hero__actions{display:flex;gap:var(--space-5);padding-top:var(--space-3);flex-wrap:wrap}

/* --- mission ------------------------------------------------------------- */
.mission{background:var(--surface-raised)}
.mission__inner{display:flex;flex-direction:column;gap:var(--space-10)}
.mission__intro{display:flex;gap:var(--space-11);align-items:flex-start;flex-wrap:wrap}
.mission__intro > div{display:flex;flex-direction:column;gap:10px;min-width:280px;flex:1}
.mission__intro .headline{max-width:18ch}
.mission__intro p{flex:1;padding-top:var(--space-4)}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.pillar{display:flex;flex-direction:column;gap:var(--space-5);min-height:180px}
.pillar__name{font:var(--type-title);font-size:var(--text-lg);color:var(--text-strong)}
.pillar__body{font:var(--type-body);font-size:var(--text-sm);color:var(--text-muted);line-height:1.6}

/* --- portfolio ----------------------------------------------------------- */
.portfolio__inner{display:flex;flex-direction:column;gap:var(--space-10)}
.portfolio__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-9);flex-wrap:wrap;
}
.portfolio__head > div{display:flex;flex-direction:column;gap:10px}
.portfolio__hint{font:var(--type-body);font-size:14px;color:var(--text-subtle)}

/* One product, so the grid is a single full-width feature card rather than a
   lonely third-width tile. Adding a second card restores a two-up grid. */
.projects{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.project{
  display:flex;flex-direction:row;align-items:center;
  gap:var(--space-9);padding:28px;
}
.project__text{display:flex;flex-direction:column;gap:var(--space-5);flex:1;min-width:0}
.project__tags{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* Signals that the whole card opens the detail view. */
.project__more{
  flex:none;align-self:center;margin-left:var(--space-6);
  color:var(--text-subtle);display:inline-flex;
  transition:transform var(--duration-base) var(--ease-growth),color var(--duration-fast) var(--ease-growth);
}
.card--interactive:hover .project__more{transform:translateX(3px);color:var(--text-accent)}
.project__name{font:var(--type-title);font-size:25px;color:var(--text-strong)}
.project__blurb{
  font:var(--type-body);color:var(--text-muted);line-height:1.6;max-width:62ch;
}
.project__meta{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  font:var(--type-label);color:var(--text-subtle);
}
.project__since{font-family:var(--font-mono);font-size:var(--text-2xs)}

/* The logo file carries its own flat background (#F9FAF4). Matching the plate
   to it makes the crop read as a deliberate logo plate instead of a stray
   cream square on the white card. */
.logo-plate{
  --plate-bg:#F9FAF4;
  width:160px;height:160px;flex:none;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--plate-bg);
  border:var(--border-width-hair) solid var(--border-subtle);
  display:grid;place-items:center;
}
.logo-plate img{width:100%;height:100%;object-fit:contain}
.logo-plate--lg{width:180px;height:180px}

/* --- contact + footer ---------------------------------------------------- */
.contact{background:var(--surface-inverse)}
.contact__inner{
  padding-top:var(--space-12);padding-bottom:var(--space-12);
  display:flex;align-items:center;gap:var(--space-10);flex-wrap:wrap;
}
.contact__copy{flex:1;min-width:300px;display:flex;flex-direction:column;gap:10px}
.contact h2{
  font-family:var(--font-serif);font-weight:var(--weight-light);
  font-size:clamp(28px,1.35rem + 2.1vw,var(--text-3xl));
  line-height:var(--leading-snug);color:var(--bone-50);
}
.contact p{font:var(--type-body);color:var(--slate-300);max-width:44ch}

.site-footer{border-top:var(--border-width-hair) solid rgba(246,241,231,.12)}
.site-footer__bar{
  padding-top:var(--space-8);padding-bottom:var(--space-8);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-6);flex-wrap:wrap;
  font:var(--type-label);color:var(--slate-400);
}
.site-footer .wordmark{font-size:18px;color:var(--bone-100)}
.site-footer__meta{
  display:flex;flex-direction:column;gap:var(--space-2);
  align-items:flex-end;text-align:right;
}
.site-footer a{color:var(--slate-300)}
.site-footer a:hover{color:var(--bone-50)}
.site-footer__credit{font:var(--type-caption);color:var(--slate-500)}

/* --- project dialog ------------------------------------------------------ */
.project-dialog{
  width:640px;max-width:92vw;padding:0;
  background:var(--surface-card);
  border:var(--border-width-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
  color:var(--text-body);overflow:visible;
}
.project-dialog[open]{animation:zoic-rise var(--duration-base) var(--ease-growth)}
.project-dialog::backdrop{
  background:var(--veil);
  -webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);
}
.project-dialog__head{
  display:flex;align-items:flex-start;gap:var(--space-6);
  padding:var(--space-7) var(--space-7) 0;
}
.project-dialog__close{margin-left:auto;flex:none}
.project-dialog__body{
  padding:var(--space-6) var(--space-7) var(--space-7);
  display:flex;flex-direction:column;gap:var(--space-8);
}
.project-dialog__ident{display:flex;align-items:center;gap:var(--space-7)}
.project-dialog__titles{display:flex;flex-direction:column;gap:var(--space-4)}
.project-dialog h3{
  font-family:var(--font-serif);font-weight:var(--weight-regular);
  font-size:clamp(26px,1.2rem + 1.6vw,33px);line-height:1.1;
  color:var(--text-strong);
}
.project-dialog__kind{font:var(--type-body);font-size:14px;color:var(--text-muted)}
.project-dialog__since{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle)}
.project-dialog__desc{
  font:var(--type-body-serif);color:var(--text-body);line-height:1.65;max-width:56ch;
}
.project-dialog__tags{display:flex;gap:10px;flex-wrap:wrap}
.project-dialog__foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:var(--border-width-hair) solid var(--border-subtle);padding-top:var(--space-7);
}
.project-dialog__domain{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle)}
body.dialog-open{overflow:hidden}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .mission__intro{gap:var(--space-9)}
  .hero__inner{padding-top:var(--space-14);padding-bottom:112px}
}

@media (max-width:760px){
  .wrap,.site-header__bar,.hero__inner{padding-left:var(--space-8);padding-right:var(--space-8)}
  .section-pad{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .hero__inner{padding-top:104px;padding-bottom:96px;gap:var(--space-7)}
  .mission__inner,.portfolio__inner{gap:var(--space-9)}
  .portfolio__head{align-items:flex-start}
  .contact__inner{padding-top:var(--space-11);padding-bottom:var(--space-11);gap:var(--space-8)}

  /* Header collapses to a disclosure menu. */
  /* Once the bar wraps, min-height alone no longer centres the first row,
     so the vertical rhythm comes from padding instead. */
  .site-header__bar{
    gap:var(--space-6);min-height:60px;flex-wrap:wrap;
    padding-top:var(--space-5);padding-bottom:var(--space-5);
  }
  .nav-toggle{display:inline-flex;margin-left:auto}
  .site-nav{
    display:none;order:3;flex:0 0 100%;flex-direction:column;
    gap:var(--space-1);padding-top:var(--space-1);
  }
  .site-header[data-nav-open="true"] .site-nav{display:flex}
  .site-header[data-nav-open="true"]{border-bottom-color:var(--border-subtle)}
  .site-nav a{padding:10px 12px;font-size:var(--text-base)}
  .site-header__cta{display:none}
  .site-header[data-nav-open="true"] .site-header__cta{
    display:inline-flex;order:4;align-self:flex-start;margin:var(--space-1) 12px 0;
  }

  .site-footer__meta{align-items:flex-start;text-align:left}
}

@media (max-width:700px){
  /* Feature card stacks: plate above the text. */
  .project{flex-direction:column;align-items:flex-start;gap:var(--space-7);padding:24px}
  .project__blurb{max-width:none}
  .project__more{display:none}
}

@media (max-width:560px){
  .pillars{grid-template-columns:1fr}
  .pillar{min-height:0}
  .logo-plate{width:120px;height:120px}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .project-dialog__ident{gap:var(--space-6)}
  .logo-plate--lg{width:132px;height:132px}
  .project-dialog__head,.project-dialog__body{
    padding-left:var(--space-6);padding-right:var(--space-6);
  }
  .site-footer__bar{justify-content:flex-start;gap:var(--space-4)}
}

@media (max-width:420px){
  .wrap,.site-header__bar,.hero__inner{
    padding-left:var(--space-7);padding-right:var(--space-7);
  }
  .project-dialog__ident{flex-direction:column;align-items:flex-start}
}