:root{
    --ground:#ffffff; --panel:#f4f7f8; --panel-2:#eaeff2; --ink:#2b3138; --ink-hi:#0a1013; --muted:#5c6771;
    --blue:#0d3552; --blue-2:#1c5b91; --sky:#3aa0c9; --sun:#f2b21a; --vest:#e8792a; --sand:#8a5209;
    --rule:#cfd8dd; --rule-2:#e6ebee; --grid:#e7edf0; --ink-inv:#eaf1f6;
    --maxw:1300px; --r:18px; --r-sm:12px;
    --mono: ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ground);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  img,svg{display:block;max-width:100%}
  a{color:var(--blue-2);text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  section{padding:76px 0}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-2);margin:0 0 16px}
  h1,h2,h3{color:var(--ink-hi);line-height:1.06;letter-spacing:-.02em;margin:0}
  h1{font-size:clamp(40px,5.6vw,72px);font-weight:800}
  h2{font-size:clamp(30px,3.6vw,46px);font-weight:800}
  h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
  p{margin:0 0 1em}
  .lead{font-size:clamp(18px,1.5vw,21px);color:var(--muted)}
  .sec-head{max-width:56ch;margin-bottom:36px}
  .btn{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--sans);padding:15px 24px;border-radius:var(--r-sm);background:var(--blue);color:#fff;border:1px solid var(--blue);cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(10,16,19,.04)}
  .btn:hover{background:#0a2a42;transform:translateY(-1px);box-shadow:0 8px 22px rgba(13,53,82,.18)}
  .btn.ghost{background:#fff;color:var(--blue);border-color:var(--rule);box-shadow:none}
  .btn.ghost:hover{border-color:var(--blue);background:#fff}
  .btn.big{padding:17px 30px;font-size:17px}

  /* top utility bar */
  .topbar{background:var(--blue);color:var(--ink-inv)}
  .topbar .wrap{display:flex;align-items:center;gap:16px;min-height:40px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;flex-wrap:wrap}
  .topbar .t-tag{opacity:.92}
  .topbar .t-right{margin-left:auto;display:flex;gap:18px;align-items:center}
  .topbar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
  .topbar a:hover{border-color:#fff}

  /* header */
  header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule-2)}
  .bar{display:flex;align-items:center;gap:20px;height:70px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:700;letter-spacing:.1em;color:var(--blue);font-size:15px}
  .brand .mk{width:36px;height:36px}
  nav.main{margin-left:auto;display:flex;gap:26px;align-items:center}
  nav.main a{font:500 15.5px/1 var(--sans);color:var(--ink)}
  nav.main a:hover,nav.main a[aria-current="page"]{color:var(--blue)}
  nav.main .btn{padding:11px 18px;color:#fff}
  .navtoggle{display:none}

  /* hero */
  /* THE PRESENCE DIAGRAM, the second mark.
     Every hero carries it at low opacity: the site is one node in a
     system, not the whole product. The radial gradient sits ON TOP of
     it so the drawing fades out behind the headline instead of
     competing with it. Faint by design; if you can read it easily it
     is too strong. */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule-2);
    background-color:#fff;
    background-image:
      /* the wash that keeps type readable, unchanged */
      linear-gradient(to right, rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 26%,
                                rgba(255,255,255,.62) 46%, rgba(255,255,255,.18) 62%,
                                rgba(255,255,255,0) 74%),
      radial-gradient(135% 125% at 72% 12%, rgba(255,255,255,0) 62%, rgba(255,255,255,.80) 88%, #fff 100%),
      /* three depth layers. Each is a different file with a different seed,
         placed at a different scale and offset, so nothing lines up and the
         field never shows a repeat. Near is drawn last, so it sits on top. */
      /* two layers, not three. Three overlapping fields was the chaos:
         when everything is present at once nothing recedes, and depth needs
         something to recede. Near carries the detail, far carries the scale,
         and the middle was only ever filling space. */
      url(/assets/presence-l3.svg),
      url(/assets/presence-l1.svg),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:auto, auto, auto 128%, auto 190%, 32px 32px, 32px 32px;
    background-position:0 0, 0 0, right -60px center,
                        right -150px bottom -90px, 0 0, 0 0;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat}
  /* Narrow screens get their own wash. The desktop one runs left to right,
     to protect a text column that sits beside the card. On a phone there is
     no column, the text spans the full width, and that same gradient whitens
     almost the whole screen and erases the drawing. So mobile gets an even
     veil instead: light enough to read through, heavy enough to read over. */
  @media (max-width:820px){ .hero{
    background-image:
      linear-gradient(to bottom, rgba(255,255,255,.58) 0%, rgba(255,255,255,.76) 38%,
                                 rgba(255,255,255,.80) 72%, rgba(255,255,255,.62) 100%),
      radial-gradient(150% 60% at 50% 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,.55) 100%),
      url(/assets/presence-l3.svg),
      url(/assets/presence-l2.svg),
      url(/assets/presence-l1.svg),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:auto, auto, auto 78%, auto 62%, auto 120%, 32px 32px, 32px 32px;
    background-position:0 0, 0 0, left -30px top 12%, right -50px top 44%,
                        right -120px bottom -60px, 0 0, 0 0;
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat} }
  .hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:center;padding:84px 32px 92px}
  .dim{display:flex;align-items:center;gap:0;margin:0 0 22px}
  .dim .tick{width:1px;height:10px;background:var(--blue)}
  .dim .line{height:1px;width:60px;background:var(--blue)}
  .dim span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-left:12px;color:var(--blue-2)}
  .hero h1 .u{color:var(--blue)}
  .hero p.sub{font-size:clamp(18px,1.55vw,22px);color:var(--muted);max-width:46ch;margin-top:22px}
  .actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
  .heronote{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted)}
  .heronote b{color:var(--ink-hi);font-weight:600}
  .herofig{position:relative;justify-self:center;width:100%;max-width:360px}
  .herocard{position:relative;background:#fff;border:1px solid var(--rule);border-radius:var(--r);padding:26px 26px 0;box-shadow:0 24px 60px rgba(13,53,82,.14);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px}
  .herocard svg{width:100%;height:auto;filter:drop-shadow(0 10px 20px rgba(13,53,82,.12))}
  .herocard .plate{position:absolute;left:18px;top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--blue-2)}
  .herocard .plate.r{left:auto;right:18px}

  /* chip strip */
  .chips{background:var(--blue);color:#fff}
  .chips .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
  .chip{padding:26px 26px;border-left:1px solid rgba(255,255,255,.14)}
  .chip:first-child{border-left:0}
  .chip .ic{width:24px;height:24px;color:var(--sun);margin-bottom:12px}
  .chip b{display:block;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
  .chip span{color:#c6d4e0;font-size:13.5px}

  /* pillars */
  .pillars .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .pillar{border:1px solid var(--rule-2);border-top:3px solid var(--blue);border-radius:var(--r);padding:30px 28px;background:#fff;transition:box-shadow .15s,transform .12s}
  .pillar:hover{box-shadow:0 16px 40px rgba(13,53,82,.10);transform:translateY(-2px)}
  .pillar .n{font-family:var(--mono);color:var(--vest);font-size:12px;letter-spacing:.24em}
  .pillar h3{margin:14px 0 10px}
  .pillar p{color:var(--muted);margin:0;font-size:15.5px}

  /* steps */
  .steps{background:var(--panel);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  .stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
  .step{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r);padding:24px 22px;position:relative}
  .step .k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--blue-2)}
  .step h3{font-size:18px;margin:12px 0 8px}
  .step p{color:var(--muted);font-size:14.5px;margin:0}

  /* band */
  .band{background:#fff}
  .band .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .band.alt{background:var(--panel);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
  .kvs{margin-top:4px}
  .kv{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--rule-2)}
  .kv:first-child{border-top:1px solid var(--rule-2)}
  .kv .k{color:var(--ink-hi);font-weight:600;font-size:16px;white-space:nowrap}
  .kv .dot{flex:1;border-bottom:1px dotted var(--rule);position:relative;top:-4px}
  .kv .v{color:var(--muted);font-size:15px;text-align:right}

  /* compare */
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:8px}
  .compare .col{padding:30px 30px}
  .compare .col.own{background:#fff}
  .compare .col.rent{background:var(--panel-2)}
  .compare h3{font-size:16px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
  .compare .own h3{color:var(--blue)}
  .compare .rent h3{color:var(--muted)}
  .compare ul{list-style:none;margin:0;padding:0}
  .compare li{padding:11px 0 11px 28px;position:relative;border-bottom:1px solid var(--rule-2);font-size:15.5px}
  .compare li:last-child{border-bottom:0}
  .compare .own li{color:var(--ink-hi)}
  .compare .rent li{color:var(--muted)}
  .compare li::before{position:absolute;left:0;top:10px;font-family:var(--mono);font-size:13px}
  .compare .own li::before{content:"+";color:var(--blue)}
  .compare .rent li::before{content:"x";color:var(--vest)}

  /* audience */
  .aud{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  .tag{border:1px solid var(--rule);border-radius:100px;padding:9px 16px;font-size:14px;color:var(--ink-hi);background:#fff}

  /* cta */
  .cta{background:var(--blue);color:#fff;position:relative;overflow:hidden}
  .cta::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      url(/assets/presence-l3-inv.svg),
      url(/assets/presence-l2-inv.svg),
      url(/assets/presence-l1-inv.svg);
    background-size:auto 140%, auto 105%, auto 190%;
    background-position:left -60px top -30px, center, right -140px bottom -90px;
    background-repeat:no-repeat, no-repeat, no-repeat;
    opacity:.9}
  .cta .wrap{text-align:center;position:relative;z-index:1}
  .cta h2{color:#fff;max-width:22ch;margin:0 auto}
  .cta p{color:#c9d6e2;margin:16px auto 0;max-width:48ch}
  .cta .btn{background:#fff;color:var(--blue);border-color:#fff;margin-top:26px}
  .cta .btn:hover{background:#eef3f7}

  /* footer */
  footer.site{background:#0a141d;color:#a7b4bd}
  .foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;padding:56px 32px 22px}
  .foot .tag{max-width:34ch;margin-top:14px}
  .foot .brand{color:#fff}
  .foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#75838d;margin:0 0 14px}
  .foot a{display:block;color:#a7b4bd;padding:6px 0}
  .foot a:hover{color:#fff}
  .rule{border-top:1px solid #17232e;margin:8px 32px 0}
  .fine{max-width:var(--maxw);margin:0 auto;padding:18px 32px 34px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#5f6d77}

  /* tablet */
  @media (max-width:1040px){
    .foot{grid-template-columns:1fr 1fr 1fr}
    .band .wrap{gap:40px}
  }
  /* mobile */
  @media (max-width:820px){
    .wrap{padding:0 22px}
    section{padding:56px 0}
    nav.main{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--rule-2);flex-direction:column;align-items:stretch;gap:0;padding:8px 0;display:none;box-shadow:0 18px 40px rgba(10,16,19,.10)}
    nav.main a{padding:14px 22px}
    nav.main .btn{margin:10px 22px;justify-content:center}
    label.navtoggle{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:var(--r-sm);width:44px;height:40px;align-items:center;justify-content:center;cursor:pointer}
    .navtoggle span,.navtoggle span::before,.navtoggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink-hi);position:relative}
    .navtoggle span::before{position:absolute;top:-6px}
    .navtoggle span::after{position:absolute;top:6px}
    #nav:checked ~ nav.main{display:flex}
    .hero .wrap{grid-template-columns:1fr;gap:34px;padding:44px 22px 54px}
    .herofig{order:-1;justify-self:start;max-width:220px}
    .chips .wrap{grid-template-columns:1fr 1fr}
    .chip{border-top:1px solid rgba(255,255,255,.14)}
    .chip:nth-child(-n+2){border-top:0}
    .chip:nth-child(odd){border-left:0}
    .pillars .grid{grid-template-columns:1fr}
    .stepgrid{grid-template-columns:1fr 1fr}
    .band .wrap{grid-template-columns:1fr;gap:26px}
    .compare{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr 1fr}
  }
  @media (max-width:480px){
    .chips .wrap{grid-template-columns:1fr}
    .chip{border-left:0}
    .stepgrid{grid-template-columns:1fr}
    .kv .v{display:none}
    .foot{grid-template-columns:1fr}
    .topbar .t-right{display:none}
  }

/* growth art and filler */
.growthwrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.growthchart{width:100%;height:auto;max-width:560px;margin:0 auto;display:block}
.growthchart text{font-family:var(--mono)}
.cap-illus{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);margin-top:16px}
.cta .curve{position:absolute;right:0;bottom:0;width:min(560px,58%);height:auto;opacity:.15;color:#fff;pointer-events:none;z-index:0}
@media (max-width:820px){ .growthwrap{grid-template-columns:1fr;gap:28px} .cta .curve{width:82%;opacity:.1} }

/* spec table: a ruled "what you get" panel, cleaner than dot-leader lines */
.spectable-wrap{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.spectable{width:100%;border-collapse:collapse;background:#fff}
.spectable th{background:var(--blue);color:#fff;text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px;font-weight:400}
.spectable td{padding:12px 16px;border-top:1px solid var(--rule-2);font-size:15px}
.spectable tbody tr:nth-child(even) td{background:var(--panel)}
.spectable td:first-child{color:var(--ink-hi);font-weight:600}
.spectable td:last-child{color:var(--muted);text-align:right}

/* round every form field */
input,textarea,select{border-radius:var(--r-sm)}

/* hero personality: transparent 'the internet', italic 'can't tell' */
.hero h1 .ghost{color:rgba(11,17,20,.30)}
.hero h1 em{font-style:italic}
.hero h1 .hollow{color:var(--blue);font-style:italic}
@supports ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){.hero h1 .hollow{color:transparent;-webkit-text-stroke:2px var(--blue);text-stroke:2px var(--blue)}}

/* topbar sticker header + dual CTA */
.topbar .t-tag{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 13px;opacity:1}
.topbar .t-cta{gap:10px;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:5px 14px;background:rgba(255,255,255,.06)}
.topbar .t-cta a{border-bottom:0;font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:11px;white-space:nowrap}
.topbar .t-cta .sep{opacity:.45}

/* ═══════════════════════════════════════════════════════════════════════
   THE BLUEPRINT LAYER

   Everything above this line is the site. Everything below turns it into a
   drawing. It is appended rather than woven in so it can be deleted in one
   cut if it ever stops earning its place.

   The principle: a blueprint is not blue paper with a building on it. It is
   a sheet with a coordinate system, drawings placed on that system, and
   annotation that tells you what you are looking at. So the moves here are
   structural, not decorative.

     1  the page becomes graph paper, with a heavy line every fifth square
     2  a sheet border with registration marks, the edge of the drawing
     3  every section is a detail, auto lettered, with a leader into its title
     4  panels get corner ticks instead of full frames
     5  dividers are centerlines, dash dot, not solid rules
     6  the footer becomes a title block

   Nothing here changes a single word of copy.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --grid-min:#e9eef1;      /* the fine square */
  --grid-maj:#dbe4e9;      /* every fifth, heavier, the way real paper is ruled */
  --draft:#9aabb6;         /* annotation ink, quieter than body text */
}

/* ── 1 · THE PAPER ───────────────────────────────────────────────────
   Two grids, not one. A single even grid reads as a spreadsheet. The
   heavier line every fifth square is what the eye recognises as drafting
   stock, and it gives the page a measurable rhythm. 30px minor, 150 major. */
body{
  background-color:var(--ground);
  background-image:
    linear-gradient(var(--grid-maj) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-maj) 1px, transparent 1px),
    linear-gradient(var(--grid-min) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-min) 1px, transparent 1px);
  background-size:150px 150px, 150px 150px, 30px 30px, 30px 30px;
  background-position:0 0;
  background-attachment:fixed;   /* the sheet stays put, the drawings scroll */
}

/* white sections were hiding the paper. They go transparent; the panels and
   cards that sit on top stay opaque, which is what makes them read as pasted
   onto the sheet rather than printed into it. */
.band{background:transparent}
.band.alt{background:rgba(244,247,248,.82)}
.steps{background:rgba(244,247,248,.86)}

/* ── 2 · NO SHEET BORDER ─────────────────────────────────────────────
   There used to be a hairline frame inset from the viewport with a
   registration tick at each corner. It was the most literally "drafting"
   element on the site and it had to go, because it was fixed to the viewport
   while the navy topbar scrolls under it. The line cut straight across that
   dark bar and read as a rendering artifact rather than as the edge of a
   sheet. Austin spotted it as "a weird border", which is exactly right.

   Nothing is lost. The paper, the title block, the detail bubbles and the
   centerlines all carry the drawing idea, and none of them fight the layout.
   A frame is the one piece of drafting furniture that has to sit outside the
   content, and in a scrolling page there is no outside. */

/* ── 3 · EVERY SECTION IS A DETAIL ───────────────────────────────────
   On a real sheet each drawing carries a bubble with its letter, and a
   leader line running from the bubble to what it labels.

   The lettering is a CSS counter, so sections number themselves. Add a
   section, reorder them, delete one: the sequence stays correct and nobody
   has to remember to renumber anything by hand. */
/* The counter advances on the eyebrow, not on the section. Counting sections
   meant the hero and the chips bar silently consumed A and B, so the first
   bubble a visitor ever saw was lettered C, which reads like two drawings
   went missing. Counting the labels themselves makes the visible sequence
   start at A and stay contiguous. */
body{counter-reset:detail}
.eyebrow{counter-increment:detail}
.eyebrow{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.eyebrow::before{
  content:counter(detail, upper-alpha);
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:22px;height:22px;margin-right:0;border-radius:50%;
  border:1.5px solid var(--blue-2);color:var(--blue-2);
  font-family:var(--mono);font-size:11px;letter-spacing:0;line-height:1}
.eyebrow::after{
  content:"";flex:0 0 26px;height:1px;background:var(--blue-2);opacity:.42;
  margin:0 12px 0 0}
/* The leader has to sit BETWEEN the bubble and the words, so the run reads
   bubble, line, label. The text of .eyebrow is an anonymous flex item at
   order 0, and ::after generates after it in the box tree, so at equal order
   the line landed to the RIGHT of the label. Pulling both pseudo elements to
   order -1 puts them ahead of the text, and ::before still precedes ::after
   inside that group, which gives the run the correct order. */
.eyebrow::before{order:-1;margin-right:10px}
.eyebrow::after{order:-1}

/* ── 4 · PANELS GET TICKS, NOT FRAMES ────────────────────────────────
   A full border round a card says "box". Four corner ticks say "this area
   is called out", which is the drafting convention and is also lighter on
   the page. The card keeps a hairline so it still separates from the paper. */
.pillar, .herocard, .spectable-wrap{position:relative}
.pillar::before, .pillar::after,
.herocard::before, .herocard::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  border:0 solid var(--blue-2);opacity:.5}
.pillar::before, .herocard::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.pillar::after, .herocard::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}

/* ── 5 · CENTERLINES ─────────────────────────────────────────────────
   Dash dot is the drafting line type for an axis. Solid rules between
   sections read as a web page; centerlines read as a drawing. */
.band.alt, .steps{border-top:0;border-bottom:0;position:relative}
.band.alt::before, .band.alt::after,
.steps::before, .steps::after{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background-image:repeating-linear-gradient(to right,
    var(--rule) 0 14px, transparent 14px 20px,
    var(--rule) 20px 23px, transparent 23px 29px)}
.band.alt::before, .steps::before{top:0}
.band.alt::after, .steps::after{bottom:0}

/* ── 6 · THE TITLE BLOCK ─────────────────────────────────────────────
   Every drawing ends in a title block: who drew it, what it is, what scale,
   which revision. It is the single most recognisable piece of drafting
   furniture, and unlike most blueprint styling it carries real information
   rather than pretending to. */
.titleblock{border:1.5px solid rgba(255,255,255,.22);margin:0 32px 30px;
  display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr .8fr;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.titleblock div{border-left:1px solid rgba(255,255,255,.16);padding:11px 14px}
.titleblock div:first-child{border-left:0}
.titleblock .k{display:block;color:#6b7a85;font-size:9px;letter-spacing:.22em;margin-bottom:5px}
.titleblock .v{color:#dbe6ee}
@media (max-width:820px){
  .titleblock{grid-template-columns:1fr 1fr;margin:0 20px 22px}
  .titleblock div:nth-child(odd){border-left:0}
  .titleblock div{border-top:1px solid rgba(255,255,255,.16)}
}

/* the hero already carried its own grid. It now inherits the paper, so its
   local 32px squares are dropped to avoid a moire against the 30px sheet. */
.hero{background-attachment:scroll}

/* the footer tagline was picking up the global .tag pill, white on near
   black, which read as a sticker somebody left on the drawing. On the sheet
   it is a note, so it is set as one. */
.foot .tag{background:none;border:0;border-left:2px solid var(--sun);
  border-radius:0;padding:2px 0 2px 13px;color:#9fb0bb;font-size:14px}

/* ── THE FIELD CONTINUES THROUGH THE PAGE ────────────────────────────
   The hero used to be the only place anything was happening, so the page
   went quiet the moment you scrolled past it. The field now runs the whole
   length, but it changes character section to section rather than repeating:
   each band pulls a different layer at a different scale, anchored to a
   different edge. Nothing tiles, and no two sections look alike.

   All of it sits behind a wash and under the content, so nothing here can
   touch legibility or take a click. */
.band, .steps, .pillars, .page-head{position:relative}
.band::before, .steps::before, .pillars::before, .page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:no-repeat}
.band > *, .steps > *, .pillars > *, .page-head > *{position:relative;z-index:1}

/* odd bands lean left and large, even bands lean right and small, so the eye
   is pulled across the page rather than down one gutter */
.pillars::before{
  background-image:url(/assets/presence-l2.svg);
  background-size:auto 128%;
  background-position:right -120px top -60px;
  opacity:.85}
.steps::before{
  background-image:url(/assets/presence-l3.svg);
  background-size:auto 165%;
  background-position:left -60px center;
  opacity:.75}
.band::before{
  background-image:url(/assets/presence-l3.svg);
  background-size:auto 140%;
  background-position:right -90px bottom -50px;
  opacity:.8}
.band.alt::before{
  background-image:url(/assets/presence-l2.svg);
  background-size:auto 112%;
  background-position:left -40px bottom -30px;
  opacity:.72}
.page-head::before{
  background-image:url(/assets/presence-l2.svg);
  background-size:auto 120%;
  background-position:right -70px center;
  opacity:.8}

/* phones get one layer per section, not two. Two on a 390px viewport is not
   depth, it is noise, and the type has nowhere to go. */
@media (max-width:820px){
  .pillars::before, .band::before, .band.alt::before, .page-head::before{
    background-image:url(/assets/presence-l2.svg);
    background-size:auto 62%;
    background-position:right -40px top 30%;
    opacity:.6}
  .steps::before{background-size:auto 70%;opacity:.55}
}

/* ── PAPER UNDER THE HEADINGS ────────────────────────────────────────
   With three layers running the length of the page, section headings sat
   directly on the field. The type stayed legible, because it is heavy and
   dark, but it lost the sense of being printed ON something.

   The instinct is to thin the field. That is the wrong trade: it costs
   density everywhere to fix a problem in a few small places. Instead each
   heading gets a soft halo of paper, sized to the text and fading out to
   nothing, so the field is untouched and the words sit on a surface.

   inset is negative so the halo reaches past the text on every side, and
   z-index -1 keeps it under the words but over the field. */
.sec-head, .hero .wrap > div:first-child, .growthwrap > div:first-child{
  position:relative;z-index:1}
.sec-head::before, .growthwrap > div:first-child::before{
  content:"";position:absolute;inset:-40px -70px;z-index:-1;pointer-events:none;
  background:radial-gradient(78% 88% at 34% 50%,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 38%,
    rgba(255,255,255,.55) 68%, rgba(255,255,255,0) 100%)}
@media (max-width:820px){
  .sec-head::before, .growthwrap > div:first-child::before{inset:-18px -22px}
}

/* about, faq and contact lead with .page-head rather than .sec-head, so they
   need the same paper. Same halo, sized to a page title rather than a
   section title. */
.page-head .wrap{position:relative;z-index:1}
.page-head .wrap::before{content:"";position:absolute;inset:-36px -60px;
  z-index:-1;pointer-events:none;
  background:radial-gradient(76% 86% at 34% 50%,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 40%,
    rgba(255,255,255,.48) 70%, rgba(255,255,255,0) 100%)}