/* =============================================================
   PULSE - Monolith override layer for Trebots
   -------------------------------------------------------------
   Loads AFTER styles.css and overrides it. Nothing in styles.css
   is modified. To revert completely: delete the <link> to this
   file (and the Barlow Condensed font link) in index.html.

   The look is defined by three removals - no rounded corners,
   no glow, no gradients - plus condensed uppercase display type,
   a visible six-column grid, and hairline cell borders.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  --bg: #000000;
  --bg-2: #000000;
  --panel: transparent;
  --border: rgba(0, 229, 255, 0.24);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --r: 0;

  /* neutralises every cyan→violet gradient into flat cyan */
  --violet: #00e5ff;

  --hair: rgba(255, 255, 255, 0.14);
  --hair-cy: rgba(0, 229, 255, 0.24);
  --grid: rgba(0, 229, 255, 0.075);
  --ao: #00131a;                    /* text on a cyan fill */
  --disp: "Barlow Condensed", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. GROUND + SIX-COLUMN GRID ---------- */
body { background: #000; }

body::before {
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 16.6666%),
    #000;
}
@media (max-width: 760px) {
  body::before {
    background:
      repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 33.3333%),
      #000;
  }
}

/* kill the ambient colour bands behind sections */
.who, .promise { background: none; }
.estimate-featured::before { background: none; }

/* ---------- 3. THE THREE REMOVALS ---------- */
/* Deliberately broad: this is what turns the site flat in one pass.
   Focus rings are restored in section 16. */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

/* gradient-filled text becomes solid cyan */
.grad,
.hero-title .hero-rotate,
.step-num,
.stat-num,
.est-amount {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* gradient-filled panels become flat */
.card-glow,
.card:hover .card-glow,
.founder-note::before,
.est-offer::after,
.card-invite,
.founding-offer {
  background: none !important;
}

/* ---------- 4. DISPLAY TYPE ----------
   The condensed uppercase face is the signature of this direction, so
   it stays - but only where it is doing that job: the hero, the section
   titles, the big numbers and the brand. It used to run all the way down
   to card titles, FAQ questions and trust labels, which made every
   sub-heading shout at the same volume as the headline and turned each
   section into a wall of caps. Those drop back to Sora, sentence-case,
   so the page has a loud voice and a normal one instead of one loud
   voice everywhere. */
.hero-title,
.section-title,
.legal h1,
.brand-name,
.stat-num,
.est-amount,
.step-num,
.why-num {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.hero-title {
  font-size: clamp(2.7rem, 6.6vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  margin-bottom: 28px;
}
/* the outlined line - the signature move of this direction.
   Direct child only, so the rotating word inside .hero-rotate-line
   keeps its solid cyan fill. */
.hero-title > span:last-child {
  -webkit-text-stroke: 1px var(--cyan);
  color: transparent;
}

.section-title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.0;
  letter-spacing: 0.005em;
  max-width: 22ch;
  margin-bottom: 22px;
}
.legal h2 { font-family: "Sora", sans-serif; font-weight: 700; letter-spacing: -0.02em; }

/* Sub-headings: one quiet face for everything below H2. */
.card h3, .step h3, .why-item h3, .pkg-card h3,
.guarantee strong, .trust-item strong, .founder-meta strong,
.founding-copy h3, .faq-item summary, .chat-head-info strong, .lang-card h3 {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.015em;
}
.card h3, .step h3, .why-item h3, .pkg-card h3 { font-size: 1.16rem; line-height: 1.3; margin-bottom: 10px; }
.faq-item summary { font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.4; }
.trust-item strong, .guarantee strong { font-size: 1.02rem; }
.stat-num { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 0.9; }
.brand-name { letter-spacing: 0.18em; font-size: 1.35rem; }

/* Body copy inside cells: a touch larger, more leading, real contrast. */
.card p, .step p, .why-item p, .pkg-card p, .trustx-item > span, .proof-facts li { line-height: 1.62; }
.lede, .hero-sub { line-height: 1.62; }
.hero-sub { max-width: 560px; }

/* section labels become mono ticks instead of pills. 0.2em tracking at
   0.62rem was the least readable type on the page; these are now a
   size and a tracking that can actually be read at arm's length. */
.kicker,
.card-tag, .pkg-badge, .founding-badge, .est-spotlight, .est-save-tag,
.hero-badge, .htag, .stack-track span, .stat-label, .trust-item span {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.kicker {
  border: 0;
  padding: 0;
  font-size: 0.72rem;
  color: var(--cyan);
  margin-bottom: 18px;
}
.hero-badge { font-size: 0.72rem; }
.htag { font-size: 0.74rem; }
.why-num, .step-num {
  font-family: var(--disp);
  -webkit-text-stroke: 1px var(--cyan);
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.step-num { font-size: 3rem; line-height: 0.8; }

/* Two more H3-level headings that styles.css sets in the condensed face
   directly. Same treatment: the product names in the proof strip and the
   "check we're real" heading step down to the quiet face. */
.proof-name {
  font-family: "Sora", sans-serif;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: 1.22rem;
  line-height: 1.25;
}
.ident-h {
  font-family: "Sora", sans-serif;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.25;
}
.proof-go, .ident-k { letter-spacing: 0.12em; font-size: 0.7rem; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  font-family: var(--disp);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.09em;
  font-size: 0.98rem;
  border: 1px solid var(--cyan);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: none; }
.btn-primary { background: var(--cyan); color: var(--ao); }
.btn-primary:hover { background: #fff; border-color: #fff; color: #000; }
.btn-ghost { background: none; color: #fff; border-color: var(--hair); }
.btn-ghost:hover { background: none; border-color: #fff; color: #fff; }

/* ---------- 6. NAV ---------- */
.nav, .nav.scrolled {
  background: #000;
  border-bottom: 1px solid var(--hair-cy);
}
.brand-name { text-transform: uppercase; }
.brand-tag { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.18em; text-transform: uppercase; }
.nav-links a {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}
.nav-links a::after { background: var(--cyan); }

/* Dropdowns: the trigger wears the condensed nav type, but the items inside
   stay sentence-case Inter - uppercase tracking is unreadable at this size
   and these are real destinations, not labels. */
.nav-trigger {
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}
.nav-menu { background: #000; border: 1px solid var(--hair-cy); padding: 0; }
.nav-links .nav-menu a {
  font-family: "Inter", sans-serif;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hair);
}
.nav-links .nav-menu a:last-child { border-bottom: 0; }
.nav-links .nav-menu a:hover { background: var(--cyan); color: var(--ao); }
.nav-links .nav-menu a:hover .nav-menu-d { color: rgba(0, 19, 26, 0.72); }

.lang-switch { background: none; border: 1px solid var(--hair); color: #fff; }
.lang-switch:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------- 6b. PROOF STRIP ---------- */
.proof { border-color: var(--hair-cy); }
.proof-grid { background: var(--hair); border-color: var(--hair); }
.proof-card { background: #000; }
.proof-card:hover { background: rgba(0, 229, 255, 0.06); }

/* ---------- 7. HAIRLINE CELL GRIDS ---------- */
/* Borders on the cells, collapsed with a -1px margin. A backdrop
   colour would be simpler, but it shows through as grey blocks
   wherever the last row is incomplete. */
.cards, .pkg-grid, .steps, .guarantees, .why-grid, .promise-grid {
  gap: 0;
  background: none;
  border: 0;
}
.card, .pkg-card, .step, .guarantee, .why-item {
  border: 1px solid var(--hair);
  margin: 0 -1px -1px 0;
  background: #000;
  transition: background 0.25s;
}
.card:hover, .pkg-card:hover, .step:hover, .guarantee:hover, .why-item:hover {
  transform: none;
  background: rgba(0, 229, 255, 0.06);
  border-color: transparent;
}
.pkg-popular { background: rgba(0, 229, 255, 0.05); }
.founder-note, .founding-offer { background: #000; border: 1px solid var(--hair); }

/* ---------- 8. TRUST BAR + STATS ---------- */
.trust-bar, .stats-strip {
  border-top: 1px solid var(--hair-cy);
  border-bottom: 1px solid var(--hair-cy);
  background: none;
}
.trust-item { border-left: 1px solid var(--hair); padding-left: 20px; }
.trust-item span, .stat-label { font-size: 0.72rem; color: var(--muted); }

/* ---------- 9. ESTIMATOR ---------- */
/* .est-grid is the two-column LAYOUT, not a panel. Giving it a border
   without padding pinned every label 1px off the edge. The form column
   and the result card are each their own cell instead - and the result
   card stays position:sticky, which an outer padded box would fight. */
.est-grid { background: none; border: 0; }
.est-controls {
  border: 1px solid var(--hair);
  background: rgba(0, 229, 255, 0.03);
  padding: clamp(22px, 2.6vw, 32px);
}
.est-result, .estimate-featured .est-result {
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid var(--hair);
}
.field input, .field textarea, .chat-input input {
  background: #000;
  border: 1px solid var(--hair);
  color: #fff;
}
/* background-color, NOT the background shorthand: the shorthand wipes
   the dropdown chevron that styles.css sets as a background-image,
   leaving 40px of reserved padding with nothing in it. */
.est-field select {
  background-color: #000;
  border: 1px solid var(--hair);
  color: #fff;
}

/* Field labels here were still sentence-case Inter while the contact
   form's were mono caps - same design, two label styles. */
.est-field > label {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

/* a label sat 8px under its box but 18px from the next group, so the
   groups read as one another's - widen the rhythm and the grouping
   becomes obvious */
.est-controls { gap: 26px; }
.est-field { gap: 11px; }
.est-addons { gap: 9px; }
.est-row { gap: 20px; }
.est-field select:focus, .field input:focus, .field textarea:focus {
  border-color: var(--cyan);
}
.est-amount { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.9; }
.est-was { font-family: var(--disp); text-transform: uppercase; letter-spacing: 0.04em; }
.est-check { border: 1px solid var(--hair); background: #000; }
.est-check:hover { border-color: var(--cyan); }

/* ---------- 10. FAQ ---------- */
.faq-item { border: 0; border-bottom: 1px solid var(--hair); background: none; }
.faq-item summary::after { color: var(--cyan); }

/* ---------- 11. OFFER BAR + SECTION DIVIDERS ---------- */
.offer-bar { background: var(--cyan); color: var(--ao); border: 0; }
.offer-text, .offer-text strong, .offer-claim, .offer-close { color: var(--ao); }
.offer-bar .offer-spark { color: var(--ao); }
/* the section rule replaces the divider element - otherwise you get two lines */
.sec-divider { display: none; }
.section { border-top: 1px solid var(--hair-cy); padding: clamp(64px, 9vh, 108px) 0; }

/* ---------- 12. FORMS + NOTES ---------- */
.field label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-note { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; }

/* ---------- 13. FOOTER ---------- */
.footer { border-top: 1px solid var(--hair-cy); background: none; }
.footer-copy, .footer-legal a, .footer-social a {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 14. CHAT WIDGET ---------- */
.chat-fab { background: var(--cyan); color: var(--ao); border: 0; }
.chat-panel, .chat-head, .chat-input { background: #000; border-color: var(--hair); }
.chat-chip { background: none; border: 1px solid var(--hair); }
.chat-chip:hover { border-color: var(--cyan); }
.msg.bot { background: rgba(255, 255, 255, 0.05); }
.msg.user { background: var(--cyan); color: var(--ao); }
.chat-input button { background: var(--cyan); color: var(--ao); }

/* ---------- 15. LANGUAGE MODAL ---------- */
.lang-card { background: #000; border: 1px solid var(--hair-cy); }

/* ---------- 16. FOCUS (restored after the global flatten) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- 17. HINDI FALLBACK ----------
   Barlow Condensed carries no Devanagari, and condensed uppercase
   is unreadable in Devanagari anyway. In Hindi, headings drop back
   to a normal-width face at normal case. */
html[lang="hi"] .hero-title,
html[lang="hi"] .section-title,
html[lang="hi"] .card h3,
html[lang="hi"] .step h3,
html[lang="hi"] .why-item h3,
html[lang="hi"] .pkg-card h3,
html[lang="hi"] .trust-item strong,
html[lang="hi"] .guarantee strong,
html[lang="hi"] .founding-copy h3,
html[lang="hi"] .faq-item summary,
html[lang="hi"] .lang-card h3,
html[lang="hi"] .chat-head-info strong,
html[lang="hi"] .btn,
html[lang="hi"] .nav-links a,
html[lang="hi"] .nav-trigger,
html[lang="hi"] .brand-tag,
html[lang="hi"] .proof-name,
html[lang="hi"] .proof-live,
html[lang="hi"] .proof-go,
html[lang="hi"] .kicker,
html[lang="hi"] .card-more,
html[lang="hi"] .cards-sub,
/* Service pages and the demos page use the same condensed display face,
   so they need the same Devanagari fallback or the headings render in a
   substitute font at uppercase tracking - unreadable in Hindi. */
html[lang="hi"] .svc-hero h1,
html[lang="hi"] .svc-head h2,
html[lang="hi"] .svc-cell h3,
html[lang="hi"] .svc-step h3,
html[lang="hi"] .svc-price h3,
html[lang="hi"] .svc-final h2,
html[lang="hi"] .svc-more strong,
html[lang="hi"] .svc-kicker,
html[lang="hi"] .svc-crumb,
html[lang="hi"] .svc-fact dt,
html[lang="hi"] .svc-price-sub,
html[lang="hi"] .demos-head h1,
html[lang="hi"] .demos-head .kicker,
html[lang="hi"] .demos-cta h2,
html[lang="hi"] .demo-body h3,
html[lang="hi"] .demo-cat,
html[lang="hi"] .demo-url,
html[lang="hi"] .demo-soon .soon-body span,
html[lang="hi"] .demo-live {
  font-family: "Inter", "Noto Sans Devanagari", system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
/* Devanagari needs more vertical room than the 0.86-0.95 line-heights the
   condensed English display type is set at, or the matras clip. */
html[lang="hi"] .svc-hero h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.18; max-width: 26ch; }
html[lang="hi"] .svc-head h2,
html[lang="hi"] .svc-final h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.22; }
html[lang="hi"] .svc-cell h3,
html[lang="hi"] .svc-step h3,
html[lang="hi"] .svc-price h3 { font-size: 1.18rem; line-height: 1.3; }
html[lang="hi"] .svc-more strong { font-size: 1.05rem; line-height: 1.3; }
html[lang="hi"] .svc-step-n { font-family: "Inter", system-ui, sans-serif; }
html[lang="hi"] .demos-head h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.2; }
html[lang="hi"] .demos-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.24; }
html[lang="hi"] .demo-body h3 { font-size: 1.2rem; line-height: 1.3; }
html[lang="hi"] .hero-title { font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.14; }
html[lang="hi"] .section-title { font-size: clamp(1.8rem, 3.8vw, 2.8rem); line-height: 1.2; max-width: 24ch; }
html[lang="hi"] .hero-title span:last-child { -webkit-text-stroke: 0; color: var(--text); }

/* ---------- 18. THIRD COLOURS ----------
   The direction runs on black, white and cyan only. These badges
   shipped in amber and violet, which read as a third and fourth
   colour and break the discipline. */
.pkg-badge,
.est-spotlight,
.est-save-tag,
.founding-badge,
.card-tag--accent {
  background: var(--cyan) !important;
  color: var(--ao) !important;
  border-color: var(--cyan) !important;
}
.est-spotlight *, .est-save-tag *, .card-tag--accent * { color: var(--ao) !important; }
.offer-spark, .pkg-offer-note .offer-spark, .est-spotlight .offer-spark { color: inherit !important; }
.pkg-offer-note { color: var(--cyan); }
/* this shipped as a cyan-to-violet gradient, which renders indigo -
   a third colour sitting in the middle of the results panel */
.est-offer {
  background: rgba(0, 229, 255, 0.10) !important;
  border: 1px solid var(--hair-cy) !important;
  color: var(--text);
}
.est-cur-opt.active { background: var(--cyan) !important; color: var(--ao) !important; }
.est-cur { border: 1px solid var(--hair); background: none; }

/* labels stack instead of colliding on one line */
.kicker, .est-spotlight { display: block; width: fit-content; }
.est-spotlight { margin-bottom: 16px; }

.card-invite { background: #000 !important; }
.portfolio-note { background: none !important; }

/* ---------- 19. EMOJI ICONS ----------
   The card icons are colour emoji - the one thing that can't be
   made to obey a two-colour palette. Replaced with mono index
   labels, matching the approved mockup.
   To bring the icons back: delete this block. */
.card-icon, .portfolio-note-ic { display: none; }

.services .cards { counter-reset: svc; }
.services .card::before {
  counter-increment: svc;
  content: "0" counter(svc);
  display: block;
  margin-bottom: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

/* ---------- 20. MOBILE ----------
   0.2em tracking on a long mono label is wider than a phone screen
   and drags the whole hero off the right edge. Tighten it there. */
@media (max-width: 760px) {
  .hero-badge {
    flex-wrap: wrap;
    white-space: normal;
    letter-spacing: 0.1em;
    font-size: 0.58rem;
    max-width: 100%;
  }
  .htag, .stack-track span { letter-spacing: 0.08em; font-size: 0.68rem; }
  .kicker { letter-spacing: 0.14em; }
  .trust-item span, .stat-label, .footer-copy, .footer-legal a { letter-spacing: 0.1em; }
  .field label { letter-spacing: 0.12em; }
  .btn { letter-spacing: 0.08em; font-size: 0.94rem; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .section-title { max-width: none; }
  .hero-inner, .container { max-width: 100%; }
}

/* ---------- 21. MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .stack-track { animation: none; }
}

/* ---------- 22. ROTATING HERO WORD ----------
   It shipped travelling 0.55em with an 8px blur. At this line-height
   that carries it into the line above, and blurred display type reads
   as a rendering fault rather than a transition - which is what makes
   the hero look broken for the first second after a refresh. */
@keyframes pulse-word-out { to   { opacity: 0; transform: translateY(-0.2em); } }
@keyframes pulse-word-in  { from { opacity: 0; transform: translateY(0.2em); } }
.hero-rotate.word-out { animation: pulse-word-out 0.28s var(--ease) forwards; }
.hero-rotate.word-in  { animation: pulse-word-in 0.40s var(--ease); }
.hero-title .hero-rotate { filter: none !important; }
.hero-rotate-line { display: block; overflow: hidden; padding-bottom: 0.06em; }

/* a little more air between the display lines on phones, where the
   type is proportionally largest */
@media (max-width: 760px) {
  .hero-title { line-height: 1.0; }
}

/* ---------- 23. "WHO WE ARE" - THREE BEATS ----------
   One paragraph split into three panels, each with its own scene,
   alternating sides so the eye zig-zags down the section. */
.who-stack { display: block; }
.who-panel {
  display: grid;
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
  padding: clamp(26px, 3.5vw, 46px) 0;
  border-top: 1px solid var(--hair);
}
.who-panel:first-of-type { border-top: 0; }
@media (min-width: 861px) {
  .who-panel { grid-template-columns: 1fr 1fr; }
  .who-panel:nth-of-type(even) .who-copy { order: 2; }
}
.who-panel .section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 16ch;
  margin-bottom: 16px;
}
.who-panel .lede { margin-top: 0; }

/* real photos, tinted and vignetted to sit inside the same dark,
   cyan-lit world as the rest of the page rather than looking like a
   stock crop pasted on top of it */
.who-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--bg);
}
.who-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05) brightness(0.94);
}
.who-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 6, 10, 0) 45%, rgba(5, 6, 10, 0.65) 100%),
    linear-gradient(100deg, rgba(5, 6, 10, 0.4) 0%, rgba(5, 6, 10, 0) 40%),
    radial-gradient(120% 100% at 100% 0%, rgba(0, 229, 255, 0.08), rgba(0, 229, 255, 0) 55%);
  pointer-events: none;
}
/* On a phone a 16:9 strip is mostly wasted width and no height. Go
   square and stay inside the container padding, so the photo lines
   up with the text beside it. */
@media (max-width: 860px) {
  .who-photo { aspect-ratio: 1 / 1; }
}

/* ---------- 24. PORTFOLIO TAGS ----------
   These were pinned position:absolute to the card's top-right corner,
   which worked while a card icon pushed the title down. With the icons
   gone the title starts at the top and runs straight under the tag.
   Put the tag back in the flow as the label above the title - the same
   pattern as the services index labels. */
.card-tag,
.card-tag--accent,
.card-tag--lock {
  position: static;
  display: block;
  width: fit-content;
  margin: 0 0 14px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  white-space: nowrap;
}
.card-tag--lock { color: var(--muted) !important; }

/* ---------- 25. FAQ SCENE ----------
   Replaces the robot SVG that stood here. Square, and contained
   rather than full-bleed - it sits in a column beside the answers. */
.faq-canvas {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--hair);
  background: rgba(0, 229, 255, 0.02);
}
@media (max-width: 860px) {
  .faq-canvas { max-width: 300px; }
}

/* ---------- 26. MOBILE FIXES ---------- */
@media (max-width: 860px) {
  /* The menu panel was pinned to a hardcoded `top: 60px`, which ignores
     the offer bar above the nav - measured, the nav actually ends at
     113px, so the panel opened 53px too high and sat under the header.
     Anchoring it to the nav itself survives the offer bar being
     dismissed and any change in nav height. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #000;
    border-bottom: 1px solid var(--hair-cy);
  }
  .nav-links a {
    font-family: var(--disp);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-bottom: 1px solid var(--hair);
  }
  /* This layer re-declares `.nav-links a` at the same specificity as the
     base `.nav-links .nav-menu a`, so the submenu opt-out has to be
     restated here or accordion items inherit the condensed caps. */
  .nav-trigger {
    font-family: var(--disp);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--hair);
  }
  .nav-links .nav-menu a {
    font-family: "Inter", sans-serif;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--hair);
  }
  /* stated explicitly here: the open state has to beat the closed
     rule after this layer re-declares .nav-links */
  .nav-links { transform: translateY(-135%); }
  .nav-links.open { transform: translateY(0); }

  /* `width: 100vw` includes the scrollbar, so full-bleed canvases
     pushed the document 8px wider than the viewport. Break out of the
     container padding instead - no viewport units involved. */
}

/* ---------- 28. LOAD SAFETY ----------
   styles.css sets .reveal { opacity: 0 } unconditionally, so if any
   script fails the page body never appears. Only hide it when the
   inline flag in <head> confirms JS is running. */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- 29. SERVICES: TWO TIERS ----------
   Three lead cards (the things a client hires us for, each linking to
   its service page) over a compact "along the way" row. Same hairline
   cells as everywhere else; the hierarchy comes from size and weight,
   not from decoration. */
.cards--services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card--lead { padding: 38px 30px 32px; }
.card--lead h3 { font-size: 1.42rem; }
.card--lead p { font-size: 0.98rem; }
/* the "See packages" line is the link affordance here, so no corner arrow */
a.card--lead h3::after { content: none; }
.card-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
}
.card-more .arrow { transition: transform 0.25s var(--ease); }
.card--lead:hover .card-more { color: var(--cyan); }
.card--lead:hover .card-more .arrow { transform: translateX(4px); }

.cards-sub {
  grid-column: 1 / -1;
  margin: 26px 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.card--aside { padding: 22px 22px 20px; }
.card--aside h3 { font-size: 1.02rem; margin-bottom: 6px; }
.card--aside p { font-size: 0.88rem; }
.card--aside h3::after { font-size: 0.72em; }
/* the index counter only makes sense on the lead tier */
.services .card--aside::before { content: none; }
@media (max-width: 960px) { .cards--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards--services { grid-template-columns: 1fr; } .cards-sub { margin-top: 18px; } }

/* ---------- 30. PORTFOLIO: WORK FIRST ----------
   Screenshot-led cards. The image carries the card; the copy is a
   caption beneath it. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 44px;
}
.work {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--hair);
  margin: 0 -1px -1px 0;
  background: #000;
  transition: background 0.25s;
}
.work:hover { background: rgba(0, 229, 255, 0.06); }
.work-shot {
  display: block; position: relative;
  aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--hair);
  background: #06090f;
}
.work-shot img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: saturate(0.92) contrast(1.03);
  transition: transform 0.6s var(--ease), filter 0.4s;
}
.work:hover .work-shot img { transform: scale(1.025); filter: none; }
.work-shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45) 100%);
}
.work-body { display: block; padding: 22px 24px 26px; }
.work-body .card-tag { margin-bottom: 10px; }
.work-body h3 {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.16rem;
  letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 8px;
}
.work-body h3::after {
  content: "\2197"; font-size: 0.8em; color: var(--muted);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.work:hover .work-body h3::after { color: var(--cyan); transform: translate(2px, -2px); }
.work-body p { color: var(--muted); font-size: 0.94rem; line-height: 1.62; }
.cards--work-more { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
@media (max-width: 700px) {
  .work-grid, .cards--work-more { grid-template-columns: 1fr; }
  .work-body { padding: 18px 18px 22px; }
}

/* ---------- 31. PAGE ORDER ----------
   The page now runs hero > proof (+ its numbers) > how it works > services
   > pricing > estimate > work > who > promise > FAQ > contact. Three
   sections went: the trust strip (its four promises now live in the
   promise list, each still linking to its proof page), the "Why Trebots"
   grid (four claims the proof strip already makes better) and the
   stand-alone stats strip, which is now the proof section's footer. */

/* the numbers sit directly under the products they count, so the two
   strips share one hairline instead of stacking two */
.proof { border-bottom: 0; }
.stats-strip { border-top: 1px solid var(--hair); }
.stats-strip .stats-inner { padding-top: 30px; padding-bottom: 34px; }

/* the journey's own call to action - the step-1 button is the same
   destination as the hero's primary, so the reader meets the same ask
   at the moment the process has just been explained */
.steps-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 30px;
}
@media (max-width: 560px) {
  .steps-cta .btn { width: 100%; text-align: center; }
}

/* four guarantees instead of two: tighter cells so the list stays level
   with the founder note beside it */
.guarantee { padding: 18px 20px; }
.guarantees { gap: 10px; }

/* ---------- 32. SECTION CLOSERS ----------
   Services and FAQ used to end without a next step - services only sent
   people out to sub-pages, and FAQ ended on its last answer. One quiet
   line each, pointing back at the form. */
.section-cta {
  margin: 34px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  color: var(--muted); font-size: 0.98rem; line-height: 1.6;
}
.section-cta a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.section-cta a:hover { text-decoration: underline; }
.services .section-cta { margin-top: 30px; }

/* ---------- 33. TESTIMONIALS ----------
   Two client quotes take the founder note's place beside the guarantees.
   They wear the founder-note styling so the column reads as one voice
   block; stacked with a shared hairline like every other cell grid. */
.testi-stack { display: grid; gap: 0; }
.testi { padding: 28px 28px 26px; gap: 16px; justify-content: flex-start; }
.testi + .testi { margin-top: -1px; }
.testi blockquote { font-size: 1rem; line-height: 1.62; }
.testi .founder-sign { flex-wrap: wrap; }
.testi-link {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none; white-space: nowrap;
}
.testi-link:hover { text-decoration: underline; }
.testi-link[hidden] { display: none; }
html[lang="hi"] .testi-link { font-family: "Inter", "Noto Sans Devanagari", system-ui, sans-serif; text-transform: none; letter-spacing: 0; }