/* ==========================================================================
   BITSTREAM CHARTER, embedded
   --------------------------------------------------------------------------
   Three subset faces as data URIs: 20 KB of WOFF2, 27 KB inlined, and zero
   network requests. Converted from the Type 1 originals shipped with X11,
   subset to the characters this site uses.

   Charter was chosen because it was cut for low-resolution rendering, so it
   stays crisp at text sizes where a high-contrast display serif turns to
   mush, and because it sets narrower than the system serif stack, which
   holds more words per line without shrinking the type.

   (c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA.

   You are hereby granted permission under all Bitstream propriety rights to
   use, copy, modify, sublicense, sell, and redistribute the 4 Bitstream
   Charter (r) Type 1 outline fonts and the 4 Courier Type 1 outline fonts for
   any purpose and without restriction; provided, that this notice is left
   intact on all copies of such fonts and that Bitstream's trademark is
   acknowledged as shown below on all unmodified copies of the 4 Charter Type
   1 fonts.

   BITSTREAM CHARTER is a registered trademark of Bitstream Inc.

   Full notice: assets/fonts/LICENSE.txt
   ========================================================================== */

@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}

@font-face {
  font-family: "Charter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}


/* ==========================================================================
   Nupik Wenpach — nupikwenpach.com
   Hand-written CSS. No build step, no framework, no external requests.

   Contents
     1.  Design tokens
     2.  Reset & base
     3.  Layout primitives
     4.  Typography helpers
     5.  Buttons
     6.  Header & navigation
     7.  Hero
     8.  Sections
     9.  Filters
     10. Project cards
     11. Services & process
     12. Principles
     13. Contact CTA & enquiry form
     14. Footer
     15. Motion & reveal
     16. Product showcases
   ========================================================================== */


/* 1. DESIGN TOKENS
   ------------------------------------------------------------------------
   Each accent ships in two flavours:
     --x        the saturated brand colour, for fills, rails and large type
     --x-ink    a darkened variant that clears 4.5:1 on the page background,
                for body-sized text and links
   -------------------------------------------------------------------- */
/* Type and metrics do not vary by world or theme, so they sit outside the
   generated block and are safe to hand edit. */
:root {
  --font-serif: "Charter", ui-serif, "Iowan Old Style", "Palatino Linotype",
                Palatino, Georgia, Cambria, "Times New Roman", serif;
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;

  --shell:      1160px;
  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  28px;
  --header-h:   64px;
}

/* >>> THEME BLOCK: generated by tools/build-brand.py, do not hand edit */

/* Worlds. The default is stamped on <html> by the head script, which also
   reads ?world= and localStorage, so a world survives a reload and can be
   set from a link. Default: oxide. */

/* Oxide: Cut iron left in the weather. Rust, scale and bone. */
:root, :root[data-world="oxide"] {
  --paper:      #f4efe6;
  --paper-2:    #fffdf8;
  --paper-3:    #ebe3d5;
  --line:       #ded3c0;
  --line-soft:  #e8e0d2;

  --ink:        #1c1611;
  --ink-2:      #4a3e33;
  --ink-3:      #7c6e60;

  --accent:     #c1440e;
  --accent-ink: #9a360b;
  --second:     #5b5750;
  --second-ink: #45423c;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #c1440e;
  --brand-ink:  #9a360b;
  --coral:      #c1440e;
  --coral-ink:  #9a360b;
  --teal:       #5b5750;
  --teal-ink:   #45423c;
  --amber:      #5b5750;
  --amber-ink:  #45423c;
  --magenta:    #5b5750;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  linear-gradient(140deg, #C1440E 0%, #8A2B0B 58%, #43180A 100%);
  --seal-t1:    #C1440E;
  --seal-t2:    #8A2B0B;
  --seal-t3:    #43180A;
  --seal-m1:    #f2ece0;
  --seal-m2:    #cfc5b2;
  --seal-m3:    #a19681;
  --seal-m4:    #6f6455;
  color-scheme: light;
}
:root[data-theme="dark"], [data-world="oxide"][data-theme="dark"] {
  --paper:      #14100c;
  --paper-2:    #1c1712;
  --paper-3:    #241d16;
  --line:       #352c22;
  --line-soft:  #2a2219;

  --ink:        #f4ece0;
  --ink-2:      #c6b7a4;
  --ink-3:      #948676;

  --accent:     #e05a1f;
  --accent-ink: #ff8f52;
  --second:     #a89c8c;
  --second-ink: #c9beac;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #e05a1f;
  --brand-ink:  #ff8f52;
  --coral:      #e05a1f;
  --coral-ink:  #ff8f52;
  --teal:       #a89c8c;
  --teal-ink:   #c9beac;
  --amber:      #a89c8c;
  --amber-ink:  #c9beac;
  --magenta:    #a89c8c;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  linear-gradient(140deg, #C1440E 0%, #8A2B0B 58%, #43180A 100%);
  --seal-t1:    #C1440E;
  --seal-t2:    #8A2B0B;
  --seal-t3:    #43180A;
  --seal-m1:    #f2ece0;
  --seal-m2:    #cfc5b2;
  --seal-m3:    #a19681;
  --seal-m4:    #6f6455;
  color-scheme: dark;
}

/* Voltage: Electric, synthetic, unmistakably a screen colour. */
[data-world="voltage"] {
  --paper:      #faf9fc;
  --paper-2:    #ffffff;
  --paper-3:    #f1f0f6;
  --line:       #e4e2ee;
  --line-soft:  #edecf4;

  --ink:        #12121a;
  --ink-2:      #3b3b4d;
  --ink-3:      #6a6a80;

  --accent:     #4f2ae8;
  --accent-ink: #4423cc;
  --second:     #b02fd4;
  --second-ink: #8e22ae;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #4f2ae8;
  --brand-ink:  #4423cc;
  --coral:      #4f2ae8;
  --coral-ink:  #4423cc;
  --teal:       #b02fd4;
  --teal-ink:   #8e22ae;
  --amber:      #b02fd4;
  --amber-ink:  #8e22ae;
  --magenta:    #b02fd4;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  linear-gradient(135deg, #4F2AE8 0%, #B02FD4 55%, #F0451F 100%);
  --seal-t1:    #4F2AE8;
  --seal-t2:    #B02FD4;
  --seal-t3:    #F0451F;
  --seal-m1:    #9aa0ac;
  --seal-m2:    #5f6673;
  --seal-m3:    #3b414d;
  --seal-m4:    #242832;
  color-scheme: light;
}
[data-world="voltage"][data-theme="dark"] {
  --paper:      #0d0d14;
  --paper-2:    #15151f;
  --paper-3:    #1b1b27;
  --line:       #262636;
  --line-soft:  #1f1f2c;

  --ink:        #f3f2f8;
  --ink-2:      #b9b7cc;
  --ink-3:      #85839b;

  --accent:     #7c5cff;
  --accent-ink: #a594ff;
  --second:     #cd5ae8;
  --second-ink: #dd86f0;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #7c5cff;
  --brand-ink:  #a594ff;
  --coral:      #7c5cff;
  --coral-ink:  #a594ff;
  --teal:       #cd5ae8;
  --teal-ink:   #dd86f0;
  --amber:      #cd5ae8;
  --amber-ink:  #dd86f0;
  --magenta:    #cd5ae8;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  linear-gradient(135deg, #4F2AE8 0%, #B02FD4 55%, #F0451F 100%);
  --seal-t1:    #4F2AE8;
  --seal-t2:    #B02FD4;
  --seal-t3:    #F0451F;
  --seal-m1:    #9aa0ac;
  --seal-m2:    #5f6673;
  --seal-m3:    #3b414d;
  --seal-m4:    #242832;
  color-scheme: dark;
}

/* Verdigris: Copper part way through turning. */
[data-world="verdigris"] {
  --paper:      #f1f0ea;
  --paper-2:    #fdfdf8;
  --paper-3:    #e7e7de;
  --line:       #d8d8cc;
  --line-soft:  #e3e3d8;

  --ink:        #14201c;
  --ink-2:      #3c4a45;
  --ink-3:      #6b7873;

  --accent:     #1f6b5c;
  --accent-ink: #17564a;
  --second:     #a85a22;
  --second-ink: #8a4a1c;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #1f6b5c;
  --brand-ink:  #17564a;
  --coral:      #1f6b5c;
  --coral-ink:  #17564a;
  --teal:       #a85a22;
  --teal-ink:   #8a4a1c;
  --amber:      #a85a22;
  --amber-ink:  #8a4a1c;
  --magenta:    #a85a22;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  linear-gradient(135deg, #B4652A 0%, #7C4A20 42%, #2E7D6B 100%);
  --seal-t1:    #B4652A;
  --seal-t2:    #7C4A20;
  --seal-t3:    #2E7D6B;
  --seal-m1:    #f4ecdd;
  --seal-m2:    #d8cbb0;
  --seal-m3:    #a8987a;
  --seal-m4:    #6f6350;
  color-scheme: light;
}
[data-world="verdigris"][data-theme="dark"] {
  --paper:      #0b1210;
  --paper-2:    #121a17;
  --paper-3:    #17211d;
  --line:       #24312c;
  --line-soft:  #1b2521;

  --ink:        #eef4f1;
  --ink-2:      #b3c4bd;
  --ink-3:      #82918b;

  --accent:     #2f9e88;
  --accent-ink: #5fc8b2;
  --second:     #c9762e;
  --second-ink: #e0954f;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #2f9e88;
  --brand-ink:  #5fc8b2;
  --coral:      #2f9e88;
  --coral-ink:  #5fc8b2;
  --teal:       #c9762e;
  --teal-ink:   #e0954f;
  --amber:      #c9762e;
  --amber-ink:  #e0954f;
  --magenta:    #c9762e;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  linear-gradient(135deg, #B4652A 0%, #7C4A20 42%, #2E7D6B 100%);
  --seal-t1:    #B4652A;
  --seal-t2:    #7C4A20;
  --seal-t3:    #2E7D6B;
  --seal-m1:    #f4ecdd;
  --seal-m2:    #d8cbb0;
  --seal-m3:    #a8987a;
  --seal-m4:    #6f6350;
  color-scheme: dark;
}

/* Cathode: A lit instrument in a dark room. */
[data-world="cathode"] {
  --paper:      #f2f6f8;
  --paper-2:    #ffffff;
  --paper-3:    #e7eef1;
  --line:       #d5e0e5;
  --line-soft:  #e2eaee;

  --ink:        #0a1218;
  --ink-2:      #35464f;
  --ink-3:      #64757e;

  --accent:     #0e7490;
  --accent-ink: #0b5c73;
  --second:     #1f4a5c;
  --second-ink: #163846;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #0e7490;
  --brand-ink:  #0b5c73;
  --coral:      #0e7490;
  --coral-ink:  #0b5c73;
  --teal:       #1f4a5c;
  --teal-ink:   #163846;
  --amber:      #1f4a5c;
  --amber-ink:  #163846;
  --magenta:    #1f4a5c;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  radial-gradient(125% 115% at 30% 20%, #12455E 0%, #0A2231 45%, #050C12 100%);
  --seal-t1:    #12455E;
  --seal-t2:    #0A2231;
  --seal-t3:    #050C12;
  --seal-m1:    #ffffff;
  --seal-m2:    #dfe9ee;
  --seal-m3:    #8fa3ad;
  --seal-m4:    #5b6a72;
  color-scheme: light;
}
[data-world="cathode"][data-theme="dark"] {
  --paper:      #070b0f;
  --paper-2:    #0d141b;
  --paper-3:    #121b23;
  --line:       #1e2a33;
  --line-soft:  #16202a;

  --ink:        #e8f4f8;
  --ink-2:      #9fb6c2;
  --ink-3:      #71858f;

  --accent:     #22d3ee;
  --accent-ink: #67e8f9;
  --second:     #3a8fa8;
  --second-ink: #6fc0d4;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #22d3ee;
  --brand-ink:  #67e8f9;
  --coral:      #22d3ee;
  --coral-ink:  #67e8f9;
  --teal:       #3a8fa8;
  --teal-ink:   #6fc0d4;
  --amber:      #3a8fa8;
  --amber-ink:  #6fc0d4;
  --magenta:    #3a8fa8;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  radial-gradient(125% 115% at 30% 20%, #12455E 0%, #0A2231 45%, #050C12 100%);
  --seal-t1:    #12455E;
  --seal-t2:    #0A2231;
  --seal-t3:    #050C12;
  --seal-m1:    #ffffff;
  --seal-m2:    #dfe9ee;
  --seal-m3:    #8fa3ad;
  --seal-m4:    #5b6a72;
  color-scheme: dark;
}

/* Oxblood: A wax seal. Deep red, brass and handled paper. */
[data-world="oxblood"] {
  --paper:      #f3eee6;
  --paper-2:    #fffcf6;
  --paper-3:    #eae3d7;
  --line:       #dbd0be;
  --line-soft:  #e5dccd;

  --ink:        #1a1013;
  --ink-2:      #4b3a3e;
  --ink-3:      #7a666b;

  --accent:     #6e1420;
  --accent-ink: #6e1420;
  --second:     #8a6e2a;
  --second-ink: #6f5820;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #6e1420;
  --brand-ink:  #6e1420;
  --coral:      #6e1420;
  --coral-ink:  #6e1420;
  --teal:       #8a6e2a;
  --teal-ink:   #6f5820;
  --amber:      #8a6e2a;
  --amber-ink:  #6f5820;
  --magenta:    #8a6e2a;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  linear-gradient(140deg, #7A1626 0%, #54101C 55%, #320A12 100%);
  --seal-t1:    #7A1626;
  --seal-t2:    #54101C;
  --seal-t3:    #320A12;
  --seal-m1:    #f6e6b8;
  --seal-m2:    #dcc07a;
  --seal-m3:    #ad8f3f;
  --seal-m4:    #75601f;
  color-scheme: light;
}
[data-world="oxblood"][data-theme="dark"] {
  --paper:      #130c0e;
  --paper-2:    #1b1214;
  --paper-3:    #22171a;
  --line:       #322226;
  --line-soft:  #271b1e;

  --ink:        #f4e9e6;
  --ink-2:      #c4aaa8;
  --ink-3:      #94797a;

  --accent:     #a83244;
  --accent-ink: #d9737f;
  --second:     #c9a227;
  --second-ink: #dcbf5e;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #a83244;
  --brand-ink:  #d9737f;
  --coral:      #a83244;
  --coral-ink:  #d9737f;
  --teal:       #c9a227;
  --teal-ink:   #dcbf5e;
  --amber:      #c9a227;
  --amber-ink:  #dcbf5e;
  --magenta:    #c9a227;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  linear-gradient(140deg, #7A1626 0%, #54101C 55%, #320A12 100%);
  --seal-t1:    #7A1626;
  --seal-t2:    #54101C;
  --seal-t3:    #320A12;
  --seal-m1:    #f6e6b8;
  --seal-m2:    #dcc07a;
  --seal-m3:    #ad8f3f;
  --seal-m4:    #75601f;
  color-scheme: dark;
}

/* Sodium: A yard under a sodium lamp. */
[data-world="sodium"] {
  --paper:      #f5f1e8;
  --paper-2:    #fffdf7;
  --paper-3:    #ebe5d8;
  --line:       #dcd4c2;
  --line-soft:  #e6dfd0;

  --ink:        #1a1713;
  --ink-2:      #4a4238;
  --ink-3:      #7a7062;

  --accent:     #8a5200;
  --accent-ink: #6e4100;
  --second:     #4a423a;
  --second-ink: #37312b;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #8a5200;
  --brand-ink:  #6e4100;
  --coral:      #8a5200;
  --coral-ink:  #6e4100;
  --teal:       #4a423a;
  --teal-ink:   #37312b;
  --amber:      #4a423a;
  --amber-ink:  #37312b;
  --magenta:    #4a423a;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  linear-gradient(150deg, #2E2822 0%, #1A1612 55%, #0E0C0A 100%);
  --seal-t1:    #2E2822;
  --seal-t2:    #1A1612;
  --seal-t3:    #0E0C0A;
  --seal-m1:    #ffd89a;
  --seal-m2:    #ffab3d;
  --seal-m3:    #c9741a;
  --seal-m4:    #8a4a0c;
  color-scheme: light;
}
[data-world="sodium"][data-theme="dark"] {
  --paper:      #14120f;
  --paper-2:    #1c1915;
  --paper-3:    #24201b;
  --line:       #332d25;
  --line-soft:  #26221c;

  --ink:        #f5eddf;
  --ink-2:      #bdb0a0;
  --ink-3:      #8d8272;

  --accent:     #ff9f1c;
  --accent-ink: #ffc46b;
  --second:     #c9741a;
  --second-ink: #e0954f;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #ff9f1c;
  --brand-ink:  #ffc46b;
  --coral:      #ff9f1c;
  --coral-ink:  #ffc46b;
  --teal:       #c9741a;
  --teal-ink:   #e0954f;
  --amber:      #c9741a;
  --amber-ink:  #e0954f;
  --magenta:    #c9741a;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  linear-gradient(150deg, #2E2822 0%, #1A1612 55%, #0E0C0A 100%);
  --seal-t1:    #2E2822;
  --seal-t2:    #1A1612;
  --seal-t3:    #0E0C0A;
  --seal-m1:    #ffd89a;
  --seal-m2:    #ffab3d;
  --seal-m3:    #c9741a;
  --seal-m4:    #8a4a0c;
  color-scheme: dark;
}

/* Bone and ink: No colour except one, and only where something is urgent. */
[data-world="bone"] {
  --paper:      #f5f2ea;
  --paper-2:    #fffefa;
  --paper-3:    #ebe7dc;
  --line:       #dcd7c8;
  --line-soft:  #e6e2d5;

  --ink:        #14110d;
  --ink-2:      #443f36;
  --ink-3:      #736c60;

  --accent:     #a3231c;
  --accent-ink: #8c1d17;
  --second:     #443f36;
  --second-ink: #2c281f;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #a3231c;
  --brand-ink:  #8c1d17;
  --coral:      #a3231c;
  --coral-ink:  #8c1d17;
  --teal:       #443f36;
  --teal-ink:   #2c281f;
  --amber:      #443f36;
  --amber-ink:  #2c281f;
  --magenta:    #443f36;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  #14110d;
  --seal-t1:    #14110d;
  --seal-t2:    #14110d;
  --seal-t3:    #14110d;
  --seal-m1:    #ffffff;
  --seal-m2:    #eae5da;
  --seal-m3:    #c9c2b4;
  --seal-m4:    #a49c8c;
  color-scheme: light;
}
[data-world="bone"][data-theme="dark"] {
  --paper:      #0f0e0b;
  --paper-2:    #171510;
  --paper-3:    #1e1b16;
  --line:       #2c2820;
  --line-soft:  #221f19;

  --ink:        #f5f2ea;
  --ink-2:      #bab3a4;
  --ink-3:      #8a8377;

  --accent:     #d94a41;
  --accent-ink: #ef7f77;
  --second:     #bab3a4;
  --second-ink: #d8d2c6;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #d94a41;
  --brand-ink:  #ef7f77;
  --coral:      #d94a41;
  --coral-ink:  #ef7f77;
  --teal:       #bab3a4;
  --teal-ink:   #d8d2c6;
  --amber:      #bab3a4;
  --amber-ink:  #d8d2c6;
  --magenta:    #bab3a4;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  #14110d;
  --seal-t1:    #14110d;
  --seal-t2:    #14110d;
  --seal-t3:    #14110d;
  --seal-m1:    #ffffff;
  --seal-m2:    #eae5da;
  --seal-m3:    #c9c2b4;
  --seal-m4:    #a49c8c;
  color-scheme: dark;
}

/* Cobalt and chalk: Blueprint and workwear. */
[data-world="cobalt"] {
  --paper:      #eef1f5;
  --paper-2:    #ffffff;
  --paper-3:    #e3e8ef;
  --line:       #d2dae5;
  --line-soft:  #dfe5ec;

  --ink:        #0b1524;
  --ink-2:      #37455a;
  --ink-3:      #66758c;

  --accent:     #123c8c;
  --accent-ink: #123c8c;
  --second:     #b8842b;
  --second-ink: #946722;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #123c8c;
  --brand-ink:  #123c8c;
  --coral:      #123c8c;
  --coral-ink:  #123c8c;
  --teal:       #b8842b;
  --teal-ink:   #946722;
  --amber:      #b8842b;
  --amber-ink:  #946722;
  --magenta:    #b8842b;

  --shadow-sm:  0 1px 2px rgba(16, 18, 25, .05), 0 2px 8px rgba(16, 18, 25, .04);
  --shadow-md:  0 2px 6px rgba(16, 18, 25, .06), 0 14px 32px rgba(16, 18, 25, .09);
  --shadow-lg:  0 4px 12px rgba(16, 18, 25, .08), 0 28px 60px rgba(16, 18, 25, .13);
  --wash-alpha: .70;
  --rail-alpha: 1;

  --seal-tile:  linear-gradient(140deg, #0F3D91 0%, #0A2A66 55%, #061838 100%);
  --seal-t1:    #0F3D91;
  --seal-t2:    #0A2A66;
  --seal-t3:    #061838;
  --seal-m1:    #ffffff;
  --seal-m2:    #dbe3ee;
  --seal-m3:    #9fb0c6;
  --seal-m4:    #67788e;
  color-scheme: light;
}
[data-world="cobalt"][data-theme="dark"] {
  --paper:      #080d16;
  --paper-2:    #10161f;
  --paper-3:    #151d29;
  --line:       #212b3a;
  --line-soft:  #18202c;

  --ink:        #eef2f8;
  --ink-2:      #adbaca;
  --ink-3:      #7d8a9c;

  --accent:     #3f6fd8;
  --accent-ink: #8aa9ee;
  --second:     #d9a13f;
  --second-ink: #e8bd6e;

  /* The five names the stylesheet already uses, folded onto the two above. */
  --brand:      #3f6fd8;
  --brand-ink:  #8aa9ee;
  --coral:      #3f6fd8;
  --coral-ink:  #8aa9ee;
  --teal:       #d9a13f;
  --teal-ink:   #e8bd6e;
  --amber:      #d9a13f;
  --amber-ink:  #e8bd6e;
  --magenta:    #d9a13f;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .38);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .45);
  --wash-alpha: .40;
  --rail-alpha: .9;

  --seal-tile:  linear-gradient(140deg, #0F3D91 0%, #0A2A66 55%, #061838 100%);
  --seal-t1:    #0F3D91;
  --seal-t2:    #0A2A66;
  --seal-t3:    #061838;
  --seal-m1:    #ffffff;
  --seal-m2:    #dbe3ee;
  --seal-m3:    #9fb0c6;
  --seal-m4:    #67788e;
  color-scheme: dark;
}

/* The seal reads its colours from the tokens above rather than from hard
   coded stops, so changing world repaints the mark with the page. SVG stop
   colours cannot take var() as a presentation attribute, only as a CSS
   property, which is why these are selectors and not attributes. */
#seal-metal stop:nth-child(1), #wm-metal stop:nth-child(1) { stop-color: var(--seal-m1); }
#seal-metal stop:nth-child(2), #wm-metal stop:nth-child(2) { stop-color: var(--seal-m2); }
#seal-metal stop:nth-child(3), #wm-metal stop:nth-child(3) { stop-color: var(--seal-m3); }
#seal-metal stop:nth-child(4), #wm-metal stop:nth-child(4) { stop-color: var(--seal-m4); }
.wordmark__mark stop:nth-child(1) { stop-color: var(--seal-t1); }
.wordmark__mark stop:nth-child(2) { stop-color: var(--seal-t2); }
.wordmark__mark stop:nth-child(3) { stop-color: var(--seal-t3); }
/* Two groups, two treatments. The mark is filled; the initials are
   stroked and must stay unfilled, and a blanket fill on every path in
   the tile turns each open glyph into a solid blob, because a CSS
   declaration beats the fill="none" presentation attribute on the group. */
.wordmark__mark [data-metal="solid"] path { fill: var(--seal-m1); }
.wordmark__mark [data-metal="line"] { stroke: var(--seal-m1); }
.wordmark__mark [data-metal="line"] path { fill: none; }
.wordmark__mark [data-metal="line"] circle { fill: var(--seal-m1); stroke: none; }

/* <<< THEME BLOCK */


/* 2. RESET & BASE
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18.5px;
  line-height: 1.6;
  letter-spacing: 0;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The interface layer stays sans: anything you click, toggle or read as a
   label. Prose and display type inherit the serif from <body>. */
.site-nav a,
.btn,
.chip,
.status,
.service__list li,
.site-footer__nav a,
.site-footer__legal,
.cards__empty,
.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  letter-spacing: -.011em;
}

/* The hidden attribute must win over any author display rule. Without this,
   `display: flex` on a component silently re-shows it — which is how the
   filter toolbar stayed visible with JS disabled, offering chips that could
   not work. Applies to every current and future use of [hidden]. */
[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }


/* 3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 560px) {
  .shell { padding-inline: 18px; }
}


/* 4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  box-shadow: var(--shadow-sm);
}

.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}

/* The full label is a long monospace string — shrink it rather than let it
   push past the viewport on a narrow phone. */
@media (max-width: 560px) {
  .eyebrow {
    font-size: 10.5px;
    letter-spacing: .04em;
    padding: 6px 12px 6px 10px;
  }
}

/* Colour-blocked words inside the hero headline. */
.hl { position: relative; white-space: nowrap; }
/* Sits under the baseline, not through the letters. At display sizes a
   third-of-an-em bar reads as a strike-through rather than a highlight. */
.hl::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.04em;
  bottom: -.02em;
  height: .16em;
  border-radius: .04em;
  z-index: -1;
  opacity: .32;
  background: currentColor;
}
.hl--brand { color: var(--brand-ink); }
.hl--coral { color: var(--coral-ink); }
.hl--teal  { color: var(--teal-ink); }


/* 5. BUTTONS
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease,
              background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--magenta) 68%, var(--coral));
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 34%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 42%, transparent);
}

.btn--ghost {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--ink-3); }

.btn--invert {
  background: #fff;
  color: #14161d;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: -.02em;
}

.btn--outline {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px);
}
.btn--outline:hover { background: rgba(255, 255, 255, .16); }


/* 6. HEADER & NAVIGATION
   -------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -.005em;
  margin-right: auto;
}
/* 34 rather than 28: the tile carries the four initials as well as the mark
   now, and the dot that distinguishes the second half of the cipher needs the
   pixels. Radius tracks the 8-of-32 in the artwork. */
.wordmark__mark { width: 34px; height: 34px; border-radius: 8.5px; flex: none; }
/* The stacked lockup, as outlines rather than live type. The seal is 98 of
   the lockup's 115 unit height, so a 40px name puts the tile at 34, which is
   the size it was already. Nothing about the header's height changes. */
.wordmark__name {
  height: 40px;
  width: auto;
  color: var(--ink);
  flex: none;
}

.site-nav {
  display: flex;
  gap: 4px;
}
.site-nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .16s ease, background-color .16s ease;
}
.site-nav a:hover {
  color: var(--ink);
  background: var(--paper-3);
}

/* The one nav item that is a conversion target, not navigation. */
.site-nav__cta {
  margin-left: 6px;
  color: #fff !important;
  font-weight: 600;
  background: linear-gradient(135deg, var(--brand), var(--magenta));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}
.site-nav__cta:hover {
  background: linear-gradient(135deg, var(--brand), var(--coral)) !important;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--brand) 40%, transparent);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun  { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }

@media (max-width: 620px) {
  .site-nav { display: none; }
}


/* 7. HERO
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(52px, 8vw, 96px) 0 clamp(50px, 7vw, 84px);
  /* Not hidden: the seal hangs past the bottom edge. What needed clipping was
     the wash and the grid, and they are clipped by .hero__bleed instead. */
}

.hero__bleed {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Soft multi-colour wash — the "pop" without shouting. */
.hero__wash {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -2;
  opacity: var(--wash-alpha);
  /* Fade the wash out before the hero ends, so the section boundary is a
     dissolve rather than a cut. The clip is still there, it just has nothing
     left to clip by the time it arrives. */
  mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 97%);
  background:
    radial-gradient(46% 42% at 14% 22%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 68%),
    radial-gradient(40% 38% at 82% 12%, color-mix(in srgb, var(--coral) 48%, transparent), transparent 66%),
    radial-gradient(44% 40% at 62% 76%, color-mix(in srgb, var(--teal) 42%, transparent), transparent 68%),
    radial-gradient(34% 32% at 34% 88%, color-mix(in srgb, var(--amber) 44%, transparent), transparent 66%);
  filter: blur(28px);
}

/* Fine engineering grid, faded at the edges. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 62% at 50% 34%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000 30%, transparent 78%);
}

.hero__inner {
  position: relative;   /* the seal anchors to the content edge, not the viewport */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__title {
  margin-top: 26px;
  max-width: 17ch;
  font-size: clamp(2.05rem, 6.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.023em;
  font-weight: 700;

  /* Two deliberate lines, so the browser must not invent its own.
     `width: 100%` because the hero column is align-items: flex-start, which
     otherwise shrink-wraps the heading to well under the shell and forces a
     break. No `text-wrap: balance` either: balancing computes a narrower
     preferred width and was splitting the roman half in two. */
  width: 100%;
  max-width: none;
}

.hero__title-lead,
.hero__title-tail { display: block; }
.hero__title-tail { color: var(--ink-2); font-weight: 400; font-style: italic; }

.hero__lede {
  margin-top: 28px;
  /* Wide enough to hold the four details on four lines rather than five, and
     no wider: 74ch would fit them on three, but at roughly 87 characters a
     line, which is past the point prose stays comfortable to read. */
  max-width: 64ch;
  font-size: clamp(1.06rem, 1.65vw, 1.26rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 56px;
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 720px;
}

.stat dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat dd {
  margin-top: 4px;
  font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--brand), var(--magenta) 60%, var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* 8. SECTIONS
   -------------------------------------------------------------------- */
/* Adjacent sections both pay this, so the figure a reader actually sees
   between two content blocks is double it. At the old 108px that came to
   216px, which read as a dropped section rather than a breath. */
.section { padding: clamp(54px, 7vw, 86px) 0; }

.section--alt {
  background: var(--paper-3);
  border-block: 1px solid var(--line);
}

/* A section whose content is a self-contained filled panel does not need the
   full outer padding: the panel already carries its own, and stacking the two
   pays for the same breath twice. */
.section--panel { padding: clamp(34px, 4vw, 52px) 0; }

.section__head { max-width: 62ch; margin-bottom: clamp(34px, 5vw, 52px); }

.section__index {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 14px;
}
.section__index--on-dark { color: rgba(255, 255, 255, .78); }

.section__title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  font-weight: 700;
}

.section__lede {
  margin-top: 16px;
  font-size: 1.05rem;
  color: var(--ink-2);
  max-width: 58ch;
}


/* 9. FILTERS
   -------------------------------------------------------------------- */
.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.filters__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.filters__group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.chip {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.chip:hover { background: var(--paper-3); color: var(--ink); }
.chip.is-active {
  background: linear-gradient(135deg, var(--brand), var(--magenta));
  color: #fff;
}

.filters__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;
}

.cards__empty {
  padding: 48px 0;
  text-align: center;
  color: var(--ink-3);
}


/* 10. PROJECT CARDS
   -------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}

/* One project cuts three 357px tracks at shell width and fills the first,
   leaving two thirds of the section empty beside it. That does not read as a
   short list, it reads as a page with something missing from it. On its own a
   card gets a single column, capped: auto-fit would collapse the empty tracks
   but then stretch the one card across the whole shell and turn it into a
   banner. */
.cards:has(> .card:only-child) {
  grid-template-columns: minmax(0, 560px);
}

/* One card carries a preview of the running app and the other two carry
   prose, so they do not want the same width. In three equal columns the
   preview lands at about 355px and it was built to read at 668: every label
   inside it collapses into grey mush. Two tracks put it back over 700.

   It also breaks the row of three identical columns, which is the most
   generic layout there is and the first thing a design audit calls out. */
@media (min-width: 900px) {
  .card--feature { grid-column: span 2; }
}

/* One project and the panel: two columns and no empty third track. Keyed on
   article:only-of-type, so it holds while there is exactly one card, and the
   moment a second project is added the grid goes back to filling the shell
   without anyone remembering to come back here. */
.cards:has(> article:only-of-type):has(> .cards__note) {
  /* auto-fit, not a hard repeat(2). A fixed two columns held on a phone as
     well, which put a 155px column either side and broke the text into three
     words a line. The minimum is what collapses them to one when there is no
     room. */
  /* 340 rather than 300: at 300 the pair survived down to a 620px shell,
     which is two 316px columns and thirty characters a line. Collapsing to
     one full width column reads better than two starved ones. */
  /* min(340px, 100%), not a bare 340px. A track minimum larger than the
     container does not shrink to fit, it overflows: at 320 the shell is 272
     wide and the row ran 38px past the viewport with a horizontal scrollbar
     to match. The min() caps the minimum at whatever room there actually
     is. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* Two cards at shell width are 370 each, which is too small for the app
   preview to be read at all and leaves the row looking thin. Doubling them
   will not fit two across 1112, so the row breaks wider than the shell
   instead of stacking: the section head stays on the text measure and the
   cards run past it on both sides, which is a deliberate device rather than
   a misalignment.

   100% here is the shell's content box, so the negative margin is whatever
   the row overhangs it by, split evenly. Held back until there is room for
   the full breakout, so it never fights the viewport. */
@media (min-width: 1408px) {
  .cards:has(> article:only-of-type):has(> .cards__note) {
    width: 1360px;
    margin-inline: calc((100% - 1360px) / 2);
  }
}

/* No cap below the breakout, and none needed. auto-fit collapses the tracks
   that have no item in them, so two items always come out as two equal
   columns filling whatever width there is, and fall to one when a 300px
   minimum stops fitting twice. The 760px cap that used to be here was what
   held them at 370. */

/* The panel for the work that cannot be shown. Same geometry as a card so
   the row lines up, and none of its surface so it is never mistaken for one:
   no fill, no shadow, no accent rail, and a dashed edge, which is the
   difference between something absent on purpose and a card that failed to
   render. */
.cards__note {
  /* Positioning context for the spotlight overlay island. .card already had
     one; this did not. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Matches the card's height rather than hugging its own text, but only
     once there is enough copy to carry it: the paragraphs stay tight at the
     top and the link is pushed to the bottom edge, so the box is anchored at
     both ends instead of trailing off. Hugging was right while this held
     three lines. Spreading the paragraphs to fill instead would put seventy
     pixels between each one, which is a different kind of empty. */
  align-self: stretch;
  padding: 26px 24px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.62;
}

/* A 370px column at this size drops single short words onto a line of their
   own, and "is." alone under three full lines reads as a mistake. Browsers
   without it just wrap the way they did before. */
.cards__note p {
  text-wrap: pretty;
}

/* The link sits on the bottom edge, level with the card's own link. */
.cards__note p:last-child {
  margin-top: auto;
  padding-top: 4px;
}

/* A 670px column at .95rem is about 110 characters a line, which is half as
   long again as prose stays comfortable at. The type grows with the column
   so the measure lands near 75 instead. This is scoped to the widened row:
   at the normal card width the smaller size is correct and this never
   applies. */
.cards:has(> article:only-of-type):has(> .cards__note) .cards__note,
.cards:has(> article:only-of-type):has(> .cards__note) .card__desc {
  font-size: clamp(.95rem, .84rem + .3vw, 1.09rem);
  line-height: 1.66;
}

/* Full ink, not the dim one. --ink-3 is the obvious choice for a quiet label
   and gives 4.31:1 on oxide's paper, under the 4.5:1 this size needs. The
   hierarchy comes from the mono face and the tracking instead, which costs
   no contrast. */
.cards__note-eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.cards__note a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 45%, transparent);
}

.cards__note a:hover { text-decoration-color: currentColor; }

.cards__note a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .cards__note { padding: 20px 18px; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 26px 24px 22px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Per-platform accent, consumed by the rail, tag and hover glow. */
.card[data-platform="web"]  { --accent: var(--brand); --accent-ink: var(--brand-ink); }
.card[data-platform="tool"] { --accent: var(--teal);  --accent-ink: var(--teal-ink); }
.card[data-platform="ios"]  { --accent: var(--coral); --accent-ink: var(--coral-ink); }

.card__rail {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, var(--magenta)));
  opacity: var(--rail-alpha);
}

.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-md),
              0 18px 40px color-mix(in srgb, var(--accent) 18%, transparent);
}

.card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.status--live { color: var(--teal-ink); }
.status--live .status__dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Beta sits between shipped and building: steady, not pulsing, because it
   is not serving the public yet. */
.status--beta { color: var(--brand-ink); }
.status--beta .status__dot {
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}

.status--building { color: var(--amber-ink); }
.status--building .status__dot {
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.card__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.011em;
  line-height: 1.26;
}

.card__desc {
  margin-top: 10px;
  font-size: 15.2px;
  line-height: 1.58;
  color: var(--ink-2);
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.stack li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.card__link,
.card__soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  font-weight: 650;
}

.card__link { color: var(--accent-ink); }
.card__link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}
.card:hover .card__link svg { transform: translateX(4px); }

/* Make the whole card clickable without nesting interactive elements. */
.card__link::before { content: ""; position: absolute; inset: 0; }

.card__soon { color: var(--ink-3); font-weight: 600; }

/* Hidden by the filter — display:none keeps it out of the tab order. */
.card[hidden] { display: none; }


/* 11. SERVICES & PROCESS
   -------------------------------------------------------------------- */
/* Deliberately 2×2 rather than auto-fit: four service cards laid out on a
   three-column grid leave a lone orphan on the second row. */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 720px) {
  .services { grid-template-columns: minmax(0, 1fr); }
}

.service {
  position: relative;
  padding: 28px 26px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: var(--shadow-md),
              0 18px 40px color-mix(in srgb, var(--accent) 16%, transparent);
}

.service--brand   { --accent: var(--brand);   --accent-ink: var(--brand-ink); }
.service--magenta { --accent: var(--magenta); --accent-ink: var(--brand-ink); }
.service--coral   { --accent: var(--coral);   --accent-ink: var(--coral-ink); }
.service--teal    { --accent: var(--teal);    --accent-ink: var(--teal-ink); }

.service__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.service__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.011em;
}

.service > p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink-2);
}

.service__list {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.2px;
  color: var(--ink-2);
}
.service__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .8;
}

/* Process ------------------------------------------------------------ */
.process {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(28px, 4vw, 40px);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}



/* 12. PRINCIPLES
   -------------------------------------------------------------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}

.principle {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.principle--brand { --accent: var(--brand); --accent-ink: var(--brand-ink); }
.principle--coral { --accent: var(--coral); --accent-ink: var(--coral-ink); }
.principle--teal  { --accent: var(--teal);  --accent-ink: var(--teal-ink); }
.principle--amber { --accent: var(--amber); --accent-ink: var(--amber-ink); }

.principle__num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.principle h3 {
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -.011em;
}

.principle p {
  margin-top: 9px;
  font-size: 14.8px;
  line-height: 1.6;
  color: var(--ink-2);
}


/* 13. CONTACT CTA & ENQUIRY FORM
   -------------------------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px) clamp(26px, 5vw, 64px);
  background: #12131b;
  box-shadow: var(--shadow-lg);
}

.cta__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .85;
  background:
    radial-gradient(60% 90% at 8% 8%,  color-mix(in srgb, var(--brand) 92%, transparent), transparent 62%),
    radial-gradient(55% 85% at 92% 18%, color-mix(in srgb, var(--magenta) 78%, transparent), transparent 60%),
    radial-gradient(60% 80% at 72% 96%, color-mix(in srgb, var(--coral) 70%, transparent), transparent 62%),
    radial-gradient(45% 65% at 30% 92%, color-mix(in srgb, var(--teal) 55%, transparent), transparent 62%);
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr); }
}

.cta__content { max-width: 46ch; }

.cta__title {
  font-size: clamp(1.78rem, 4.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  font-weight: 700;
  color: #fff;
}

.cta__lede {
  margin-top: 16px;
  font-size: 1.04rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.cta__note {
  min-height: 1.4em;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .8);
}


/* Enquiry form -------------------------------------------------------
   Sits on the dark CTA panel, so its colours are fixed rather than
   token-driven — it must stay legible in both themes.
   -------------------------------------------------------------------- */
.inquiry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(22px, 3vw, 28px);
  background: rgba(12, 13, 20, .34);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 520px) {
  .inquiry { grid-template-columns: minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.field__opt { text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .5); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.field textarea { resize: vertical; min-height: 104px; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, .45); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, .36); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

/* Only flag an invalid field once the visitor has actually engaged with it. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #ff9b80; }

/* The native dropdown list is rendered by the OS, so its options need
   readable colours independent of the translucent control. */
.field select { appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
}
.field select option { color: #14161d; background: #fff; }

/* Honeypot — removed from view without being removed from the DOM. */
.field--trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inquiry__foot {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2px;
}

.inquiry__status {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  flex: 1 1 180px;
}
.inquiry__status[data-state="error"] { color: #ffb9a6; }


/* 13b. THE CIPHER AS ORNAMENT
   ------------------------------------------------------------------------
   The four initials are N W P C, written in the pigpen cipher and read
   clockwise from the bottom left. They are used here to occupy space the
   copy does not need, on the argument that a mark meaning something beats
   a texture meaning nothing.

   Two rules govern every appearance:

     1. Never below about 96px overall. The dot is what separates the first
        nine letters from the second nine, so at small sizes the glyphs stop
        being a cipher and become specks. This is why the header wordmark
        carries the bare mark instead of the seal.
     2. Always aria-hidden and never load-bearing. The page must read
        identically with all of it removed.
   -------------------------------------------------------------------- */

/* The hero seal: a lit object on a tilting stage.

   Three layers share one 3D space. The face is the tile. The initials are cut
   into it, drawn twice with opposed offsets so the light side and the shadow
   side of each incision fall where a single light source would put them. The
   mark stands 22px off the face, which is what produces the parallax when the
   assembly tilts: the layers genuinely move against each other rather than a
   flat image being sheared.

   Angles and light position arrive as custom properties from script. Their
   defaults here are the whole no-JS story: a still object, lit from the upper
   left, which is where it also returns when the pointer leaves.
   -------------------------------------------------------------------- */
/* Anchored to the bottom of the hero content, not its middle. Centred, a seal
   this size runs into the first line of the headline at every width from 1100
   up, by 104px at 1440. Sitting it on the baseline of the buttons puts it
   beside the lede and the actions, which are the short lines, and leaves the
   headline the full measure it was tuned for. */
.seal3d {
  position: absolute;
  /* Pulled in from the content edge and dropped below the hero, so it sits
     across the join instead of tucked into a corner. Straddling the boundary
     is what buys the room to keep it at narrower widths: it no longer has to
     fit beside the copy, only beside the end of it. */
  /* Placed as a fraction of the shell rather than an offset from the right
     edge, so it keeps the same relationship to the centre line at every
     width instead of drifting outward as the page grows. 56% puts its left
     edge just past centre and its mass clearly right of it. */
  left: 56%;
  bottom: calc(-1 * clamp(104px, 13.5vw, 176px));
  width: clamp(186px, 15.5vw, 212px);
  aspect-ratio: 1;
  perspective: 900px;
  pointer-events: none;

  --rx: 0deg;      /* pitch, from pointer y */
  --ry: 0deg;      /* yaw, from pointer x */
  --gx: 32%;       /* glare centre */
  --gy: 24%;
  --lift: 0;       /* 0 at rest, 1 with the pointer on it */
}

.seal3d__tile {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* Skip the easing while the pointer is driving it, or the tilt lags the
   cursor by half a second and feels like syrup. The transition is only there
   to carry it home afterwards. */
.seal3d.is-live .seal3d__tile { transition: none; }

.seal3d__face,
.seal3d__glyphs,
.seal3d__mark,
.seal3d__glare {
  position: absolute;
  inset: 0;
  border-radius: 22%;
}

.seal3d__face {
  background: var(--seal-tile);
  /* Tinted by the world's own tile rather than a fixed indigo, or a rust
     seal casts a purple glow. */
  box-shadow:
    0 30px 60px -20px color-mix(in srgb, var(--seal-t1) 55%, transparent),
    0 8px 20px -8px rgba(16, 18, 25, .35),
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 6px rgba(16, 18, 25, .3);
}

/* The initials sit closer to the face than the mark does. The gap is small
   on purpose: enough that they part company when the seal turns, not so much
   that they read as a second floating object. */
.seal3d__glyphs {
  transform: translateZ(9px);
  filter: drop-shadow(0 4px 6px rgba(16, 18, 25, .38));
}

.seal3d__mark {
  transform: translateZ(35px);
  filter:
    drop-shadow(0 10px 14px rgba(16, 18, 25, .42))
    drop-shadow(0 2px 3px rgba(16, 18, 25, .3));
}

/* Specular highlight. Follows the pointer, and only reaches full strength
   while the pointer is actually over the seal. */
.seal3d__glare {
  transform: translateZ(24px);
  background:
    radial-gradient(60% 60% at var(--gx) var(--gy),
      rgba(255, 255, 255, .85) 0%,
      rgba(255, 255, 255, .28) 32%,
      rgba(255, 255, 255, 0) 68%);
  mix-blend-mode: soft-light;
  opacity: calc(.5 + .5 * var(--lift));
}

/* No room for it once the hero copy takes the full width, and no pointer to
   drive it on a touch screen anyway. */
/* The seal hangs into the top of the work section, so that section carries a
   little more headroom than the others. Applied only where the seal is
   actually shown. */
@media (min-width: 940px) {
  #work { padding-top: clamp(96px, 9vw, 132px); }
}

/* It survives further down now that it sits past the copy rather than beside
   it. Below this the hero text needs the full measure. */
@media (max-width: 939px) {
  .seal3d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seal3d__tile { transition: none; transform: none; }
}


/* The ambient field. Fixed to the viewport rather than to the document, so
   the letters wash across whatever section happens to be in front of the
   reader instead of scrolling past as a fixed pattern.

   It sits above the section backgrounds, which is the only way to be visible
   over the tinted and dark panels, and therefore also above body text. The
   alpha is set low enough that it costs no contrast: at 6% ink on paper the
   letters read as something in the stock rather than something on it. */
.cipher-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;

  /* White ink in difference mode rather than --ink at low alpha. Ink would
     vanish against the dark contact panel, which is precisely the section
     with the most empty space to fill. Difference darkens the paper and
     lightens the panel by the same amount, so one layer reads everywhere
     without a per-section override. */
  color: #fff;
  mix-blend-mode: difference;
  opacity: .07;
}

[data-theme="dark"] .cipher-field { opacity: .09; }

/* The header already sets z-index 100 and so paints over the field. Its
   background is only 82% opaque, which leaves letters passing behind the
   navigation softened by the backdrop blur rather than cut off at its edge. */

/* The seal beside the AI statement: the mark and all four initials together,
   at a size where the cipher is legible to anyone who cares to look. */
.statement__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}

.statement__seal {
  justify-self: end;
  width: clamp(190px, 22vw, 300px);
  color: var(--ink);
  opacity: .16;
}

.statement__seal svg { width: 100%; height: auto; }
.seal__mark   { fill: currentColor; }
.seal__glyphs { stroke: currentColor; }
.seal__dots   { fill: currentColor; }

/* The initials alone, in the process section, holding the same corners they
   hold on the seal. Lighter than the seal because it sits on tinted ground
   and has to compete with a border-topped list below it. */
.cipher-quad {
  justify-self: end;
  align-self: center;
  width: clamp(150px, 17vw, 220px);
  color: var(--ink);
  opacity: .13;
}
.cipher-quad svg { width: 100%; height: auto; stroke: currentColor; }
.cipher-quad .dot { fill: currentColor; stroke: none; }

/* Signing the footer. Kept to the ink-3 grey the legal line uses so it reads
   as part of that block rather than as a fifth navigation item. */
.footer-cipher {
  width: 132px;
  margin-top: 22px;
  color: var(--ink-3);
  opacity: .62;
}
.footer-cipher svg { width: 100%; height: auto; stroke: currentColor; }
.footer-cipher .dot { fill: currentColor; stroke: none; }

.process__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
/* The builds list is the full width of the section, under both columns. */
.process__layout .builds { grid-column: 1 / -1; }

/* Below the two-column threshold the ornament is the first thing to go: it
   is decoration, and a phone has no space to spend on it. */
@media (max-width: 860px) {
  .statement__layout,
  .process__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .statement__seal,
  .cipher-quad { display: none; }
}


/* 14. FOOTER
   -------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 52px 0 40px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

/* --ink-2, not --ink-3. Measured: --ink-3 on oxide's paper gives 4.31:1,
   under the 4.5:1 that 13.5px needs, and this is the line that carries the
   company's legal name. The same colour has failed the same way twice before
   on this site, on the landing page link and on the not-shown eyebrow. Dark
   passes at 5.35:1; light is the one that does not. */
.site-footer__legal {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 34ch;
}

.site-footer__nav {
  display: flex;
  gap: 56px;
}
.site-footer__nav > div { display: flex; flex-direction: column; gap: 9px; }

.site-footer__nav h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.site-footer__nav a {
  font-size: 14.5px;
  color: var(--ink-2);
  transition: color .16s ease;
  width: fit-content;
}
.site-footer__nav a:hover { color: var(--brand-ink); }

@media (max-width: 560px) {
  .site-footer__nav { gap: 36px; }
}


/* 15. MOTION & REVEAL
   -------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, .8, .3, 1),
              transform .55s cubic-bezier(.22, .8, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .principle:hover { transform: none; }
}


/* 16. PRODUCT SHOWCASES
   ------------------------------------------------------------------------
   Illustrative device mockups inside the project cards. Everything is drawn
   in CSS — no screenshots, no images, no requests — so the previews stay
   crisp at any pixel density and cost nothing to load.

   Scaling is done with container query units: the stage sets a container,
   and each mockup's root font-size is a fraction of the container's width.
   All internal sizes are then in em, so the whole mockup scales with the
   card without a single line of JavaScript.

   Palettes are the products' own, taken from their live theme-color and
   tag colours rather than invented.
   -------------------------------------------------------------------- */
.showcase {
  position: relative;
  z-index: 2;               /* above .card__link's full-card overlay */
  margin: -26px -24px 20px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.showcase__stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}

/* Screens stack; only the active one is shown. */
.scr {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.scr.is-on { opacity: 1; visibility: visible; }

.showcase__dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 3;
}
.showcase__dots button {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .38);
  transition: background-color .2s ease, transform .2s ease;
}
.showcase__dots button:hover { transform: scaleY(1.6); }
.showcase__dots button[aria-pressed="true"] { background: rgba(255, 255, 255, .95); }


/* ── Product screens ───────────────────────────────────────────────────
   These were three hundred and ninety lines of CSS drawing an approximation
   of modulate's interface: a rail, a toggle, coloured chips, a composer. It
   was wrong in ways only somebody who used the product could see, and the
   fix for that is not more CSS. It is a screenshot.

   Each product's own repository now captures its real screens against a
   seeded demo database, at 1440x990 and deviceScaleFactor 2, downscaled to
   1600x1100. That is 16:11, which is exactly the ratio .showcase__stage
   holds, so nothing is cropped or letterboxed.
   -------------------------------------------------------------------- */

/* The stage is dark for a dark app and paper for a light one, so the
   letterbox around a screen never fights the screen inside it. */
.showcase--mod .showcase__stage { background: #0b100e; }
.showcase--oven .showcase__stage { background: #fdf1e7; }
.showcase--graze .showcase__stage { background: #f0f6f3; }

.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The captures start at the very top left of the app, so the interesting
     half is the top. Cover from the top rather than the centre. */
  object-position: top center;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scr { transition: none; }
}

/* 17. WHAT GETS BUILT, AND THE STATEMENT
   ------------------------------------------------------------------------
   Both blocks replace card grids that said more and meant less. The build
   list is four lines where there were four cards and twelve bullets; the
   statement is one argument where there were four interchangeable virtues.
   -------------------------------------------------------------------- */
/* Deliberately 2x2: four items on an auto-fit grid wrap 3 + 1 and leave an
   orphan on the second row. */
.builds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  margin-bottom: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--line);
}
/* That margin separates the list from whatever follows it. When the list is
   the last thing in the section it would stack on the section padding and
   read as a hole, so it only applies when there is something to separate. */
.builds:last-child { margin-bottom: 0; }
.builds li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
  color: var(--ink);
}
.builds li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
  transform: translateY(-2px);
}
.builds li:nth-child(2)::before { background: var(--magenta); }
.builds li:nth-child(3)::before { background: var(--coral); }
.builds li:nth-child(4)::before { background: var(--teal); }

@media (max-width: 640px) {
  .builds { grid-template-columns: minmax(0, 1fr); }
}

/* Statement ---------------------------------------------------------- */
/* Left edge sits on the shell, same as every other section index and title.
   This was centred, which put it 241px inboard of 01 and 02 and made the
   page look like it changed its mind two thirds of the way down. */
.statement {
  max-width: 34em;
  margin-inline: 0;
  text-align: left;
}
.statement > p + p { margin-top: 1.15em; }
.statement p {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.58;
  color: var(--ink-2);
}
.statement .section__index { margin-bottom: 30px; }

.statement__lead {
  color: var(--ink) !important;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem) !important;
  line-height: 1.34 !important;
  letter-spacing: -.014em;
}

/* The pivot of the whole argument, so it gets a line to itself. */
.statement__turn {
  color: var(--ink) !important;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  padding-left: 1em;
  border-left: 2px solid var(--brand);
}

.statement__close {
  margin-top: 1.6em !important;
  padding-top: 1.3em;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
  font-weight: 700;
  letter-spacing: -.012em;
}
.statement__close span {
  display: block;
  font-weight: 400;
  font-style: italic;
  color: var(--brand-ink);
}


/* 18. WORLD PICKER
   ------------------------------------------------------------------------
   Only ever in the document when ?admin=1 has been used. Deliberately plain:
   it is a tool, not part of the design, and dressing it up would make it
   easy to mistake for one.
   -------------------------------------------------------------------- */
.worldbar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-md);
}

.worldbar button {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--ink-2);
  white-space: nowrap;
}

.worldbar button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--paper-2);
}


/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES

   One column of prose, set narrower than the site's shell. The rest of the
   site reads in blocks; this reads in lines, and a line of body text past
   about 70 characters is where the eye starts losing its place on the return
   sweep.

   Everything is scoped under .legal so none of it can reach the front page.

   The base type rule is wrapped in :where() on purpose. Written plainly,
   `.legal p` is one class and one type, which outranks a bare modifier class
   like .legal__date, and every classed paragraph on the page silently came
   back at body size with its own font-size ignored. :where() contributes
   nothing to specificity, so the base sets the default and any class beats
   it, whatever order they land in.
   ══════════════════════════════════════════════════════════════════════ */

.legal {
  padding: clamp(48px, 8vw, 104px) 0 clamp(64px, 9vw, 120px);
}

.legal__shell {
  max-width: 68ch;
}

/* The default for running text. Deliberately weak: see the note above. */
.legal :where(p, li) {
  margin-top: 15px;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}

.legal :where(ul) {
  margin-top: 6px;
  padding-left: 1.1em;
  list-style: disc;
}

.legal :where(li) { margin-top: 9px; }
.legal li::marker { color: var(--ink-3); }

.legal h1 {
  margin-top: 14px;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.026em;
  font-weight: 700;
}

.legal h2 {
  margin-top: 52px;
  font-size: clamp(1.32rem, 2.4vw, 1.62rem);
  line-height: 1.2;
  letter-spacing: -.016em;
  font-weight: 700;
}

.legal h3 {
  margin-top: 34px;
  font-size: clamp(1.04rem, 1.7vw, 1.16rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
}

.legal__eyebrow {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.legal__date {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: .92rem;
  color: var(--ink-2);
}

/* The whole policy in four sentences, for the large majority of readers who
   will not read the rest. It is the honest summary of what follows, not a
   teaser for it: if the two ever disagree, the summary is the bug. */
.legal__summary {
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.legal__summary-head {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal__summary p:last-child {
  margin-top: 0;
  line-height: 1.66;
}

.legal a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

.legal a:hover { text-decoration-thickness: 2px; }

.legal code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: .1em .38em;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink);
}

/* The studio's own details and the governing-law line, in the darker ink:
   these are the page's assertions about itself rather than explanation, and
   a reviewer scanning for them should not have to hunt. */
.legal__address {
  color: var(--ink);
  line-height: 1.75;
}

.legal__law {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .94rem;
  color: var(--ink);
}

/* The sentence the carriers require, verbatim. Called out because a 10DLC
   reviewer is looking for exactly this string, and because a promise buried
   mid-paragraph is a promise nobody read. */
.legal__flag {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 600;
}

/* Tables scroll inside themselves rather than pushing the page sideways. The
   processor table is three columns and will not fit a narrow phone at a
   readable size, and a document that scrolls horizontally is worse than a
   table that does. */
.legal__table {
  display: block;
  overflow-x: auto;
  margin-top: 18px;
  border-collapse: collapse;
  width: 100%;
  font-size: .96rem;
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 18px 11px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}

.legal__table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.legal__table td { color: var(--ink-2); }
.legal__table tbody tr:last-child td { border-bottom: 0; }

/* Sits directly under the copyright line and belongs to it, so it takes the
   same ink and size and only the top margin changes. */
.site-footer__where {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: -.011em;
  color: var(--ink-2);
}


/* ══════════════════════════════════════════════════════════════════════
   PRESSED STATES

   The site had exactly one: .btn, where hover lifts the control and :active
   puts it back down, so a click reads as the thing physically returning to
   the page. Everything else that can be pressed was doing the first half and
   not the second. Twenty-one hover rules against a single active rule, which
   means most of the interface acknowledged the pointer arriving and then
   went silent when it was actually used.

   The same idiom throughout rather than a new one. Anything that lifts comes
   back down; anything that only changes colour deepens it. Deliberately no
   scale(0.98): a chip that shrinks next to a chip that does not is two
   languages in one toolbar, and the audit's suggestion is a default, not an
   instruction.
   ══════════════════════════════════════════════════════════════════════ */

/* Lifts on hover, so it lands on press. Same two lines as .btn. */
.theme-toggle:active { transform: translateY(0); }

/* Colour only, so the press is the next step down the same ramp: paper-3 on
   hover, the softer line colour under the finger. */
.chip:active { background: var(--line-soft); }
.site-nav a:active { background: var(--line-soft); }

/* The dot grows to 1.6 on hover. Coming back to 1.2 rather than to 1 keeps it
   clearly the hovered dot while reading as pressed. */
.showcase__dots button:active { transform: scaleY(1.2); }

/* The one filled control in the header. Hover raises a shadow under it;
   pressing drops the element into the space the shadow was holding. */
.site-nav__cta:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Text links have nothing to lift and nothing to fill, so the press is the
   ink going one step darker. --accent-ink measures 6.31:1 light and 8.39:1
   dark, so the pressed state is not the illegible one. */
.site-footer__nav a:active,
.cards__note a:active,
.legal a:active {
  color: var(--accent-ink);
}

.wordmark:active { opacity: .82; }


/* ── SMS consent row ───────────────────────────────────────────────────
   The one field in this form that is a checkbox, so it does not want the
   stacked label-over-input shape the rest of .field uses. Box on the left,
   the disclosure beside it, both aligned on the first line of text rather
   than on the box's centre: the label runs to three lines and centring it
   would float the box halfway down the paragraph.
   -------------------------------------------------------------------- */
.field--consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.field--consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* This sits on the dark contact panel, so it takes the same on-dark ink the
   other labels there use, not --ink-2. --ink-2 is ink for paper and measured
   1.87:1 here, which is not a contrast failure so much as an invisible
   paragraph. At .82 alpha it reads 9.1:1. */
.field--consent label {
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
}

.field--consent label a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.field--consent label a:hover { text-decoration-thickness: 2px; }