/* ============================================================
   CYANOTYPE — blueprint portfolio design system
   Concept: the site is an engineering print (cyan-on-navy grid),
   the accent is "redline" markup (signal orange) for anything
   the visitor can act on.
   ============================================================ */

:root {
  /* --- print stock --- */
  --bg:      #06131f;   /* deep prussian ink            */
  --bg-2:    #0a1e30;   /* panel                        */
  --bg-3:    #102a41;   /* raised panel / card          */
  --line:    rgba(120,180,220,.10);  /* grid            */
  --line-2:  rgba(120,180,220,.22);  /* rules / borders */
  --line-3:  rgba(120,180,220,.42);  /* strong rules    */

  /* --- ink --- */
  --chalk:   #eaf1f7;   /* primary text     */
  --mute:    #8aa4ba;   /* secondary text   */
  --faint:   #52708a;   /* tertiary / captions */

  /* --- markup --- */
  --signal:  #ff6a3d;   /* redline accent — actions/marks */
  --signal-d:#e2521f;
  --cyan:    #57c8e6;   /* drafting cyan — links/labels   */

  /* --- type --- */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* --- metrics --- */
  --gut: clamp(1.25rem, 4vw, 3.5rem);   /* page gutter */
  --maxw: 1240px;
  --radius: 3px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

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

body {
  font-family: var(--body);
  color: var(--chalk);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* the print grid: fine minor + emphasized major lines */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: -1px -1px;
}
/* faint radial "light on the drafting table" */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(87,200,230,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(255,106,61,.06), transparent 55%);
}

img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }

/* ---------- type ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing:-.02em; }
p { color: var(--mute); }
strong { color: var(--chalk); font-weight:600; }

.mono { font-family: var(--mono); }

/* eyebrow / drafting label */
.eyebrow{
  font-family: var(--mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color: var(--cyan);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--cyan); opacity:.7;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gut); }
.section { padding-block: clamp(4rem, 9vw, 8rem); position:relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section + .section { border-top: 1px solid var(--line-2); }

.stack > * + * { margin-top: 1.1rem; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--mute); max-width: 60ch; }

/* section heading with drafting number */
.head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom: 2.6rem; }
.head__no { font-family:var(--mono); font-size:.8rem; color:var(--signal); letter-spacing:.1em; }
.head__title { font-size: clamp(1.7rem, 4vw, 2.7rem); }
.head__rule { flex:1 1 120px; height:1px; background:var(--line-2); align-self:center; min-width:60px; }

/* ---------- buttons ---------- */
.btn{
  --c: var(--signal);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em;
  padding:.85em 1.4em; border-radius:var(--radius);
  border:1px solid var(--c); color:var(--bg); background:var(--c);
  cursor:pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  text-transform:uppercase; font-weight:500;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -12px var(--signal); background:var(--signal-d); border-color:var(--signal-d); }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.btn--ghost{ background:transparent; color:var(--chalk); border-color:var(--line-3); }
.btn--ghost:hover{ background:transparent; border-color:var(--cyan); color:var(--cyan); box-shadow:none; }
.btn__arrow{ transition: transform .25s var(--ease); }
.btn:hover .btn__arrow{ transform: translateX(3px); }

/* text link with redline underline */
.link{
  color:var(--chalk); font-family:var(--mono); font-size:.85rem;
  display:inline-flex; align-items:center; gap:.5em; position:relative; padding-bottom:2px;
}
.link::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.link:hover{ color:var(--signal); }
.link:hover::after{ transform:scaleX(1); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(6,19,31,.72);
  border-bottom:1px solid var(--line-2);
}
.nav__in{ max-width:var(--maxw); margin-inline:auto; padding: .85rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; }
.brand__mark{ width:30px; height:30px; flex:0 0 auto; }
.brand__name{ font-size:1.02rem; }
.brand__name b{ color:var(--signal); font-weight:600; }
.nav__links{ display:flex; align-items:center; gap:.4rem; }
.nav__links a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mute); padding:.5em .85em; border-radius:var(--radius); position:relative; transition:color .2s;
}
.nav__links a:hover{ color:var(--chalk); }
.nav__links a[aria-current="page"]{ color:var(--chalk); }
.nav__links a[aria-current="page"]::before{
  content:""; position:absolute; left:.85em; right:.85em; bottom:.15em; height:1.5px; background:var(--signal);
}
.nav__cta{ margin-left:.4rem; }
.nav__toggle{ display:none; background:none; border:1px solid var(--line-3); color:var(--chalk);
  width:42px; height:38px; border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center; }
.nav__toggle svg{ width:20px; height:20px; }

@media (max-width: 860px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:63px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line-2);
    padding:.5rem var(--gut) 1.25rem; transform:translateY(-120%); transition:transform .35s var(--ease);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  }
  .nav__links.open{ transform:translateY(0); }
  .nav__links a{ padding:.9em .2em; border-bottom:1px solid var(--line); font-size:.95rem; }
  .nav__links a[aria-current="page"]::before{ left:.2em; right:auto; width:18px; bottom:.55em; }
  .nav__cta{ margin:.9rem 0 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem,6vw,5rem); position:relative; }
.hero__grid{ display:grid; grid-template-columns: 1.35fr .9fr; gap: clamp(2rem,5vw,4rem); align-items:end; }
@media (max-width: 900px){ .hero__grid{ grid-template-columns:1fr; align-items:start; } }

.hero h1{ font-size: clamp(2.7rem, 8.5vw, 6.2rem); letter-spacing:-.035em; }
.hero h1 .mk{ color:var(--signal); position:relative; white-space:nowrap; }
/* redline "dimension" ticks around the marked word */
.hero h1 .mk::before, .hero h1 .mk::after{
  content:""; position:absolute; top:8%; bottom:8%; width:2px; background:var(--signal); opacity:.55;
}
.hero h1 .mk::before{ left:-.28em; } .hero h1 .mk::after{ right:-.28em; }
.hero__sub{ font-family:var(--mono); color:var(--cyan); font-size:.85rem; letter-spacing:.1em; margin-bottom:1.6rem; }
.hero__lead{ margin-top:1.8rem; max-width:46ch; }
.hero__cta{ margin-top:2.2rem; display:flex; gap:.9rem; flex-wrap:wrap; }

/* animated hero: masked lines + pre-hide (cleared by JS intro) */
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line__in{ display:inline-block; will-change:transform; }
.js .hero__title .line__in{ transform: translateY(115%); }
.js .hero__sub, .js .hero__lead, .js .hero__cta, .js .bench{ opacity:0; }
.bench{ will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .js .hero__title .line__in{ transform:none; }
  .js .hero__sub, .js .hero__lead, .js .hero__cta, .js .bench{ opacity:1; }
}

/* drafting-ruler scroll progress */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0);
  transform-origin:left; z-index:60; will-change:transform; pointer-events:none;
  background:linear-gradient(90deg, var(--signal) 0%, var(--signal) 55%, var(--cyan) 100%); }

/* "on the bench" live builds panel */
.bench{
  border:1px solid var(--line-2); border-radius:var(--radius); background:
   linear-gradient(180deg, rgba(16,42,65,.55), rgba(10,30,48,.35));
  position:relative;
}
.bench__hd{ display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; border-bottom:1px solid var(--line-2); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.bench__dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgba(255,106,61,.6); animation: pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,106,61,.5);} 70%{ box-shadow:0 0 0 7px rgba(255,106,61,0);} 100%{ box-shadow:0 0 0 0 rgba(255,106,61,0);} }
.bench__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--line); transition:background .2s; }
.bench__row:last-child{ border-bottom:0; }
.bench__row:hover{ background:rgba(87,200,230,.05); }
.bench__name{ font-family:var(--display); font-weight:600; font-size:1.02rem; }
.bench__meta{ font-family:var(--mono); font-size:.68rem; color:var(--faint); letter-spacing:.05em; margin-top:.15rem; }
.tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .6em; border-radius:2px; border:1px solid var(--line-3); color:var(--mute); white-space:nowrap; }
.tag--dev{ color:var(--signal); border-color:rgba(255,106,61,.5); background:rgba(255,106,61,.08); }
.tag--live{ color:#5fd39a; border-color:rgba(95,211,154,.45); background:rgba(95,211,154,.08); }
.tag--ios{ color:var(--cyan); border-color:rgba(87,200,230,.45); background:rgba(87,200,230,.08); }

@media (prefers-reduced-motion: reduce){ .bench__dot{ animation:none; } }

/* ============================================================
   PROJECT CARDS (spec sheets)
   ============================================================ */
.grid-work{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width: 760px){ .grid-work{ grid-template-columns:1fr; } }

.spec{
  display:flex; flex-direction:column;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(16,42,65,.5), rgba(10,30,48,.3));
  position:relative; overflow:hidden; transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.spec::after{ /* corner crop mark */
  content:""; position:absolute; top:10px; right:10px; width:12px; height:12px;
  border-top:1.5px solid var(--line-3); border-right:1.5px solid var(--line-3); opacity:.6; transition:border-color .3s;
}
.spec:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.spec:hover::after{ border-color:var(--signal); }
.spec__hd{ padding:1.4rem 1.5rem 1rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.spec__no{ font-family:var(--mono); font-size:.72rem; color:var(--signal); letter-spacing:.1em; }
.spec__name{ font-size:1.7rem; margin-top:.35rem; }
.spec__body{ padding:0 1.5rem 1.1rem; }
.spec__body p{ font-size:.95rem; }
.spec__fields{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line-2); margin-top:auto; }
.spec__field{ padding:.8rem 1.5rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.spec__field:nth-child(2n){ border-right:0; }
.spec__field:nth-last-child(-n+2){ border-bottom:0; }
.spec__k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.spec__v{ font-family:var(--mono); font-size:.82rem; color:var(--chalk); margin-top:.3rem; }
.spec__foot{ padding:1rem 1.5rem; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }

/* project link row (renders only when a URL is set) */
.proj-links{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.5rem; }

/* stretched click target */
.spec__link::before{ content:""; position:absolute; inset:0; z-index:1; }

/* ---------- work page: expandable spec sheets (native details) ---------- */
.acc{ display:grid; gap:1.25rem; }
.spec--acc{ display:block; padding:0; scroll-margin-top:90px; }
.spec--acc:hover{ transform:none; }               /* no lift on accordion */
.spec--acc > summary{ list-style:none; cursor:pointer; padding:1.4rem 1.5rem; outline:none; }
.spec--acc > summary::-webkit-details-marker{ display:none; }
.spec--acc > summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; border-radius:var(--radius); }
.acc__sum .spec__hd{ padding:0; }
.acc__tag{ margin-top:.7rem; font-size:.95rem; color:var(--mute); }
.acc__more{ display:inline-flex; align-items:center; gap:.5em; margin-top:1rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); }
.acc__ico{ display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid var(--line-3);
  border-radius:2px; color:var(--signal); font-size:.9rem; line-height:1; transition:transform .3s var(--ease), border-color .2s; }
.spec--acc[open] > summary .acc__ico{ transform:rotate(45deg); border-color:var(--signal); }
.spec--acc[open] > summary .acc__more{ color:var(--signal); }
.acc__body{ border-top:1px solid var(--line-2); overflow:hidden; }
.acc__grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(1.5rem,4vw,3rem); padding:2rem 1.5rem; }
@media (max-width:820px){ .acc__grid{ grid-template-columns:1fr; } }
/* the field row inside the accordion keeps its own dividers */
.acc__body .spec__field:nth-child(4n){ border-right:0; }
.acc__body .spec__field:nth-child(2){ border-right:0; }
@media (max-width:600px){
  .acc__body .spec__fields{ grid-template-columns:1fr 1fr !important; }
  .acc__body .spec__field{ border-right:1px solid var(--line); }
  .acc__body .spec__field:nth-child(2n){ border-right:0; }
}

/* ============================================================
   ABOUT / detail prose
   ============================================================ */
.split{ display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width: 820px){ .split{ grid-template-columns:1fr; } }
.prose p{ font-size:1.02rem; }
.prose p + p{ margin-top:1.1rem; }

.portrait{
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; position:relative;
  aspect-ratio: 4/5; background:
    repeating-linear-gradient(45deg, rgba(87,200,230,.05) 0 10px, transparent 10px 20px), var(--bg-2);
  display:flex; align-items:center; justify-content:center;
}
.portrait__ph{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--faint); text-align:center; padding:1rem; }
.portrait__frame{ position:absolute; inset:12px; border:1px dashed var(--line-3); pointer-events:none; }

/* stat / capability list */
.caps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; }
.cap{ background:var(--bg-2); padding:1.4rem 1.3rem; }
.cap__k{ font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.cap__v{ margin-top:.5rem; color:var(--mute); font-size:.92rem; }
.cap__v strong{ display:block; font-family:var(--display); font-size:1.15rem; color:var(--chalk); margin-bottom:.2rem; }

/* stack chips */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ font-family:var(--mono); font-size:.72rem; padding:.4em .75em; border:1px solid var(--line-2);
  border-radius:2px; color:var(--mute); background:var(--bg-2); }
.chip:hover{ border-color:var(--cyan); color:var(--cyan); }

/* timeline */
.timeline{ border-left:1px solid var(--line-2); margin-left:.4rem; }
.tl{ position:relative; padding:0 0 2rem 1.8rem; }
.tl::before{ content:""; position:absolute; left:-5px; top:.35rem; width:9px; height:9px; background:var(--bg);
  border:2px solid var(--signal); border-radius:50%; }
.tl:last-child{ padding-bottom:0; }
.tl__yr{ font-family:var(--mono); font-size:.72rem; color:var(--cyan); letter-spacing:.1em; }
.tl__t{ font-family:var(--display); font-weight:600; font-size:1.1rem; margin:.2rem 0 .3rem; }
.tl__d{ font-size:.92rem; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; }
@media (max-width:820px){ .svc{ grid-template-columns:1fr; } }
.svc__cell{ background:var(--bg-2); padding:2rem 1.7rem; transition:background .25s; }
.svc__cell:hover{ background:var(--bg-3); }
.svc__no{ font-family:var(--mono); font-size:.72rem; color:var(--signal); letter-spacing:.12em; }
.svc__t{ font-size:1.3rem; margin:.7rem 0 .6rem; }
.svc__d{ font-size:.94rem; }

.process{ counter-reset:step; display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2);
  border-radius:var(--radius); overflow:hidden; }
.step{ background:var(--bg-2); padding:1.6rem 1.8rem; display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:baseline; }
.step__no{ font-family:var(--mono); font-size:.8rem; color:var(--cyan); letter-spacing:.1em; }
.step__t{ font-family:var(--display); font-weight:600; font-size:1.15rem; }
.step__d{ font-size:.94rem; margin-top:.35rem; grid-column:2; }

/* ============================================================
   PACKAGES / pricing
   ============================================================ */
.pkg-group + .pkg-group{ margin-top:0; }
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch; }
@media (max-width:900px){ .pricing{ grid-template-columns:1fr; } }
.price-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line-2);
  border-radius:var(--radius); background:linear-gradient(180deg, rgba(16,42,65,.5), rgba(10,30,48,.3));
  padding:1.9rem 1.6rem; transition:border-color .3s var(--ease), transform .3s var(--ease); }
.price-card:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.price-card--featured{ border-color:rgba(255,106,61,.55);
  background:linear-gradient(180deg, rgba(255,106,61,.07), rgba(10,30,48,.4)); }
.price-card--featured:hover{ border-color:var(--signal); }
.price__badge{ position:absolute; top:0; right:1.3rem; transform:translateY(-50%);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bg); background:var(--signal); padding:.4em .7em; border-radius:2px; }
.price__no{ font-family:var(--mono); font-size:.7rem; color:var(--signal); letter-spacing:.1em; }
.price__name{ font-size:1.5rem; margin:.45rem 0 .35rem; }
.price__tag{ font-size:.92rem; color:var(--mute); }
.price__amt{ font-family:var(--display); font-weight:600; font-size:2rem; color:var(--chalk);
  margin-top:1.3rem; letter-spacing:-.02em; }
.price__time{ font-size:.72rem; color:var(--cyan); letter-spacing:.06em; margin-top:.25rem; }
.price__list{ list-style:none; padding:1.3rem 0 0; margin:1.3rem 0 0; border-top:1px solid var(--line-2);
  display:grid; gap:.75rem; flex:1; }
.price__list li{ position:relative; padding-left:1.5rem; font-size:.9rem; color:var(--mute); }
.price__list li::before{ content:""; position:absolute; left:2px; top:.28em; width:8px; height:5px;
  border-left:1.6px solid var(--signal); border-bottom:1.6px solid var(--signal); transform:rotate(-45deg); }
.price__cta{ margin-top:1.6rem; justify-content:center; width:100%; }

/* ============================================================
   CONTACT / form
   ============================================================ */
.form{ display:grid; gap:1.2rem; }
.field{ display:grid; gap:.5rem; }
.field label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.field input, .field textarea, .field select{
  font-family:var(--body); font-size:1rem; color:var(--chalk);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.9em 1em; transition:border-color .2s, box-shadow .2s; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(87,200,230,.12);
}
.field textarea{ resize:vertical; min-height:130px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.contact-cards{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; }
.cc{ background:var(--bg-2); padding:1.3rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.cc__k{ font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.cc__v{ font-family:var(--mono); font-size:.9rem; color:var(--chalk); }

/* ============================================================
   CTA band + FOOTER (title block)
   ============================================================ */
.cta-band{ text-align:center; }
.cta-band h2{ font-size:clamp(2rem,6vw,3.6rem); }
.cta-band p{ max-width:48ch; margin:1.1rem auto 2rem; }

.foot{ border-top:1px solid var(--line-2); background:var(--bg-2); }
/* title block like an engineering drawing */
.titleblock{ max-width:var(--maxw); margin-inline:auto; padding: var(--gut);
  display:grid; grid-template-columns:1.5fr repeat(3, .8fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--radius); }
@media (max-width:760px){ .titleblock{ grid-template-columns:1fr 1fr; } }
.tb{ background:var(--bg-2); padding:1.1rem 1.2rem; }
.tb__k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.tb__v{ font-family:var(--mono); font-size:.85rem; color:var(--chalk); margin-top:.4rem; }
.tb--brand .tb__v{ font-family:var(--display); font-size:1.15rem; }
.tb--brand b{ color:var(--signal); }
.foot__bar{ max-width:var(--maxw); margin-inline:auto; padding:1.2rem var(--gut) 2.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.05em; }
.foot__bar a{ color:var(--mute); }
.foot__bar a:hover{ color:var(--cyan); }
.foot__social{ display:flex; gap:1.2rem; }

/* ============================================================
   reveal animation
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* page intro block shared */
.pagehero{ padding-block: clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem); }
.pagehero h1{ font-size:clamp(2.4rem,7vw,4.6rem); margin-top:.8rem; }
.pagehero .lead{ margin-top:1.4rem; }

/* small helpers */
.mt-s{ margin-top:1rem; } .mt-m{ margin-top:2rem; } .mt-l{ margin-top:3rem; }
.center{ text-align:center; }
.muted{ color:var(--mute); }