@affinda/wc 0.0.28 → 0.2.0

package/dist/collection/components/af-feature-card/af-feature-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-feature-card.js","sourceRoot":"","sources":["../../../src/components/af-feature-card/af-feature-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE;;;WAGG;QACK,UAAK,GAAsE,YAAY,CAAC;QAEhG;;;;WAIG;QACK,WAAM,GAA8B,UAAU,CAAC;QAEvD;;;;;WAKG;QACsB,aAAQ,GAAqC,SAAS,CAAC;QAEhF;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAO3C;;;;WAIG;QACK,aAAQ,GAAW,EAAE,CAAC;KAkF/B;IAhFC,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,YAAY,CAAC;QAEjD,MAAM,cAAc,GAAG;YACrB,cAAc,EAAE,IAAI;YACpB,CAAC,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;YAC7C,CAAC,sBAAsB,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC9C,CAAC;QAEF,iDAAiD;QACjD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAE,cAAc;oBAEvB,QAAQ,IAAI,CACX,WAAK,KAAK,EAAC,0BAA0B;wBACnC,WACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,gCAAgC,GACtC,CACE,CACP;oBAGD,WAAK,KAAK,EAAC,uBAAuB;wBAChC,4BACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU;4BAE1B,eAAa;4BACb,YAAM,IAAI,EAAC,aAAa;gCACtB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CACnB,CACF,CACD,CACR,CAAC;QACJ,CAAC;QAED,iDAAiD;QACjD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC;QAEhD,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,cAAc;gBACxB,eAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU;oBAE7C,WAAK,KAAK,EAAC,uBAAuB;wBAChC,4BACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU;4BAE1B,eAAa;4BACb,YAAM,IAAI,EAAC,aAAa;gCACtB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CACnB;oBAGL,QAAQ,IAAI,CACX,WAAK,KAAK,EAAC,0BAA0B;wBACnC,WACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,GAC3B,CACE,CACP,CACO,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-feature-card.js","sourceRoot":"","sources":["../../../src/components/af-feature-card/af-feature-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE;;;WAGG;QACK,UAAK,GAAW,YAAY,CAAC;QAErC;;;;WAIG;QACK,WAAM,GAA8B,UAAU,CAAC;QAEvD;;;;;WAKG;QACsB,aAAQ,GAAqC,SAAS,CAAC;QAEhF;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAO3C;;;;WAIG;QACK,aAAQ,GAAW,EAAE,CAAC;KAkF/B;IAhFC,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,YAAY,CAAC;QAEjD,MAAM,cAAc,GAAG;YACrB,cAAc,EAAE,IAAI;YACpB,CAAC,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;YAC7C,CAAC,sBAAsB,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAC9C,CAAC;QAEF,iDAAiD;QACjD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CACL,EAAC,IAAI;gBACH,WAAK,KAAK,EAAE,cAAc;oBAEvB,QAAQ,IAAI,CACX,WAAK,KAAK,EAAC,0BAA0B;wBACnC,WACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,gCAAgC,GACtC,CACE,CACP;oBAGD,WAAK,KAAK,EAAC,uBAAuB;wBAChC,4BACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU;4BAE1B,eAAa;4BACb,YAAM,IAAI,EAAC,aAAa;gCACtB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CACnB,CACF,CACD,CACR,CAAC;QACJ,CAAC;QAED,iDAAiD;QACjD,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC;QAEhD,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,cAAc;gBACxB,eAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU;oBAE7C,WAAK,KAAK,EAAC,uBAAuB;wBAChC,4BACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU;4BAE1B,eAAa;4BACb,YAAM,IAAI,EAAC,aAAa;gCACtB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CACnB;oBAGL,QAAQ,IAAI,CACX,WAAK,KAAK,EAAC,0BAA0B;wBACnC,WACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,GAC3B,CACE,CACP,CACO,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: Theme = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-feature-grid/af-feature-grid.js

@@ -82,7 +82,7 @@ export class AfFeatureGrid {
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (h(Host, { key: 'eb0a98e3493d564f6728613ef1c0b949dcbe7816' }, h("div", { key: 'c91f2fa779d050d9e9419eff301ba8fd80242bc0', class: gridClasses }, h("div", { key: '82989034a3f94cad6747429a1587c3ada160571f', class: "feature-grid__cards" }, h("slot", { key: '9ba0222a8ca2455fd83fbb054e1e4fc2c6f4e598' })), showProgressLine && (h("div", { key: '9c510e8f5366762546829210f5ec1f50788b4ecf', class: "feature-grid__progress" }, h("af-progress-line", { key: '584cd3da69b1b219743338bd6deb0a2c1bbab6b9', progress: this.scrollProgress }))))));
+        return (h(Host, { key: '9aacf2968c1723a036ab7583b052f56d7673543f' }, h("div", { key: 'c965c986ee73a4913e45406b461824927a541331', class: gridClasses }, h("div", { key: '177edb18e1342d60eda11adad85dad87a6c002c3', class: "feature-grid__cards" }, h("slot", { key: 'e0f15eba0bd58263f7a33474f34093785158f03d' })), showProgressLine && (h("div", { key: 'b952584d6b23121bfb820ebdcc1a526a34597f67', class: "feature-grid__progress" }, h("af-progress-line", { key: '97b4ac99e10078b6345a5567a6603290b8467af5', progress: this.scrollProgress }))))));
     }
     static get is() { return "af-feature-grid"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-footer/af-footer.css

@@ -178,11 +178,14 @@
 }
 
 .footer__status-dot--operational {
-  background-color: #22c55e;
+  /* Affinda-palette green — tuned to sit comfortably against the inkwell
+   * footer backdrop without the candy-bright Tailwind default. */
+  background-color: var(--status-ok, #3E8F6E);
 }
 
 .footer__status-dot--issue {
-  background-color: #ef4444;
+  /* Affinda-palette red — darkened toward soft-clay to match brand tone. */
+  background-color: var(--status-issue, #B94A3B);
 }
 
 .footer__status-text {

package/dist/collection/components/af-footer/af-footer.js

@@ -18,7 +18,7 @@ export class AfFooter {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: 'b0fceb1896656d8a17b3afda396dd74a9181668e' }, h("footer", { key: '6b48abc3e62d21f96fb3c4aa84b2eedd292e3386', class: "footer" }, h("div", { key: 'ba192ee7d600ddce8e1c2fcc5631259c5eff89db', class: "footer__container" }, h("div", { key: 'f7fa42a5d13aacf16bd49ab2a3257b80156383dd', class: "footer__top" }, h("div", { key: '25c7452fbba9a33805fa419e1d91da04c97e3843', class: "footer__brand" }, h("div", { key: 'd3e0c2b52ce7e6a1f399c13ed9d6f1a1c75d5c35', class: "footer__brand-card" }, h("div", { key: '197934823ea93f20575e3f737c777bd3fe6bdec9', class: "footer__logo" }, h("slot", { key: 'f2b8ab9d513704d6c5e3c2e78cd73a264e78225a', name: "logo" })), h("div", { key: 'c00e0d6bad4a5c99e6e39dab101b77c2fae36495', class: "footer__social" }, h("slot", { key: 'de662f1f8e9deb052eb79aed4a05a98c2d9f65aa', name: "social" }))), h("div", { key: '3c678879008647c05a60803ca7a067c4e4e61746', class: "footer__contact-card" }, h("slot", { key: '58071ccf22c23b1ef5341505dcf1d0ba57357512', name: "contact" }))), h("div", { key: '1eed42db812f2dce3aa935ab5ac1096625848ae6', class: "footer__nav" }, h("div", { key: '50aef430fdb85c2087dd2e2d87ad8cf1d16c7c8b', class: "footer__nav-columns" }, h("slot", { key: 'b900525b63c6072707a5b0d35f72237d1b2fe6a9', name: "nav" })), this.showStatus && (h("div", { key: 'fe957d27c0cbaf5a4e2627c3f37de884a87d09d7', class: "footer__status" }, h("span", { key: 'c123f1e69a1b8958eefede7510ae65395c58d948', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '9524fa81546c3755e0f28d1f335915dfadf0c08a', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'adac84ed1240b1587ad4dd730813243009bb55b7', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'e662a65603a58375ecda64c12f60936ef4bf7535', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '88688f225266e295d4f97ed64fdfe1a67a26561a', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '9e37465b342340a36b309f2da9b5a0d68d5d3bec', class: "footer__legal" }, h("slot", { key: 'c4f6763e9affaf59c7740a78e738938ab25576d0', name: "legal" })), h("div", { key: 'ccdd834682869e69d9c09d2b8f1a6cb3648b671b', class: "footer__badges" }, h("slot", { key: 'cd10ff8b4e90f9a38270b5ed5d7884cea7f241a2', name: "badges" })))))));
+        return (h(Host, { key: '0f0b3ac453f4bf2f17d0185484c312aae99d4f5e' }, h("footer", { key: '017d608cb00c9fb3da012fe9941e80cd9d5135e8', class: "footer" }, h("div", { key: '545a499bd2b75a1efea1efe1659e336753bcce46', class: "footer__container" }, h("div", { key: '66ed8e54b1af9445e15cb4e650d54a240f158c8c', class: "footer__top" }, h("div", { key: 'b4b442dbcaf2e52aae6c76706ecff5aa928bf2f5', class: "footer__brand" }, h("div", { key: '73ad4e70efa91fe96c6de0b80f270c470c73c8e4', class: "footer__brand-card" }, h("div", { key: '0ef27728bb86632b9451ed94220528f527ba62bb', class: "footer__logo" }, h("slot", { key: '5f6de1e2b9f7e9523ce49414ec1bf88a8411478b', name: "logo" })), h("div", { key: 'fdc742da1adce4e0a874c2ee1998e051aea5f10a', class: "footer__social" }, h("slot", { key: '3073881efc66cf692b3d986e11798587cba6f272', name: "social" }))), h("div", { key: '5fe296475d338597af763acb3957a406b5fdf887', class: "footer__contact-card" }, h("slot", { key: '38be1a96c41c246fba05b7ec080b50330ab43f22', name: "contact" }))), h("div", { key: 'e12c9774d5d4806728b375386a0491ed2e7a1d74', class: "footer__nav" }, h("div", { key: '6c5e293d11a87f48add7799c86fe5ff14618094c', class: "footer__nav-columns" }, h("slot", { key: '5d189a739cbdb1b989eb77008aac4b3f91be4940', name: "nav" })), this.showStatus && (h("div", { key: '29f8108dfd88e8f83f75dc765870621055bb952a', class: "footer__status" }, h("span", { key: '4e61880dc288cfc19fbef5a91fdc5295512d725a', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: 'dd1055516d076ac8a814e7b60bedf6989341225c', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '7ddb72ef4df731dcadc479a6ecbe059b1ca569cb', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'c5acf298a42067cad20c914350e6f89b98e16162', class: "footer__bottom" }, this.copyrightText && (h("p", { key: 'ed923670ea3258db98b0eb7a5e197e87b5f45784', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '7a71bf0cf0f44bb38c4c696fd151ecbea2d3de1b', class: "footer__legal" }, h("slot", { key: 'afef7ce942c8fe362fb83d03438604378b4ac8f7', name: "legal" })), h("div", { key: 'b8940476d2cae97bc70916f4252e2a3337da37b8', class: "footer__badges" }, h("slot", { key: '3b076b800f2771237ea8f7fc2f1cc2c46c2e4ccc', name: "badges" })))))));
     }
     static get is() { return "af-footer"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-footer-column/af-footer-column.js

@@ -9,7 +9,7 @@ export class AfFooterColumn {
         this.heading = '';
     }
     render() {
-        return (h(Host, { key: 'aff327dcb95b40e2835062053b7e59ee38d1e251' }, h("div", { key: '1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426', class: "footer-column" }, this.heading && (h("h5", { key: 'ef2532c50e755acb21f786edfbc23ade0097e385', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'c96d5cda9bef99805eb17af7689a294adf80e33b', class: "footer-column__list" }, h("slot", { key: '5efdffcd7fc885e71a9460bc21a2d40bf486c14d' })))));
+        return (h(Host, { key: '02afc8f33ad0417467d4e795e77a1da74c7ede57' }, h("div", { key: 'f24cbe4720cf6e5df7351e9fe8cec05cca8753b0', class: "footer-column" }, this.heading && (h("h5", { key: '1f615da8d2c755dd0ab5a9679275538d4bb5945e', class: "footer-column__heading" }, this.heading)), h("ul", { key: '0ecdc874412334c418e049dcb0fff738cfdaa52b', class: "footer-column__list" }, h("slot", { key: '148b478bbd04204b3467329f98171a538b22d650' })))));
     }
     static get is() { return "af-footer-column"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-footer-link/af-footer-link.js

@@ -11,7 +11,7 @@ export class AfFooterLink {
         this.external = false;
     }
     render() {
-        return (h(Host, { key: '6a353087c08983e0e8a962ba97a2d1fa0afd1003' }, h("li", { key: '746175585030c809e05bd697a518f0ae0bc93d89' }, h("a", { key: '5409787ffbcd34661bbcd643fe68ba2e8354d127', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '506e4056466d3764b4a2a55927932ad5fe5ea0ba' }), this.external && (h("svg", { key: '93e6405e6252095281d63cfbcf1548af54582c24', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '72370b0a31dccb15f92bf8fa67fa868e2f0f33ee', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: 'f6c6f0433dc6bcffe507c33c0dec2590a7b167c6' }, h("li", { key: 'c2e69faa620fe59b1cec6e5c32ed37d3a34d9fb7' }, h("a", { key: '35330c42625be987164190b40d1ed1649a259a7f', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '43940df1b20b76d4f9dbec8a94ec39cd56080af3' }), this.external && (h("svg", { key: '7a3e086ead102abed43ed7e765d3012c5e963306', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'e3c266072bca65c154cf925fadc4beb59dfe8f86', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "af-footer-link"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-grid/af-grid.js

@@ -28,14 +28,14 @@ export class AfGrid {
             end: 'end',
             stretch: 'stretch',
         };
-        return (h(Host, { key: 'bcc57cad4861ded2353d7668fa76281f327efac8', style: {
+        return (h(Host, { key: '440c50dbd3a572f292b6a5b4b31845a70b5871bf', style: {
                 '--grid-columns': String(this.columns),
                 '--grid-columns-lg': String(this.columnsLg ?? this.columns),
                 '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),
                 '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),
                 '--grid-gap': `var(--space-${this.gap})`,
                 '--grid-align': alignMap[this.align],
-            } }, h("div", { key: 'e4aaf0f25478b42470f24b7eb831f6598be15423', class: "grid" }, h("slot", { key: 'bc40be3d30c45c2af348bb67804c25f29d606895' }))));
+            } }, h("div", { key: '76ddac9b00743e64fa4e49e9fa80d02088dc858c', class: "grid" }, h("slot", { key: 'ac6ce8acf4e1ca3acabff3176b06a57eee265b72' }))));
     }
     static get is() { return "af-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -156,8 +156,9 @@ export class AfGrid {
                     "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\"",
                     "references": {
                         "Gap": {
-                            "location": "global",
-                            "id": "global::Gap"
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Gap"
                         }
                     }
                 },

package/dist/collection/components/af-grid/af-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-grid.js","sourceRoot":"","sources":["../../../src/components/af-grid/af-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;GAKG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME;;WAEG;QACK,YAAO,GAAY,CAAC,CAAC;QAiB7B;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,SAAS,CAAC;KA2BlC;IAzBC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;gBAC3D,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;gBAC7E,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;gBACpF,YAAY,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;gBACxC,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;aACX;YAE3B,4DAAK,KAAK,EAAC,MAAM;gBACf,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 12;\ntype Align = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Generic CSS Grid component for flexible column layouts.\n * Supports responsive column counts at different breakpoints.\n *\n * @slot - Grid items\n */\n@Component({\n  tag: 'af-grid',\n  styleUrl: 'af-grid.css',\n  shadow: true,\n})\nexport class AfGrid {\n  /**\n   * Number of columns at the default (largest) breakpoint.\n   */\n  @Prop() columns: Columns = 3;\n\n  /**\n   * Number of columns at the large breakpoint (1024px and below).\n   */\n  @Prop() columnsLg?: Columns;\n\n  /**\n   * Number of columns at the medium breakpoint (768px and below).\n   */\n  @Prop() columnsMd?: Columns;\n\n  /**\n   * Number of columns at the small breakpoint (375px and below).\n   */\n  @Prop() columnsSm?: Columns;\n\n  /**\n   * Gap between grid items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '4';\n\n  /**\n   * Align items within their grid cells.\n   */\n  @Prop() align: Align = 'stretch';\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'start',\n      center: 'center',\n      end: 'end',\n      stretch: 'stretch',\n    };\n\n    return (\n      <Host\n        style={{\n          '--grid-columns': String(this.columns),\n          '--grid-columns-lg': String(this.columnsLg ?? this.columns),\n          '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),\n          '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),\n          '--grid-gap': `var(--space-${this.gap})`,\n          '--grid-align': alignMap[this.align],\n        } as Record<string, string>}\n      >\n        <div class=\"grid\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-grid.js","sourceRoot":"","sources":["../../../src/components/af-grid/af-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;GAKG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME;;WAEG;QACK,YAAO,GAAY,CAAC,CAAC;QAiB7B;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,SAAS,CAAC;KA2BlC;IAzBC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtC,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;gBAC3D,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;gBAC7E,mBAAmB,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;gBACpF,YAAY,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;gBACxC,cAAc,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;aACX;YAE3B,4DAAK,KAAK,EAAC,MAAM;gBACf,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Columns = 1 | 2 | 3 | 4 | 5 | 6 | 12;\ntype Align = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * Generic CSS Grid component for flexible column layouts.\n * Supports responsive column counts at different breakpoints.\n *\n * @slot - Grid items\n */\n@Component({\n  tag: 'af-grid',\n  styleUrl: 'af-grid.css',\n  shadow: true,\n})\nexport class AfGrid {\n  /**\n   * Number of columns at the default (largest) breakpoint.\n   */\n  @Prop() columns: Columns = 3;\n\n  /**\n   * Number of columns at the large breakpoint (1024px and below).\n   */\n  @Prop() columnsLg?: Columns;\n\n  /**\n   * Number of columns at the medium breakpoint (768px and below).\n   */\n  @Prop() columnsMd?: Columns;\n\n  /**\n   * Number of columns at the small breakpoint (375px and below).\n   */\n  @Prop() columnsSm?: Columns;\n\n  /**\n   * Gap between grid items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '4';\n\n  /**\n   * Align items within their grid cells.\n   */\n  @Prop() align: Align = 'stretch';\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'start',\n      center: 'center',\n      end: 'end',\n      stretch: 'stretch',\n    };\n\n    return (\n      <Host\n        style={{\n          '--grid-columns': String(this.columns),\n          '--grid-columns-lg': String(this.columnsLg ?? this.columns),\n          '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),\n          '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),\n          '--grid-gap': `var(--space-${this.gap})`,\n          '--grid-align': alignMap[this.align],\n        } as Record<string, string>}\n      >\n        <div class=\"grid\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-hero/af-hero.css

@@ -0,0 +1,282 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  /* Image-lift custom property — consumers override per-page via inline
+     style or a page-level rule. The negative value pulls the photo's
+     crown above the hero top so it reads behind the floating navbar
+     pill. Matches the live Webflow stack (~-260px on .page-banner). */
+  --af-hero-image-lift: -260px;
+  /* Blob mask container size override — rarely needed; defaults to the
+     photo column's natural dimensions. */
+  --af-hero-image-min-height: 360px;
+}
+
+.hero__section {
+  position: relative;
+  overflow: hidden;
+}
+
+/* -----------------------------------------------------------------
+   Paperclip watermark slot (inkwell-centered only)
+   ----------------------------------------------------------------- */
+.hero__paperclip {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 0;
+  /* Default size — consumers can resize the slotted decoration via its
+     own width/height props. */
+  width: 655px;
+  height: 754px;
+}
+
+@media (max-width: 991px) {
+  .hero__paperclip {
+    width: 480px;
+    height: 552px;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero__paperclip {
+    display: none;
+  }
+}
+
+/* -----------------------------------------------------------------
+   Inner wrapper — top/bottom padding
+   ----------------------------------------------------------------- */
+.hero__inner {
+  position: relative;
+  z-index: 1;
+  padding-bottom: 40px;
+}
+
+:host(.hero--pad-default) .hero__inner {
+  padding-top: 124px;
+}
+
+:host(.hero--pad-loose) .hero__inner {
+  padding-top: 164px;
+}
+
+/* Centered variant uses slightly tighter top padding to match the live
+   /platform hero (80px), since the lockup is typically tall. */
+:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {
+  padding-top: 80px;
+}
+
+/* -----------------------------------------------------------------
+   Grid layout (photo + illustration variants)
+   ----------------------------------------------------------------- */
+.hero__grid {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: 40px;
+  align-items: center;
+}
+
+/* Illustration variants use a looser two-column split so the art
+   doesn't dominate. */
+:host(.hero--soft-clay-illustration) .hero__grid,
+:host(.hero--mist-green-illustration) .hero__grid {
+  grid-template-columns: 1fr auto;
+  gap: 48px;
+}
+
+.hero__copy {
+  /* Small inset pushes heading inward from the hard container edge —
+     matches the live .page-banner-text treatment. Only applied to
+     left-aligned variants. */
+  padding-left: 16px;
+}
+
+:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {
+  /* Mirrors ListingHero's `padding-bottom: 120px` — combined with
+     `align-items: center` on the grid, this shifts the heading visually
+     upward so the subtitle lines up near the image's vertical centre. */
+  padding-bottom: 120px;
+}
+
+:host(.hero--inkwell-centered) .hero__copy {
+  padding-left: 0;
+  text-align: center;
+}
+
+.hero__badge:not(:has(*)) {
+  display: none;
+}
+
+.hero__badge:has(*) {
+  margin-bottom: 16px;
+}
+
+.hero__copy ::slotted([slot='badge']) {
+  display: inline-block;
+}
+
+.hero__buttons {
+  margin-top: 32px;
+}
+
+.hero__buttons:empty {
+  display: none;
+}
+
+:host(.hero--inkwell-centered) .hero__buttons {
+  display: flex;
+  justify-content: center;
+}
+
+/* -----------------------------------------------------------------
+   Photo (inkwell-photo)
+   Blob-mask shape defined once as a CSS custom property so Stencil
+   doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.
+   ----------------------------------------------------------------- */
+:host {
+  --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');
+  --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768"><path fill="%23000" d="M1024 0H384A384 384 0 0 0 384 768H1024V0Z"/></svg>');
+}
+
+.hero__image {
+  min-height: var(--af-hero-image-min-height);
+  overflow: visible;
+  margin-top: var(--af-hero-image-lift);
+  position: relative;
+  z-index: 1;
+}
+
+.hero__image--masked ::slotted(img),
+.hero__image--masked ::slotted(picture img),
+.hero__image--masked ::slotted(.af-hero-image) {
+  display: block;
+  width: 100%;
+  height: auto;
+  -webkit-mask-image: var(--af-hero-blob-mask);
+  mask-image: var(--af-hero-blob-mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  mask-mode: alpha;
+}
+
+/* Fallback: some consumers slot a raw <img> wrapped in a container.
+   Descendant selector per repo convention. */
+.hero__image--masked img {
+  -webkit-mask-image: var(--af-hero-blob-mask);
+  mask-image: var(--af-hero-blob-mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  mask-mode: alpha;
+}
+
+/* -----------------------------------------------------------------
+   Illustration (inkwell/soft-clay/mist-green -illustration)
+   ----------------------------------------------------------------- */
+.hero__illustration {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 432px;
+  line-height: 0;
+  justify-self: end;
+}
+
+.hero__illustration ::slotted(svg),
+.hero__illustration ::slotted(img) {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 16px;
+}
+
+:host(.hero--inkwell-illustration) .hero__illustration {
+  max-width: none;
+}
+
+/* -----------------------------------------------------------------
+   Logos-below overlap
+   Painted in the theme's background token so the strip cleanly overlaps
+   the bottom of the photo on the -photo variant. Empty = collapsed.
+   ----------------------------------------------------------------- */
+.hero__logos {
+  position: relative;
+  z-index: 2;
+}
+
+.hero__logos:not(:has(*)) {
+  display: none;
+}
+
+/* Photo variant pulls the logos row up so it covers the image's bottom
+   edge — matches the ListingHero `.listing-hero__footer` treatment. */
+:host(.hero--inkwell-photo) .hero__logos:has(*) {
+  margin-top: -240px;
+  padding-top: 48px;
+  padding-bottom: 48px;
+  background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));
+  border-top: 1px solid
+    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));
+}
+
+/* -----------------------------------------------------------------
+   Mobile / tablet
+   ----------------------------------------------------------------- */
+@media (max-width: 991px) {
+  :host(.hero--pad-default) .hero__inner,
+  :host(.hero--pad-loose) .hero__inner {
+    padding-top: 112px;
+  }
+
+  .hero__grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  :host(.hero--soft-clay-illustration) .hero__grid,
+  :host(.hero--mist-green-illustration) .hero__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero__copy {
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+
+  .hero__illustration {
+    max-width: 360px;
+    margin-inline: auto;
+    justify-self: center;
+  }
+
+  /* Photo on mobile: swap the desktop blob mask for the softer D-curve
+     mobile variant, and drop the lift so the image doesn't crash into
+     the navbar. */
+  .hero__image {
+    margin-top: 0;
+    min-height: auto;
+  }
+
+  :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),
+  :host(.hero--inkwell-photo) .hero__image--masked img {
+    -webkit-mask-image: var(--af-hero-blob-mask-mobile);
+    mask-image: var(--af-hero-blob-mask-mobile);
+  }
+
+  :host(.hero--inkwell-photo) .hero__logos:has(*) {
+    margin-top: 24px;
+    padding-top: 32px;
+    padding-bottom: 32px;
+    background: transparent;
+    border-top: none;
+  }
+}