/* ============================================================
   NORRTH STUDIO — COMPONENTS
   Reusable pieces shared across sections (and future pages).
   ============================================================ */

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em 1.7em;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--accent); color: #0a0a0a; }
.btn-primary:hover{ background: #ff6b17; }
.btn-primary:disabled{ opacity: .7; transform: none; cursor: default; }
.btn-ghost{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--accent); }
.btn-block{ width: 100%; }
.btn-sm{ padding: .6em 1.2em; font-size: .85rem; }

/* Nav */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); }
.brand{ display: flex; align-items: center; gap: .6em; }
.brand-logo{ height: 40px; width: auto; }

/* Animated logo reveal — real artwork (assets/compass.png + logoname.png),
   not a coded redraw. The nav logo stays a plain static image on purpose;
   this only appears in the hero and the process section. See DECISIONS.md
   for why the nav and this are deliberately different. Size is set per
   placement (.hero-visual / .approach-visual below), not here. */
.logo-reveal{ display: flex; flex-direction: column; align-items: center; }
.logo-reveal-compass{
  display: block;
  transform: rotate(180deg);
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}
.logo-reveal-compass.is-settled{ transform: rotate(0deg); }
.logo-reveal-name{
  display: block;
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay: 1s;
}
.logo-reveal-name.is-settled{ transform: scale(1); }

.main-nav{ display: flex; align-items: center; gap: 2.1em; font-size: .92rem; font-family: var(--font-display); }
.main-nav a:not(.btn):hover{ color: var(--accent); }
.nav-toggle{ display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span{ width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle.is-open span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }

/* Generic card */
.card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8em;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.card:hover{ border-color: var(--accent-dark); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card h3{ font-size: 1.15rem; margin-bottom: .4em; }
.card p{ color: var(--muted); font-size: .925rem; margin: 0; }

.bearing-tag{
  display: inline-block;
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: .08em;
  font-size: .82rem;
  margin-bottom: 1em;
}

/* Stats strip */
.stats-strip{ display: flex; flex-wrap: wrap; gap: 1.2em 2.6em; justify-content: center; }
.stat-value{ font-family: var(--font-display); color: var(--accent); font-weight: 700; font-size: 1.1rem; }
.stat-label{ font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Pricing card */
.price-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2em 1.8em;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.is-featured{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.price-card__featured-tag{
  position: absolute; top: -.8em; left: 1.8em;
  background: var(--accent); color: #0a0a0a;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .3em .8em; border-radius: 50px;
}
.price-card__name{ font-family: var(--font-display); font-size: 1.05rem; color: var(--muted); margin-bottom: .3em; }
.price-card__amount{ font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; margin-bottom: .1em; }
.price-card__amount span{ font-size: .95rem; color: var(--muted); font-weight: 400; }
.price-card__desc{ color: var(--muted); font-size: .88rem; margin-bottom: 1.5em; }
.price-card__features{ display: flex; flex-direction: column; gap: .7em; margin: 0 0 2em; flex: 1; }
.price-card__features li{ display: flex; gap: .6em; align-items: flex-start; font-size: .88rem; color: var(--ink); }
.price-card__features svg{ flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); margin-top: .15em; }

.maintenance-note{
  margin-top: 2.5em;
  padding: 1.5em 1.8em;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.maintenance-note p{ margin: .3em 0 0; color: var(--muted); font-size: .9rem; }

/* Portfolio / work card */
.work-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.work-card:hover{ border-color: var(--accent-dark); transform: translateY(-3px); }
.work-card__frame{
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, #161616, #0d0d0d);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.work-card__frame img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work-card__url{ font-family: var(--font-display); color: var(--muted); font-size: 1.15rem; letter-spacing: .01em; }
.work-card__body{ padding: 1.5em 1.6em; }
.work-card__tag{ font-family: var(--font-display); font-size: .74rem; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5em; }
.work-card__title{ font-size: 1.1rem; margin-bottom: .3em; }
.work-card__desc{ color: var(--muted); font-size: .88rem; margin-bottom: 1.1em; }
.work-card.is-placeholder{ opacity: .55; }
.work-card.is-placeholder .work-card__frame{ border: 1px dashed var(--line-strong); background: none; }
.work-card__soon{ font-family: var(--font-display); color: var(--muted-dim); font-size: .85rem; text-align: center; padding: 0 1.5em; }

/* Featured work card — full-width, live animated preview */
.work-card--featured{ grid-column: 1 / -1; }
.work-card--featured .work-card__frame{
  aspect-ratio: 16 / 7;
  background: #050505;
}
.work-card--featured .work-card__frame iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 340%;
  border: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 7s cubic-bezier(.4,0,.2,1);
}
.work-card--featured:hover .work-card__frame iframe{ transform: translateY(-64%); }
.work-card--featured .work-card__badge{
  position: absolute;
  top: 1em; left: 1em;
  z-index: 2;
  display: flex; align-items: center; gap: .5em;
  background: rgba(10,10,10,.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong);
  border-radius: 50px;
  padding: .4em .9em .4em .7em;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--ink);
}
.work-card--featured .work-card__badge-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: work-badge-pulse 2s infinite;
}
@keyframes work-badge-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70%{ box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100%{ box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.work-card--featured .work-card__body{ padding: 2em 2.2em 2.2em; }
.work-card--featured .work-card__title{ font-size: 1.7rem; }
.work-card--featured .work-card__desc{ font-size: 1rem; max-width: 640px; }

@media (max-width: 640px){
  .work-card--featured .work-card__frame{ aspect-ratio: 4 / 5; }
}

/* FAQ accordion */
.faq-list{ max-width: 760px; }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-question{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1.4em 0;
  background: none; border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
}
.faq-question:hover{ color: var(--accent); }
.faq-icon{
  flex-shrink: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.3rem; font-weight: 400;
  transition: transform var(--transition);
}
.faq-item.is-open .faq-icon{ transform: rotate(45deg); }
.faq-answer{
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease);
  color: var(--muted);
  font-size: .95rem;
}
.faq-answer p{ padding-bottom: 1.4em; margin: 0; }
.faq-item.is-open .faq-answer{ max-height: 300px; }

/* Forms */
.field{ margin-bottom: 1.2em; }
.field > label{ display: block; font-family: var(--font-display); font-size: .85rem; color: var(--muted); margin-bottom: .5em; }
.field input, .field textarea, .field select{
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85em 1em;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline: none; border-color: var(--accent); }

.option-grid{ display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: .8em; margin-bottom: 1.5em; }
.option-card{
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1em;
  cursor: pointer;
  text-align: center;
  font-size: .9rem;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.option-card:hover{ border-color: var(--accent-dark); }
.option-card.is-selected{ border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.option-card input{ display: none; }

.form-steps{ display: flex; gap: .5em; margin-bottom: 2em; }
.form-step-dot{ height: 3px; flex: 1; background: var(--line); border-radius: 2px; overflow: hidden; position: relative; }
.form-step-dot::after{ content: ''; display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--transition); }
.form-step-dot.is-done::after, .form-step-dot.is-active::after{ width: 100%; }

.form-panel{ display: none; }
.form-panel.is-active{ display: block; }
.form-nav{ display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: .5em; }
.consent-field{ display: flex; gap: .6em; align-items: flex-start; margin-bottom: 1.4em; }
.consent-field input{ width: auto; margin-top: .3em; }
.consent-field label{ margin: 0; font-size: .82rem; color: var(--muted); }
.consent-field a{ color: var(--accent); }
.form-error{ color: #f87171; font-size: .85rem; margin: -.5em 0 1.2em; }
.form-error a{ color: inherit; text-decoration: underline; }

/* Footer */
.site-footer{ padding: 3em 0 2.5em; }
.footer-inner{ display: flex; flex-wrap: wrap; gap: 1.5em; justify-content: space-between; align-items: flex-start; }
.footer-brand{ display: flex; align-items: center; gap: .8em; }
.footer-logo{ height: 30px; width: auto; opacity: .85; }
.footer-brand span{ font-family: var(--font-display); color: var(--muted); font-size: .85rem; }
.footer-links{ display: flex; flex-wrap: wrap; gap: 1.6em; font-size: .85rem; color: var(--muted); }
.footer-links a:hover{ color: var(--accent); }
.footer-copy{ width: 100%; margin-top: 2em; padding-top: 1.5em; border-top: 1px solid var(--line); color: var(--muted-dim); font-size: .8rem; }