/* AustinTXAI — Stage 1 stylesheet
 *
 * Register: the approved OMEGABYTE talking-websites design system
 * (Carbon / Paper / Signal), as implemented in
 * 08_MARKETING/AGENTIC-SPECIALISTS/site/assets/asi.css.
 * Tokens, type system and the light/dark duality are inherited, not reinvented.
 *
 * AustinTXAI's own expression inside that system:
 *   - ONE new token: --atx, a worklight ochre, used ONLY for the primary
 *     action. It is never decorative. --signal stays reserved for real
 *     live/verified state, exactly as the parent system requires.
 *   - Composition concept: "the estimate sheet". The page alternates carbon
 *     and paper so it reads like a document a contractor is handed, not a
 *     landing page. Evidence sits on paper; the conversation sits on carbon
 *     and is the only bright object.
 *
 * Prohibited by DESIGN.md / PRODUCT.md / OMEGABYTE-DESIGN-SYSTEM-v1 §2 and
 * enforced by absence here: gradient text, glassmorphism, border-left accent
 * stripes, icon+title+2-line card grids, hero metrics, neon accents,
 * decorative eyebrows, coloured status dots that do not report real state.
 */

/* ---------- tokens ---------- */
:root{
  --carbon-950:#0A0C0E;
  --carbon-900:#0E1114;
  --carbon-850:#12161B;
  --carbon-800:#171C22;
  --carbon-line:rgba(199,205,214,.13);

  --paper:#F2F4F6;
  --paper-2:#E9ECF0;
  --paper-line:rgba(20,24,28,.14);
  --ink:#14181C;

  --steel:#8B95A0;          /* muted, on dark */
  --slate:#57616C;          /* muted, on light */
  --atlas:#C7CDD6;          /* silver emphasis */

  --signal:#4CC46E;         /* live / verified state ONLY */
  --signal-soft:rgba(76,196,110,.12);

  --atx:#E08A2B;            /* AustinTXAI action, on carbon */
  --atx-deep:#A25F14;       /* AustinTXAI action, on paper */
  --atx-soft:rgba(224,138,43,.10);

  --serif:"Source Serif 4",Georgia,serif;
  --grotesk:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --measure:1080px;
  --pad:clamp(72px,9vw,124px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--carbon-950);
  color:var(--paper);
  font-family:var(--grotesk);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.06}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);line-height:1.14}
h3{font-size:clamp(1.12rem,1.9vw,1.32rem);line-height:1.35}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--steel)}
p{margin:0 0 1.1em}
a{color:inherit}

.wrap{max-width:var(--measure);margin:0 auto;padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
section{padding:var(--pad) 0}
.lede{font-size:clamp(1.04rem,1.6vw,1.24rem);line-height:1.55;color:var(--steel);max-width:36em}
.measure{max-width:34em}

/* paper sections invert the whole colour logic */
.on-paper{background:var(--paper);color:var(--ink)}
.on-paper .lede,.on-paper .muted{color:var(--slate)}
.on-paper h1 em,.on-paper h2 em{color:var(--slate)}
.raised{background:var(--carbon-900)}
.muted{color:var(--steel)}

/* mono label — used for structural labels only, never as decoration */
.label{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin:0 0 1.4em;
}
.on-paper .label{color:var(--slate)}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:rgba(10,12,14,.88);
  border-bottom:1px solid var(--carbon-line);
  backdrop-filter:saturate(140%) blur(8px);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.wordmark{
  font-family:var(--mono);font-weight:500;font-size:.92rem;letter-spacing:.06em;
  text-decoration:none;color:var(--paper);
}
.wordmark b{color:var(--atx);font-weight:500}
.masthead .place{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--grotesk);font-size:1rem;font-weight:500;line-height:1;
  padding:17px 26px;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  min-height:52px;
}
.btn-primary{background:var(--atx);color:var(--carbon-950);border-color:var(--atx)}
.btn-primary:hover{background:#F0993A;border-color:#F0993A}
.on-paper .btn-primary{background:var(--atx-deep);color:var(--paper);border-color:var(--atx-deep)}
.on-paper .btn-primary:hover{background:#8E520F;border-color:#8E520F}
.btn-quiet{background:transparent;color:var(--paper);border-color:var(--carbon-line)}
.btn-quiet:hover{border-color:var(--atlas)}
.on-paper .btn-quiet{color:var(--ink);border-color:var(--paper-line)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--atx);outline-offset:3px;
}
.textlink{color:var(--steel);text-decoration:underline;text-underline-offset:4px;font-size:.95rem}
.textlink:hover{color:var(--paper)}
.on-paper .textlink{color:var(--slate)}
.on-paper .textlink:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:clamp(72px,10vw,124px) 0 clamp(56px,7vw,88px)}
.hero h1{max-width:15ch}
.hero .lede{margin-top:1.2em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:2.4em}

/* ---------- the audit sheet (paper) ---------- */
.sheet{
  border:1px solid var(--paper-line);background:#fff;
  padding:clamp(26px,4vw,44px);margin-top:2.2em;
}
.sheet-row{display:grid;grid-template-columns:2.2rem 1fr;gap:0 18px;padding:20px 0;border-top:1px solid var(--paper-line)}
.sheet-row:first-child{border-top:0;padding-top:0}
.sheet-row:last-child{padding-bottom:0}
.sheet-n{font-family:var(--mono);font-size:.82rem;color:var(--slate);padding-top:.35em}
.sheet-row h3{margin-bottom:.25em}
.sheet-row p{margin:0;color:var(--slate)}

.getback{margin-top:3.4em}
.getback ul{list-style:none;margin:1.4em 0 0;padding:0;max-width:40em}
.getback li{padding:13px 0 13px 28px;border-top:1px solid var(--paper-line);position:relative}
.getback li:first-child{border-top:0}
.getback li::before{
  content:"";position:absolute;left:2px;top:1.42em;
  width:9px;height:1px;background:var(--atx-deep);
}
.limits{margin-top:2.6em;padding-top:1.6em;border-top:2px solid var(--ink);max-width:40em}
.limits p{color:var(--slate);margin:0 0 .6em}
.limits p:last-child{margin:0}
.limits strong{color:var(--ink);font-weight:600}

/* ---------- first fix ---------- */
.fixes{margin-top:2em;max-width:44em}
.fix{padding:24px 0;border-top:1px solid var(--carbon-line)}
.fix:first-child{border-top:0}
.fix h3{margin-bottom:.3em}
.fix p{margin:0;color:var(--steel)}
.pickone{
  margin-top:2.4em;padding:18px 20px;border:1px solid var(--carbon-line);
  background:var(--carbon-900);max-width:44em;
}
.pickone p{margin:0;color:var(--atlas);font-size:.97rem}

/* ---------- form ---------- */
.formwrap{max-width:36em;margin-top:2.2em}
.field{margin-bottom:20px}
.field label{display:block;font-size:.9rem;font-weight:500;margin-bottom:7px;color:var(--ink)}
.field .hint{font-weight:400;color:var(--slate)}
.field input,.field textarea{
  width:100%;font-family:var(--grotesk);font-size:16px;line-height:1.5;
  padding:13px 14px;border:1px solid var(--paper-line);border-radius:2px;
  background:#fff;color:var(--ink);
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--atx-deep);outline:none;box-shadow:0 0 0 3px var(--atx-soft)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:22px 0;cursor:pointer}
.consent input{margin:3px 0 0;width:16px;height:16px;flex:0 0 16px;accent-color:var(--atx-deep)}
.consent span{font-size:.92rem;color:var(--slate);line-height:1.5}
.form-msg{margin-top:16px;font-size:.95rem;min-height:1.4em}
.form-msg.err{color:#B4321F}
.form-msg.ok{color:var(--ink)}
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{border:1px solid var(--paper-line);background:#fff;padding:clamp(24px,4vw,36px);margin-top:2.2em;max-width:36em}
.form-done h3{margin-bottom:.4em}
.form-done p{color:var(--slate);margin:0 0 .7em}
.form-done .ref{font-family:var(--mono);font-size:.82rem;color:var(--slate)}

/* ---------- who / footer ---------- */
.who{max-width:38em}
.who p{color:var(--steel)}
.sitefoot{background:var(--carbon-950);border-top:1px solid var(--carbon-line);padding:44px 0 56px}
.sitefoot .wrap{display:flex;flex-wrap:wrap;gap:22px 48px;justify-content:space-between;align-items:flex-start}
.sitefoot p{font-size:.88rem;color:var(--steel);margin:0 0 .5em;max-width:30em}
.sitefoot a{color:var(--atlas)}
.byline{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* ---------- sticky mobile action ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,12,14,.94);border-top:1px solid var(--carbon-line);
  padding:10px clamp(16px,5vw,20px) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .2s ease;
}
.stickybar.show{transform:translateY(0)}
.stickybar .btn{width:100%}
@media(min-width:861px){.stickybar{display:none}}
@media(prefers-reduced-motion:reduce){.stickybar{transition:none}}

/* ---------- responsive ---------- */
@media(max-width:860px){
  body{font-size:16px}
  .pair{grid-template-columns:1fr;gap:0}
  .masthead .place{display:none}
  .hero-actions{gap:14px}
  .hero-actions .btn,.formwrap .btn{width:100%}
  .sheet-row{grid-template-columns:1.7rem 1fr;gap:0 12px}
}

/* Deliberately no scroll-reveal. Content is never hidden pending JavaScript.
 * See assets/atx.js for the reasoning. */