/* ============================================================
   Architecture sections — scoped port of the "Claude Design" mockup.
   Everything is namespaced under .sq-arch so it NEVER touches the
   existing homepage hero / menu / footer typography.
   ============================================================ */
.sq-arch{
  --red:#FE0908; --yellow:#F3C14F; --blue:#3374CE;
  --black:#0a0a08; --white:#ffffff; --paper:#f7f5ee;
  --line:9px; --line-thin:6px;
  --font-display:Verdana, Geneva, sans-serif;
  --font-body:Verdana, Geneva, sans-serif;
  --maxw:1280px;

  max-width:var(--maxw);
  margin:0 auto;
  padding:8px 16px 72px;
  font-family:var(--font-body);
  color:var(--black);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.sq-arch h1,.sq-arch h2,.sq-arch h3,.sq-arch h4,.sq-arch .display{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.01em;
  line-height:0.96; text-transform:uppercase;
}
.sq-arch .display-l{ font-size:clamp(2.2rem,5vw,4rem); }
.sq-arch .kicker{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:0.22em; font-size:0.78rem;
}
.sq-arch .mono{ font-family:Verdana, Geneva, sans-serif; }
.sq-arch a{ color:inherit; text-decoration:none; }

/* ---------- Mondrian grid primitive ---------- */
.sq-arch .wall{ display:grid; gap:var(--line); background:var(--black); border:var(--line) solid var(--black); }
.sq-arch .cell{ background:var(--white); position:relative; overflow:hidden; }
.sq-arch .cell.red{ background:var(--red); color:#fff; }
.sq-arch .cell.yellow{ background:var(--yellow); color:var(--black); }
.sq-arch .cell.blue{ background:var(--blue); color:#fff; }
.sq-arch .cell.black{ background:var(--black); color:#fff; }
.sq-arch .pad{ padding:clamp(1.25rem,3vw,2.75rem); }
.sq-arch .pad-lg{ padding:clamp(2rem,5vw,4.5rem); }

.sq-arch .cell .label{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.sq-arch .flexcol{ display:flex; flex-direction:column; height:100%; }
.sq-arch .between{ justify-content:space-between; }
.sq-arch .center{ align-items:center; justify-content:center; text-align:center; }
.sq-arch .grow{ flex:1; }

/* hover-fill micro-interaction */
.sq-arch .fill{ cursor:default; }
.sq-arch .fill::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:var(--swatch, var(--yellow));
  transition:height .42s cubic-bezier(.16,.84,.34,1); z-index:0;
}
.sq-arch .fill:hover::after{ height:100%; }
.sq-arch .fill > *{ position:relative; z-index:1; }

.sq-arch .muted{ color:#5b5b54; }

/* ---------- section heads ---------- */
.sq-arch .section{ margin-top:64px; }
.sq-arch .section:first-child{ margin-top:0; }
.sq-arch .section-head{ margin-bottom:22px; }
.sq-arch .section-head .kicker{ color:var(--red); }
.sq-arch .lead{ font-size:1.05rem; max-width:60ch; }

/* ---------- 9-module architecture ---------- */
.sq-arch .archi{ grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(158px,auto); }
.sq-arch .a1{ grid-column:1/6;  grid-row:1/3; }
.sq-arch .a2{ grid-column:6/9;  grid-row:1/2; }
.sq-arch .a3{ grid-column:9/13; grid-row:1/3; }
.sq-arch .a4{ grid-column:6/9;  grid-row:2/3; }
.sq-arch .a5{ grid-column:1/4;  grid-row:3/4; }
.sq-arch .a6{ grid-column:4/9;  grid-row:3/4; }
.sq-arch .a7{ grid-column:9/13; grid-row:3/4; }
.sq-arch .a8{ grid-column:1/5;  grid-row:4/5; }
.sq-arch .a9{ grid-column:5/13; grid-row:4/5; }
.sq-arch .mod-num{ font-family:"Space Mono",monospace; font-size:.78rem; letter-spacing:.05em; }
.sq-arch .mod-name{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; line-height:.98; font-size:clamp(1.2rem,2vw,1.7rem); margin:.5rem 0 .6rem; }
.sq-arch .mod-desc{ font-size:.92rem; }

/* ---------- technical architecture ---------- */
.sq-arch .tech{
  grid-template-columns:1.1fr 0.95fr 0.95fr 0.95fr;
  grid-auto-rows:minmax(150px,auto);
  grid-template-areas:
    "tlead t1 t2 t3"
    "tlead t4 t4 t5";
}
.sq-arch .t-lead{ grid-area:tlead; }
.sq-arch .t1{ grid-area:t1; } .sq-arch .t2{ grid-area:t2; } .sq-arch .t3{ grid-area:t3; }
.sq-arch .t4{ grid-area:t4; } .sq-arch .t5{ grid-area:t5; }

/* ---------- deployment ---------- */
.sq-arch .deploy{ grid-template-columns:repeat(5,1fr); grid-auto-rows:minmax(190px,auto); }
.sq-arch .step-no{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; line-height:1; }

/* ---------- maintenance « full service » ---------- */
.sq-arch .service{
  grid-template-columns:1.3fr 0.85fr 0.85fr;
  grid-template-rows:auto auto;
  grid-template-areas:
    "slead s1 s2"
    "slead s3 s4";
}
.sq-arch .sv-lead{ grid-area:slead; }
.sq-arch .sv1{ grid-area:s1; } .sq-arch .sv2{ grid-area:s2; }
.sq-arch .sv3{ grid-area:s3; } .sq-arch .sv4{ grid-area:s4; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .sq-arch{ padding-bottom:48px; }
  .sq-arch .section{ margin-top:40px; }
  .sq-arch .archi{ grid-template-columns:1fr 1fr !important; grid-auto-rows:minmax(150px,auto) !important; }
  .sq-arch .archi .cell{ grid-column:auto !important; grid-row:auto !important; }
  .sq-arch .tech{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "tlead tlead"
      "t1 t2"
      "t3 t4"
      "t5 t5";
  }
  .sq-arch .tech .cell{ min-height:150px; }
  .sq-arch .deploy{ grid-template-columns:1fr 1fr !important; }
  .sq-arch .service{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "slead slead"
      "s1 s2"
      "s3 s4";
  }
  .sq-arch .service .cell{ min-height:140px; }
}