/* ══════════════════════════════════════════════════════════════════════════
   LOOM FACTOR — SHARED COMPONENT LIBRARY  (single source of truth)
   Edit this ONE file to restyle Buttons & FAQ across every page.
   Linked by:  /v2/ (Presentation page)  ·  /v2/landing*.html
   Behaviour (tilt + accordion) lives in /_loom/components.js
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── BUTTON ─────────────────────────────────
   Full button (with hover text-flip):
     <a class="lf-btn lf-btn--gold">
       <span class="btn-shard"></span>
       <span class="btn-inner">
         <span class="btn-label-1">Start a project</span>
         <span class="btn-label-2">Let's go</span>
       </span>
     </a>
   Simple button (no text-flip):
     <a class="lf-btn lf-btn--gold"><span class="btn-shard"></span>Get started</a>
   Variants: lf-btn--gold · lf-btn--navy · lf-btn--ghost
   components.js auto-wires the shard sweep, text-flip and 3D spring tilt.
   ────────────────────────────────────────────────────────────────────────── */
.lf-btn{
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; box-sizing:border-box; text-decoration:none;
  font-family:'Google Sans','Inter',sans-serif; font-weight:600; font-size:15px;
  border:none; height:52px; min-width:160px; padding:15px 34px; border-radius:50px;
}

/* — Variants — */
.lf-btn--gold{ background:#eab63e; color:#000; box-shadow:0 4px 18px rgba(234,182,62,.32); }
.lf-btn--gold:hover{ box-shadow:0 12px 32px rgba(234,182,62,.5) !important; }

.lf-btn--navy{ background:#1d2856; color:#fff; box-shadow:0 8px 24px -10px rgba(29,40,86,.55); }
.lf-btn--navy:hover{ box-shadow:0 14px 34px -12px rgba(29,40,86,.7) !important; }

.lf-btn--ghost{ background:transparent; color:#1d2856; border:1.5px solid rgba(29,40,86,.35); box-shadow:none; }
.lf-btn--ghost:hover{ border-color:#1d2856; }

/* — Hover text-flip — */
.lf-btn .btn-inner{
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; white-space:nowrap;
}
.lf-btn .btn-label-1{ display:block; white-space:pre; position:relative; top:0%;
  transition:top .35s cubic-bezier(.4,0,.2,1); }
.lf-btn .btn-label-2{ display:block; white-space:pre; position:absolute; top:169%; left:50%;
  transform:translateX(-50%); transition:top .35s cubic-bezier(.4,0,.2,1); color:#fff; }
.lf-btn:hover .btn-label-1{ top:-169%; }
.lf-btn:hover .btn-label-2{ top:50%; transform:translateX(-50%) translateY(-50%); }

/* — Shard sweep — */
.lf-btn .btn-shard{
  position:absolute; width:50px; height:200%; top:-123.214%; left:calc(-15.8974% - 25px);
  background:rgba(255,255,255,.3); filter:blur(5px); transform:rotate(45deg);
  transition:left .45s ease, top .45s ease; pointer-events:none; z-index:2;
}
.lf-btn:hover .btn-shard{ top:-12.5%; left:calc(122.051% - 25px); }

/* — Tilt wrapper (injected by components.js) — */
.btn-tilt{ display:inline-block; }


/* ────────────────────────────────── FAQ ───────────────────────────────────
   <div class="faq-list">
     <div class="faq-item">
       <button class="faq-q" aria-expanded="false">
         Question text
         <span class="faq-icon"><span class="faq-plus">+</span><span class="faq-minus">&minus;</span></span>
       </button>
       <div class="faq-a"><p>Answer text</p></div>
     </div>
   </div>
   ────────────────────────────────────────────────────────────────────────── */
.faq-list{ max-width:700px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.faq-item{ background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.05);
  transition:transform .3s ease, box-shadow .3s ease; }
.faq-item:hover{ transform:scale(1.02); box-shadow:0 6px 28px rgba(0,0,0,.09); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 24px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Google Sans',sans-serif; font-size:16px; font-weight:700; color:#1d2856;
}
.faq-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; background:#ebeced;
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:300; color:#1d2856; line-height:1;
}
.faq-plus{ display:block; }
.faq-minus{ display:none; }
.faq-q[aria-expanded="true"] .faq-plus{ display:none; }
.faq-q[aria-expanded="true"] .faq-minus{ display:block; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-a.open{ max-height:420px; }
.faq-a p{ font-family:'Google Sans',sans-serif; font-size:14px; color:#6c7077; line-height:1.75; margin:0; padding:0 28px 24px; }


/* ───────────────────────────── TYPOGRAPHY ─────────────────────────────────
   Site-wide: section headings (H2 / H3) are NOT bold — lighter, editorial weight.
   !important so it overrides the inline font-weight:700 baked into the headings.
   Linked by web.html, web2.html, landing3.html and the presentation page.
   ────────────────────────────────────────────────────────────────────────── */
h2, h3 { font-weight: 400 !important; }


/* ──────────────────────── SERVICES DROPDOWN (nav) ─────────────────────────
   Lets every service page jump to the others. Markup goes inside .nh-nav-links:
     <div class="nv-drop"><button class="nv-drop-trigger">Services …</button>
       <div class="nv-menu">…4 service links…</div></div>
   Behaviour wired by components.js. The home page keeps its own inline copy.
   ────────────────────────────────────────────────────────────────────────── */
.nv-drop{ position:relative; }
.nv-drop-trigger{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:'Google Sans',sans-serif; font-size:16px; font-weight:500; color:#c6ccda; padding:0; transition:color .2s; }
.nv-drop-trigger:hover, .nv-drop[data-open="true"] .nv-drop-trigger{ color:#fff; }
.nv-chev{ transition:transform .25s ease; margin-top:1px; }
.nv-drop[data-open="true"] .nv-chev{ transform:rotate(180deg); }
.nv-menu{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:330px; padding:10px; background:#fff; border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(20,29,64,.45), 0 2px 10px rgba(20,29,64,.10);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:60; }
.nv-drop[data-open="true"] .nv-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nv-menu::before{ content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nv-mi{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:13px; text-decoration:none;
  transition:background .18s ease; }
.nv-mi:hover{ background:#f4f5ef; }
.nv-mi-ic{ width:42px; height:42px; flex-shrink:0; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(43,63,140,.08); color:var(--navy,#1d2856); }
.nv-mi-ic svg{ width:21px; height:21px; }
.nv-mi-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.nv-mi-tx b{ font-family:'Google Sans',sans-serif; font-size:15px; font-weight:700; color:var(--navy,#1d2856); }
.nv-mi-tx i{ font-style:normal; font-family:'Google Sans',sans-serif; font-size:12.5px; color:#6f7480; }