/* =============================================
 AUSTIN_SPACE — Master Stylesheet
 Last consolidated: 2026-03
 ============================================= */


/* =============================================
 1. DESIGN TOKENS
 ============================================= */

:root {
 --as-black: #0d0d0d;
 --as-white: #fff;
 --as-mid: #888580;
 --as-border: #dddbd6;
 --as-purple: #5107ad;
 --as-purple-light: #ede8f9;
 --as-teal: #00d4c0;
 --as-pink: #ff1f8f;
 --as-purple-br: #7c4dff;
 --as-teal-ink: #00312c;
 --as-pink-ink: #4d0026;
 --as-teal-dk: #00a89a;
 --as-pink-dk: #d10070;
 --as-purple-dk: #3d0582;
 --as-text-body: #666;
 --as-text-secondary: #555;
 --as-indigo: #0b0b1e;

 --font-display: "Fraunces", "DM Serif Display", Georgia, "Times New Roman", serif;
 --font-heading: "Fraunces", "DM Serif Display", Georgia, "Times New Roman", serif;
 --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
 --font-body: "DM Sans", system-ui, sans-serif;

 --as-space-section: 7rem;
 --as-space-section-hero: 5rem;
 --as-space-section-cta: 5rem;
 --as-space-section-mobile: 4rem;
 --as-space-section-side: 2rem;
 --as-space-section-side-mobile: 1.2rem;

 --shadow-card-sm: 0 8px 32px rgba(0, 0, 0, 0.06);
 --shadow-card-md: 0 12px 40px rgba(0, 0, 0, 0.08);
 --shadow-card-lg: 0 16px 48px rgba(0, 0, 0, 0.08);

 --radius-sm: 6px;
 --radius-md: 14px;
 --radius-lg: 28px;

 --max-width: 1160px;
 --transition: 0.22s ease;
 --sticky-top: 2rem;
}


/* =============================================
 2. BASE
 ============================================= */

.as-inner {
 max-width: var(--max-width);
 margin: 0 auto;
 width: 100%;
}

/* =============================================
 3. TYPOGRAPHY UTILITIES
 ============================================= */

.as-label {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--as-mid);
}

/* Sticky column utility */
.as-sticky-col {
 position: sticky;
 top: var(--sticky-top);
}

/* Centred container utility */
.as-container {
 max-width: 1160px;
 margin: 0 auto;
}

/* Card hover lift utilities */
.as-card-lift-sm:hover {
 box-shadow: var(--shadow-card-sm);
 transform: translateY(-2px);
}

.as-card-lift-md:hover {
 box-shadow: var(--shadow-card-md);
 transform: translateY(-3px);
}


/* =============================================
 4. BUTTONS
 ============================================= */

.as-btn {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 500;
 letter-spacing: 0.01em;
 padding: 0.9rem 2rem;
 border-radius: 100px;
 border: none;
 cursor: pointer;
 text-decoration: none;
 transition: all var(--transition);
 white-space: nowrap;
}

.as-btn--primary {
 background: var(--as-black);
 color: var(--as-white);
}

.as-btn--primary:hover {
 background: var(--as-purple);
 color: #fff;
 transform: translateY(-1px);
}

.as-btn--outline {
 background: transparent;
 color: var(--as-black);
 border: 1.5px solid var(--as-border);
}

.as-btn--outline:hover {
 border-color: var(--as-black);
 transform: translateY(-1px);
}

.as-btn--white {
 background: #fff;
 color: var(--as-black);
}

.as-btn--white:hover {
 background: var(--as-purple);
 color: #fff;
 transform: translateY(-1px);
}

.as-btn--ghost {
 background: transparent;
 color: rgba(255, 255, 255, 0.7);
 border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.as-btn--ghost:hover {
 border-color: rgba(255, 255, 255, 0.6);
 color: #fff;
 transform: translateY(-1px);
}

.as-btn--dark {
 background: var(--as-black);
 color: #fff;
}

.as-btn--dark:hover {
 background: var(--as-purple);
 color: #fff;
 transform: translateY(-1px);
}


/* =============================================
 5. SHARED COMPONENTS
 ============================================= */

.as-divider {
 width: 100%;
 height: 1px;
 background: var(--as-border);
 border: none;
 margin: 0;
}

.as-eyebrow {
 display: flex;
 align-items: center;
 gap: 0.6rem;
}

.as-eyebrow__dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--as-purple);
 flex-shrink: 0;
}

/* Row list — stacked icon/text rows */
.as-row-list {
 display: flex;
 flex-direction: column;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.as-row-item {
 display: flex;
 align-items: center;
 gap: 1.8rem;
 background: var(--white);
 padding: 24px 32px;
 border-bottom: 1px solid var(--as-border);
}

.as-row-list--invert .as-row-item {
 background: var(--as-white);
}

.as-row-item__icon {
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 2rem;
 color: var(--as-purple);
 flex-shrink: 0;
}

.as-row-item__icon i {
 font-size: 2rem;
}

.as-row-item:last-child {
 border-bottom: none;
}

.as-row-item__content {
 display: flex;
 flex-direction: column;
 gap: 0.2rem;
 min-width: 0;
}

.as-row-item__title {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 margin: 0;
}

.as-row-item__desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-mid);
 line-height: 1.60;
 margin: 0;
}

/* .as-row-list--dark and .as-row-list--icon-box removed in the Phase 4
 dead-code pass - both had been flagged dead since Phase 3 (items 2 and
 4: /about's Why Solo and /contact's trust-signal list were their only
 consumers, both since rebuilt off dedicated classes) with zero HTML
 consumers remaining. */

/* =============================================
 6. SQUARESPACE OVERRIDES
 ============================================= */

.header-nav-folder-content {
 border-radius: 2px;
 border: none !important;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

#footer-sections .sqs-block-html a {
 display: inline-block;
 text-decoration: none;
}


@media (max-width: 767px) {
 .header .header-announcement-bar-wrapper {
 border-bottom-width: 3px;
 }

 [class*="section-divider"] {
 --stroke-thickness: 3px !important;
 }
}


/* =============================================
 7. ICON COLOUR OVERRIDES
 ============================================= */

.as-creds__icon,
.as-casestudy__stat-icon,
.as-cs-stats__icon {
 color: #f6d847 !important;
}

.fa-location-dot {
 color: #fed146;
}

.as-services__card-icon,
.as-about-role__icon,
.as-about-work__card-icon,
.as-hub-card__icon{
 background: transparent !important;
 border-radius: 0 !important;
 width: auto !important;
 height: auto !important;
 font-size: 2rem !important;
 color: var(--as-purple) !important;
 justify-content: flex-start !important;
 align-items: flex-start !important;
 margin-bottom: 1.8rem;
}

.as-svc-included__item-icon {
 display: flex;
 flex-shrink: 0;
}

/* =============================================
 8. ICON SIZE OVERRIDES
 ============================================= */

.as-creds__icon,
.as-casestudy__stat-icon,
.as-cs-stats__icon {
 font-size: 2.0rem !important;
}



/* =============================================
 HOME — HERO
 ============================================= */

.as-hero-combined {
 position: relative;
 width: 100%;
 background-size: cover;
 background-position: center bottom;
 background-repeat: no-repeat;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}

.as-hero-combined__fade {
 position: absolute;
 inset: 0;
 pointer-events: none;
}

/* Horizontal padding removed (Phase 3, item 1 follow-up, 12 July 2026) -
   was "0 2rem 5rem", adding 32px on each side on top of max-width:1160px
   and misaligning the hero content 32px right of every other section's
   .as-container-based inner (which carries zero padding of its own).
   Only affects >1024px: the max-width:1024px query below (css:~575) sets
   its own full "1.5rem 1.2rem 3rem" padding unconditionally and wins that
   whole range regardless of this rule, so mobile/tablet gutter (19.2px)
   is untouched. Bottom padding (5rem) kept as-is. */
.as-hero-combined__content {
 position: relative;
 z-index: 2;
 max-width: 1160px;
 width: 100%;
 margin: 0 auto;
 padding: 0 0 5rem;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: end;
}

.as-hero-combined__left {
 display: flex;
 flex-direction: column;
 gap: 32px;
}

.as-hero-combined__headline {
 font-family: var(--font-display);
 font-size: clamp(2.8rem, 5vw, 4.8rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 margin: 0;
}

.as-hero-combined__subline {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-secondary);
 margin: 0;
 max-width: 420px;
}

.as-hero-combined__cta {
 display: flex;
 align-items: center;
 gap: 1.2rem;
 flex-wrap: wrap;
}

@media (max-width: 1024px) {
 .as-hero-combined__content {
 grid-template-columns: 1fr;
 gap: 1.5rem;
 padding: 1.5rem 1.2rem 3rem;
 max-width: 100%;
 box-sizing: border-box;
 }

 .as-hero-combined {
 overflow: hidden;
 max-width: 100vw;
 }

 .as-hero-combined__subline {
 max-width: 100%;
 }
}

@media (max-width: 480px) {
 .as-hero-combined {
 background-position: center center;
 }
}

/* ==========================================================
   HERO TRUST ROW
   Google rating + Squarespace Circle Silver Partner badge.
   Sits as the last flex child of .as-hero-combined__left,
   which supplies the 32px top gap from its own row-gap.
   Do not add margin-top here.
   ========================================================== */

.as-allsorts .as-hero-combined__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
}

.as-allsorts .as-hero-combined__trust-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* The Google G source PNG is a square canvas and the glyph fills only
   33.6 percent of it, so a plain img renders a tiny G in a big empty box.
   background-size 298 percent scales the image until the glyph height
   equals the box height. If the asset is ever re-cropped to its ink box,
   replace the span with a plain img and delete this whole rule. */
.as-allsorts .as-hero-combined__trust-g {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
  background-image: url("https://images.squarespace-cdn.com/content/68ae3692707429430e9b8ce9/9b1a8679-4737-4556-bd46-f590e7917f72/GoogleG_FullColor_RGB.png?content-type=image%2Fpng");
  background-position: center;
  background-size: 298%;
  background-repeat: no-repeat;
}

.as-allsorts .as-hero-combined__trust-stars {
  display: inline-flex;
  gap: 3px;
}

/* Duotone sunshine. Locked hex on the SHAPE, derived tint on the FILL behind.
   Same treatment as the service-card icons. Ratio matches the shipped pairs.
   Class MUST be fa-slab-duo. fa-duotone fa-slab silently falls back to plain
   black in this kit. */
.as-allsorts .as-hero-combined__trust-stars i {
  font-size: 20px;
  line-height: 1;
  --fa-primary-color: #d69d1c;    /* was #f4cf3b - match .as-icon--sunshine */
  --fa-secondary-color: #fae9a6;  /* was #fae9a5 - one digit off, a rounding artefact */
  --fa-secondary-opacity: 1;
}

.as-allsorts .as-hero-combined__trust-score {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-900);
}

.as-allsorts .as-hero-combined__trust-sep,
.as-allsorts .as-hero-combined__trust-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--grey-500);
}

/* Hidden by default. The row wraps to two lines on narrow screens and a
   stranded vertical rule looks like a bug. Restored at the desktop guard. */
.as-allsorts .as-hero-combined__trust-rule {
  display: none;
  width: 1px;
  height: 33px;
  flex: 0 0 auto;
  background: rgba(23, 23, 26, 0.18);
}

.as-allsorts .as-hero-combined__trust-badge {
  height: 46px;
  width: auto;
  display: block;
}

@media (min-width: 481px) {

  .as-allsorts .as-hero-combined__trust {
    gap: 28px;
    flex-wrap: nowrap;
  }

  .as-allsorts .as-hero-combined__trust-rule {
    display: block;
  }

}


/* =============================================
 HOME — CREDENTIALS BAR
 ============================================= */

.as-creds {
 background: var(--as-black);
 padding: 3.5rem 2rem;
}

.as-creds__inner {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: rgba(255, 255, 255, 0.08);
}

.as-creds__item {
 background: var(--as-black);
 padding: 2rem 1.8rem;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 1rem;
 transition: background var(--transition);
}

.as-creds__item:hover {
 background: #1a1a1a;
}

.as-creds__icon {
 color: var(--as-purple);
 font-size: 1.4rem;
 line-height: 1;
}

.as-creds__number {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3vw, 2.8rem);
 font-weight: 800;
 color: #fff;
 line-height: 1;
 margin: 0;
}

.as-creds__text {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: rgba(255, 255, 255, 0.5);
 line-height: 1.60;
 letter-spacing: 0.01em;
 margin: 0;
}

.as-creds__text strong {
 display: block;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.85);
 font-size: 0.88rem;
 margin-bottom: 0.15rem;
}

.as-creds__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-creds__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: #fff;
 margin: 0;
}

@media (max-width: 860px) {
 .as-creds__inner {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 480px) {
 .as-creds__item {
 padding: 1.5rem 1.2rem;
 }
}


/* =============================================
 HOME — POSITIONING
 ============================================= */

.as-positioning {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-positioning__inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 6rem;
 align-items: center;
}

.as-positioning__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

/* Base layout fix, not a skin rule - unscoped. Column flex containers with
   no explicit align-items default to stretch, which would pull the new
   .as-btn (an auto-width inline-flex item) full width of the column. Every
   other .as-btn on this page sits inside its own flex-row wrapper
   (.as-cta__actions, .as-hero-combined__cta) which sidesteps this; this is
   the first button placed as a direct child of a column flex, so it needs
   its own align-self. */
.as-positioning__left .as-btn {
  align-self: flex-start;
}

.as-positioning__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-positioning__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-positioning__body {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-secondary);
 margin: 1rem 0 0;
 max-width: 480px;
}

.as-positioning__problem:last-child {
 border-bottom: none;
}

@media (max-width: 860px) {
 .as-positioning__inner {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 }

 .as-positioning__body {
 max-width: 100%;
 }
}

@media (max-width: 480px) {
 .as-positioning {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 HOME — BACKGROUND STORY
 ============================================= */

/* NEW - .as-backstory is always dark by design, no white legacy version
 ever existed - same category as .as-creds / .as-hub-bar / .as-contact-bar,
 so the dark background sits here, unscoped. */
.as-backstory {
 background: var(--liquorice);
}

.as-backstory__inner {
}

@media (max-width: 480px) {
 .as-backstory {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 HOME — SERVICES
 ============================================= */

.as-services {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-services__inner {
}

.as-services__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-services__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-services__subline {
 font-family: var(--font-body);
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-mid);
 margin: 8px 0 0;
 max-width: 480px;
}

.as-services__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}

.as-services__card {
 background: #fff;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 padding: 2.4rem;
 display: flex;
 flex-direction: column;
 gap: 0;
 transition: box-shadow var(--transition), transform var(--transition);
 text-decoration: none;
 color: inherit;
}


.as-services__card-icon {
 display: flex;
 flex-shrink: 0;
}

.as-services__card-tag {
 font-family: var(--font-mono);
 font-size: 11.5px;
 font-weight: 500;
 letter-spacing: var(--ls-label);
 text-transform: uppercase;
 color: var(--as-purple);
 margin-bottom: 0.6rem;
}

.as-services__card-title {
 font-family: var(--font-display);
 font-size: 1.5rem;
 font-weight: 400;
 line-height: 1.15;
 letter-spacing: -0.01em;
 color: var(--as-black);
 margin: 0 0 0.8rem;
 min-height: 3.45rem; /* 2 lines × 1.5rem × 1.15 — aligns images across row */
}

.as-services__card-price {
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 line-height: 1.50;
 color: var(--as-mid);
 margin-bottom: 1.4rem;
}

.as-services__card-price span {
 font-family: var(--font-mono);
 font-weight: 500;
 color: var(--as-black);
 font-size: 0.9rem;
}

.as-services__card-desc {
 font-family: var(--font-body);
 font-size: 0.92rem;
 font-weight: 400;
 line-height: 1.7;
 color: var(--as-text-body);
 margin: 0 0 2rem;
 flex-grow: 1;
}

.as-services__card-features {
 list-style: none;
 padding: 0;
 margin: 0 0 2.4rem;
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
 border-top: 1px solid var(--as-border);
 padding-top: 1.4rem;
}

.as-services__card-features li {
 display: flex;
 align-items: flex-start;
 gap: 0.6rem;
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-text-secondary);
 line-height: 1.60;
}

.as-services__card-features li i {
 color: var(--as-purple);
 font-size: 0.75rem;
 margin-top: 0.2rem;
 flex-shrink: 0;
}

.as-services__card-cta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: auto;
 padding-top: 1.4rem;
 border-top: 1px solid var(--as-border);
}

.as-services__card-link {
 font-family: var(--font-body);
 font-size: 0.88rem;
 font-weight: 500;
 color: var(--as-black);
 text-decoration: none;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 transition: gap var(--transition), color var(--transition);
}

.as-services__card:hover .as-services__card-link {
 color: var(--as-purple);
 gap: 0.8rem;
}

.as-services__card-link i {
 font-size: 0.8rem;
}

@media (max-width: 960px) {
 .as-services__grid {
 grid-template-columns: 1fr;
 max-width: 520px;
 }

 .as-services__card-title {
 min-height: auto;
 }
}

@media (max-width: 480px) {
 .as-services {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 HOME — CASE STUDY FEATURE
 ============================================= */

/* Base (non-Allsorts) fallback. Uses var(--liquorice) rather than
 var(--as-black) so it matches the Allsorts background exactly (#17171a,
 not #0d0d0d) - no flash of a different dark on the class swap. Only the
 elements that survive the redesign get a fallback here (.as-casestudy
 itself, __client, __quote); __copy/__desc/__img/__cta/__attribution are
 new, Allsorts-only classes with no base rule, matching how every other
 post-Allsorts addition in this file works (e.g. .as-services__card-topper).
 display:block + text-decoration:none are
 needed regardless of Allsorts since the element changed from <section> to
 <a>, which defaults to inline and would otherwise show an underline. */
.as-casestudy {
 display: block;
 background: var(--liquorice);
 text-decoration: none;
}

.as-casestudy__client {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: #fff;
 margin: 0;
}

.as-casestudy__quote {
 border-left: 2px solid var(--as-purple);
 padding-left: 1.2rem;
 margin: 0;
 color: rgba(255, 255, 255, 0.75);
}

/* __quote-source: LOAD-BEARING for the two individual case-study detail
 pages (Terracotta, DDR) - it styles their locked "View on Google" links
 and has no Allsorts-scoped override anywhere in this file (confirmed by
 the "no CSS rule at all" note further down, css:7613 area). Kept
 byte-for-byte unchanged. The homepage no longer uses this class - its
 attribution line uses .as-casestudy__attribution instead, see the
 Allsorts block below. */
.as-casestudy__quote-source {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 margin-left: 0.8rem;
 font-family: var(--font-mono);
 font-size: 0.7rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.3);
 text-decoration: none;
 transition: color var(--transition);
}

.as-casestudy__quote-source:hover {
 color: rgba(255, 255, 255, 0.65);
}

.as-casestudy__quote-source i {
 font-size: 0.65rem;
}


/* =============================================
 HOME — CTA
 ============================================= */

.as-cta {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-cta__inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 6rem;
 align-items: center;
}

.as-cta__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-cta__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.08;
 letter-spacing: -0.025em;
 color: var(--as-black);
 margin: 0;
}

.as-cta__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-cta__body {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-body);
 margin: 0;
 max-width: 440px;
}

.as-cta__actions {
 display: flex;
 align-items: center;
 gap: 1.2rem;
 flex-wrap: wrap;
 margin-top: 0.4rem;
}

@media (max-width: 860px) {
 .as-cta__inner {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 }

 .as-cta__body {
 max-width: 100%;
 }
}

@media (max-width: 480px) {
 .as-cta {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 SERVICE PAGES
 ============================================= */

.as-svc-hero {
 background: var(--as-white);
 padding: 2rem 2rem 5rem;
}

@media (min-width: 481px) {
  .as-svc-hero {
    padding-top: 16px;
  }
}

.as-svc-hero__inner {
 display: grid;
 grid-template-columns: 1fr 380px;
 gap: 6rem;
 align-items: center;
}

.as-svc-hero__left {
 display: flex;
 flex-direction: column;
 gap: 32px;
}

.as-svc-hero__headline {
 font-family: var(--font-heading);
 font-size: clamp(2.6rem, 5vw, 4.2rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 margin: 0;
}

.as-svc-hero__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-svc-hero__desc {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 margin: 0;
 max-width: 520px;
}

.as-svc-hero__actions {
 display: flex;
 align-items: center;
 gap: 1.2rem;
 flex-wrap: wrap;
}

.as-svc-hero__right {
 background: var(--white);
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 padding: 2.2rem;
 display: flex;
 flex-direction: column;
 gap: 1.4rem;
}

.as-svc-hero__price-label {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--as-mid);
}

.as-svc-hero__price {
 font-family: var(--font-heading);
 font-size: clamp(2.4rem, 4vw, 3.2rem);
 color: var(--as-black);
 line-height: 1;
 margin: 0;
}

.as-svc-hero__price span {
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 400;
 color: var(--as-mid);
}

.as-svc-hero__price-divider {
 width: 100%;
 height: 1px;
 background: var(--as-border);
}

.as-svc-hero__meta {
 display: flex;
 flex-direction: column;
 gap: 0.7rem;
}

.as-svc-hero__meta-item {
 display: flex;
 align-items: center;
 gap: 1rem;
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-secondary);
}

.as-svc-hero__meta-item i {
 color: var(--as-purple);
 font-size: 1.4rem;
 flex-shrink: 0;
}

.as-svc-included {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-svc-included__inner {
}

.as-svc-included__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-svc-section-headline {
 font-family: var(--font-heading);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-svc-included__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}

.as-svc-included__item {
 background: #fff;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 padding: 32px;
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 transition: box-shadow var(--transition), transform var(--transition);
}

.as-svc-included__item-icon {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 color: var(--as-purple);
 font-size: 2rem;
 flex-shrink: 0;
}

.as-svc-included__item-title {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 margin: 0;
}

.as-svc-included__item-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-text-body);
 line-height: 1.60;
 margin: 0;
}

/* Flip-card modifier for as-svc-included (used by the One-Page Website page).
 Sits on a solid purple panel now (as-solid-band + as-solid-band--purple,
 added alongside this class in the HTML) rather than a dimmed cosmos
 backdrop — --as-purple-deep stays as the flip-card back-face colour. */
.as-svc-included--flip {
 position: relative;
 overflow: hidden;
 border-bottom: none;
 --as-purple-deep: #3d0582; /* darkened var(--as-purple), scoped to this section */
 padding-top: 60px; /* straight top border now, just a comfortable gap, tune live */
 padding-bottom: 100px; /* clears the 72px deep bottom cap + breathing room, tune live */
}

.as-svc-included--flip .as-svc-included__inner {
 position: relative;
 z-index: 2;
}

.as-svc-included--flip .as-label {
 color: #9a9a9a;
}

.as-svc-included--flip .as-svc-section-headline {
 color: #fff;
}

.as-svc-included--flip .as-svc-included__item {
 background: none;
 border: none;
 padding: 0;
 height: auto;
 min-height: 310px;
 perspective: 1200px;
}

.as-svc-included__flip-inner {
 position: relative;
 width: 100%;
 height: 100%;
 transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
 transform-style: preserve-3d;
}

.as-svc-included__item--flip:hover .as-svc-included__flip-inner,
.as-svc-included__item--flip:focus-within .as-svc-included__flip-inner,
.as-svc-included__item--flip.is-flipped .as-svc-included__flip-inner {
 transform: translateY(-5px) rotateY(180deg);
 box-shadow: 0 18px 40px rgba(81, 7, 173, 0.28); /* rgba of --as-purple #5107ad */
}

.as-svc-included__flip-face {
 position: absolute;
 inset: 0;
 backface-visibility: hidden;
 border-radius: var(--radius-md);
 padding: 34px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.as-svc-included__flip-face--front {
 background: #fff;
 border: 3px solid var(--as-black);
}

.as-svc-included__flip-top {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
}

.as-svc-included__flip-eyebrow {
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 0.09em;
 text-transform: uppercase;
 color: var(--as-purple);
}

.as-svc-included__flip-toggle {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 border: 1.5px solid #e2e2e2;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #8a8a8a;
 font-size: 15px;
 flex-shrink: 0;
 transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}

.as-svc-included__item--flip:hover .as-svc-included__flip-toggle,
.as-svc-included__item--flip:focus-within .as-svc-included__flip-toggle {
 background: var(--as-purple);
 border-color: var(--as-purple);
 color: #fff;
 transform: rotate(90deg);
}

.as-svc-included__flip-hook {
 font-family: var(--font-heading);
 font-weight: 800;
 font-size: 27px;
 line-height: 1.08;
 letter-spacing: -0.01em;
 color: var(--as-black);
 margin: 22px 0 0;
}

.as-svc-included__flip-iconwrap {
 margin-top: auto;
 padding-top: 30px;
}

.as-svc-included__flip-iconwrap i {
 font-size: 60px;
 color: var(--as-purple);
 line-height: 1;
}

.as-svc-included__flip-face--back {
 transform: rotateY(180deg);
 background: var(--as-purple-deep);
 border: 3px solid var(--as-black);
}

.as-svc-included__flip-face--back .as-svc-included__flip-top {
 margin-bottom: auto;
}

.as-svc-included__flip-face--back .as-svc-included__flip-eyebrow {
 color: var(--as-purple-light);
}

.as-svc-included__flip-toggle--minus {
 border: 1.5px solid rgba(255, 255, 255, 0.4);
 color: #fff;
}

.as-svc-included__flip-desc {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 15px;
 line-height: 1.55;
 color: #fff;
 margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
 .as-svc-included__flip-inner {
 transition: none;
 }
}

.as-svc-process {
 background: var(--as-white);
}

.as-svc-process__inner {
}

.as-svc-process__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-svc-process__steps {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 position: relative;
}

.as-svc-process__steps::before {
 content: '';
 position: absolute;
 top: 24px; /* was 21px */
 left: 21px;
 right: 23%;
 height: 1px;
 background: var(--as-border);
 z-index: 0;
}

.as-svc-process__step {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 1rem;
 padding: 0 1.5rem 0 0;
 position: relative;
 z-index: 1;
}

.as-svc-process__step-number {
 color: #000000;
 font-size: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.as-svc-process__step-title {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 margin: 0;
}

.as-svc-process__step-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-text-body);
 line-height: 1.60;
 margin: 0;
}

.as-svc-bottom {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-svc-bottom__inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: start;
}

.as-svc-bottom--single .as-svc-bottom__inner {
 grid-template-columns: 1fr;
 max-width: 640px;
 margin: 0 auto;
}

.as-svc-bottom__col {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-svc-bottom__col-header {
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
}

.as-svc-perfect__list {
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 list-style: none;
 padding: 0;
 margin: 0;
}

.as-svc-perfect__list li {
 display: flex;
 align-items: flex-start;
 gap: 0.8rem;
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-text-secondary);
 line-height: 1.60;
}

.as-svc-perfect__list li i {
 color: var(--as-purple);
 font-size: 0.85rem;
 margin-top: 0.15rem;
 flex-shrink: 0;
}

.as-svc-pricing {
 display: flex;
 flex-direction: column;
 gap: 1px;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.as-svc-pricing__tier {
 background: #fff;
 padding: 24px 32px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 border-bottom: 1px solid var(--as-border);
 transition: background var(--transition);
}

.as-svc-pricing__tier:last-child {
 border-bottom: none;
}

.as-svc-pricing__tier:hover {
 background: #fafaf8;
}

.as-svc-pricing__tier-left {
 display: flex;
 flex-direction: column;
 gap: 0.2rem;
}

.as-svc-pricing__tier-name {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 margin: 0;
}

.as-svc-pricing__tier-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-mid);
 margin: 0;
}

.as-svc-pricing__tier-price {
 font-family: var(--font-heading);
 font-size: 1.4rem;
 font-weight: 400;
 color: var(--as-black);
 white-space: nowrap;
}

.as-svc-cta {
 background: var(--as-white);
 padding: var(--as-space-section-cta) var(--as-space-section-side);
}

.as-svc-cta--dark {
 background: var(--as-black);
 /* No border-top here — pink's own border-bottom (as-solid-band--edge-bottom)
 already draws the visible seam; a black border against this section's
 own black background would be invisible anyway. Bottom edge is owned by
 the cosmos-break footer bookend directly below (its clip-path traces the
 wavy seam instead). */
}

/* One-Page Website's CTA — white, not the shared floating black banner the
 other 3 service pages use. Scoped under --light so .as-cta-banner__inner
 itself (shared with as-hub-notsure__inner / as-cs-hub-cta__inner) is never
 touched directly. */
.as-svc-cta--light {
 position: relative;
 padding-bottom: 100px; /* clears the new 72px deep bottom wave cap + breathing room, tune live */
}

.as-svc-cta--light .as-cta-banner__inner {
 background: var(--white);
 border: 1px solid var(--as-border);
}

.as-svc-cta--light .as-svc-cta__headline { color: var(--as-black); }
.as-svc-cta--light .as-svc-cta__body { color: var(--as-text-secondary); }

/* ============================================================
 CTA BANNER — shared inner utility
 Used by: .as-svc-cta__inner, .as-hub-notsure__inner, .as-cs-hub-cta__inner
 ============================================================ */

.as-cta-banner__inner {
 max-width: 640px;
 margin: 0 auto;
 background: transparent;
 color: var(--ink-900);
 border-radius: var(--radius-lg);
 padding: 4rem;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 2rem;
}

@media (max-width: 960px) {
 .as-cta-banner__inner {
 grid-template-columns: 1fr;
 gap: 2.5rem;
 }
}

@media (max-width: 480px) {
 .as-cta-banner__inner {
 padding: 2.5rem 1.8rem;
 }
}

.as-svc-cta__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-svc-cta__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 400;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-svc-cta__body {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-secondary);
 margin: 0;
 max-width: 520px;
}

.as-svc-cta__actions {
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 align-items: center;
 flex-shrink: 0;
}

@media (max-width: 960px) {
 .as-svc-hero__inner {
 grid-template-columns: 1fr;
 gap: 3rem;
 }

 .as-svc-included__grid {
 grid-template-columns: 1fr 1fr;
 }

 .as-svc-process__steps {
 grid-template-columns: 1fr 1fr;
 gap: 2.5rem;
 }

 .as-svc-process__steps::before {
 display: none;
 }

 .as-svc-bottom__inner {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 767px) {
 .as-svc-cta__actions {
 flex-direction: column !important;
 align-items: stretch !important;
 flex-shrink: 1 !important;
 width: 100% !important;
 min-width: 0 !important;
 }

 .as-svc-cta__actions .as-btn {
 width: 100% !important;
 white-space: normal !important;
 text-align: center !important;
 justify-content: center !important;
 box-sizing: border-box !important;
 }
}

@media (max-width: 600px) {
 .as-svc-included__grid {
 grid-template-columns: 1fr;
 }

 .as-svc-process__steps {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 480px) {
 .as-svc-hero,
 .as-svc-included,
 .as-svc-process,
 .as-svc-bottom,
 .as-svc-cta {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 ONE-PAGE WEBSITE — SELL SECTIONS
 Solid colour band + signature wave divider, reused
 across as-sell-hook / as-sell-speed / as-sell-upgrade.
 .as-cosmos-band below is kept for the cosmos backdrop
 used elsewhere on this page (cards section, hero).
 ============================================= */

.as-solid-band {
 position: relative;
 overflow: hidden;
 box-sizing: border-box;
 padding: var(--as-space-section) var(--as-space-section-side);
}

/* Top/bottom outline only — no vertical side borders, per feedback.
 Applied per the seam map on whichever edge of a given panel is NOT the
 wavy one (the wavy edge's outline comes from its .as-wave-cap stroke
 instead, so it isn't duplicated here). */
.as-solid-band--edge-top { border-top: 5px solid var(--as-black); }
.as-solid-band--edge-bottom { border-bottom: 5px solid var(--as-black); }

/* Tone-on-tone patterns sit under the content, above the base colour —
 subtle texture, not decoration, so text contrast is unaffected. */
.as-solid-band--purple {
 background-color: var(--as-purple);
 background-image: repeating-linear-gradient(90deg, rgba(61, 5, 130, 0.35) 0 2px, transparent 2px 30px);
}
.as-solid-band--teal {
 background-color: var(--as-teal);
 background-image: repeating-linear-gradient(45deg, rgba(0, 168, 154, 0.35) 0 2px, transparent 2px 24px);
}
.as-solid-band--pink {
 background-color: var(--as-pink);
 background-image: radial-gradient(rgba(209, 0, 112, 0.35) 8px, transparent 9px);
 background-size: 70px 70px;
}

/* Wave cap — fixed-pixel-height wave accent layered over a section edge.
 Depth is set by height (36px shallow / 72px deep), never by a percentage
 of section height, so the same wave reads identically regardless of how
 tall the section's content makes it (a clip-path keyed to objectBoundingBox
 scales with element height, which is exactly what breaks the wave rhythm
 across sections of different heights). Top vs bottom is the same markup,
 mirrored with scaleY(-1). */
.as-wave-cap {
 --cap-fill: var(--as-white);
 position: absolute;
 left: 0;
 width: 100%;
 z-index: 2;
 pointer-events: none;
}

.as-wave-cap svg { display: block; width: 100%; height: 100%; }

.as-wave-cap--top { top: 0; }
.as-wave-cap--bottom { bottom: 0; transform: scaleY(-1); }
.as-wave-cap--shallow { height: 36px; }
.as-wave-cap--deep { height: 72px; }

/* Fill modifiers — the cap's fill paints the colour of whichever section is
 on the OTHER side of the curve, so a wave between two colour bands (not
 just colour-to-white) needs an explicit fill rather than the white default. */
.as-wave-cap--fill-teal { --cap-fill: var(--as-teal); }
.as-wave-cap--fill-pink { --cap-fill: var(--as-pink); }
.as-wave-cap--fill-purple { --cap-fill: var(--as-purple); }

/* Cosmos break — a slim (~120px), pure-graphic strip. No dimming, no text,
 no overlay: just the cosmos image, clipped to a wave on one edge, with a
 black stroke tracing that same curve. The clip-path cuts pixels from the
 IMAGE only, so the container's own flat background (whichever colour
 sits directly above it in the page) shows through the missing corner —
 --fill-black for the one that follows the black CTA, plain white default
 for the one that follows a white section. Top/bottom outline only, same
 as .as-solid-band, no vertical side borders. */
.as-cosmos-break {
 position: relative;
 height: 120px;
 overflow: hidden;
 box-sizing: border-box;
 background: var(--as-white);
}

.as-cosmos-break--fill-black { background: var(--as-black); }
.as-cosmos-break--edge-top { border-top: 5px solid var(--as-black); }
.as-cosmos-break--edge-bottom { border-bottom: 5px solid var(--as-black); }

.as-cosmos-break__img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center 50%; /* tune live */
}

.as-cosmos-break--wave-top .as-cosmos-break__img {
 clip-path: url(#wave-clip-home-footer);
}

.as-cosmos-break__stroke {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 pointer-events: none;
}

.as-cosmos-break__stroke svg { display: block; width: 100%; height: 100%; }

.as-cosmos-band {
 position: relative;
 overflow: hidden;
 background: var(--as-black);
 padding: 130px var(--as-space-section-side);
}

.as-cosmos-band::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 0;
 background-image: url('https://images.squarespace-cdn.com/content/68ae3692707429430e9b8ce9/de2a78f0-8188-4f7a-8cc9-439c70385354/hero-cosmos-1920.jpg');
 background-size: cover;
 background-position: center var(--cosmos-y, 50%);
 opacity: 0.82;
}

@media (min-width: 1920px) {
 .as-cosmos-band::before {
 background-image: url('https://images.squarespace-cdn.com/content/68ae3692707429430e9b8ce9/366e8504-d2e8-409d-ab43-996a6fc65431/hero-cosmos-2880.jpg');
 }
}

.as-cosmos-band::after {
 content: '';
 position: absolute;
 inset: 0;
 z-index: 1;
 background:
 radial-gradient(ellipse 60% 70% at 50% 45%, rgba(13, 13, 13, 0.55), rgba(13, 13, 13, 0) 70%),
 linear-gradient(180deg, rgba(13, 13, 13, 0.45), rgba(13, 13, 13, 0.7));
}

/* Wave edges — clip the whole band to the signature curve (reuses the site's
 existing wave-clip defs from footer-injection.html; do not add new defs).
 Clipping the parent (not just the image/overlay) carries the band's own
 background along with it, so the carved sliver reveals page white instead
 of the band's black backdrop, with no change to the locked opacity/gradient
 blend elsewhere on the band. */

.as-cosmos-band--wave-bottom {
 clip-path: url(#wave-clip-one-page);
 padding-bottom: 250px; /* clears the wave trough from content — first pass, tune live */
}

.as-cosmos-band--wave-top {
 clip-path: url(#wave-clip-home-footer);
 padding-top: 250px; /* clears the wave trough from content — first pass, tune live */
}

.as-cosmos-band__inner {
 position: relative;
 z-index: 3;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1.5rem;
 text-align: center;
}

.as-eyebrow--on-dark .as-label {
 color: #c9b8ff;
}

/* HOOK (the problem/hook, purple) */

.as-sell-hook {
 padding-bottom: 60px; /* clears the 36px shallow wave cap + breathing room, tune live */
}

.as-sell-hook .as-eyebrow__dot {
 background: #fff;
}

.as-sell-hook__headline {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(30px, 4.4vw, 52px);
 line-height: 1.1;
 letter-spacing: -0.02em;
 max-width: 22ch;
 color: #fff;
 margin: 0;
}

.as-sell-hook__body {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1.05rem;
 line-height: 1.7;
 color: #e2e2e2;
 max-width: 54ch;
 margin: 0;
}

/* PROMISE (giant numeral, white) */

.as-sell-promise {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-sell-promise__inner {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 3rem;
 align-items: center;
}

.as-sell-promise__numeral {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(90px, 13vw, 170px);
 line-height: 0.8;
 color: var(--as-purple);
 margin: 0;
}

.as-sell-promise__right {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.as-sell-promise__body {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1rem;
 line-height: 1.75;
 color: var(--as-text-secondary);
 max-width: 60ch;
 margin: 0;
}

@media (max-width: 767px) {
 .as-sell-promise__inner {
 grid-template-columns: 1fr;
 gap: 1.5rem;
 }
}

/* COMPARE (agency / DIY / us table, white) */

.as-sell-compare {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
 border-bottom: 1px solid var(--as-border);
}

.as-sell-compare__header {
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 margin-bottom: 3rem;
}

.as-sell-compare__table-wrap {
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.as-sell-compare__table {
 width: 100%;
 border-collapse: collapse;
}

.as-sell-compare__table th,
.as-sell-compare__table td {
 padding: 1rem 1.4rem;
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 400;
 color: var(--as-text-body);
 text-align: center;
 border-bottom: 1px solid var(--as-border);
}

.as-sell-compare__table th {
 font-weight: 600;
 color: var(--as-black);
 background: var(--white);
}

.as-sell-compare__table th:first-child,
.as-sell-compare__table td:first-child {
 text-align: left;
 font-weight: 600;
 color: var(--as-black);
}

.as-sell-compare__table tr:last-child td {
 border-bottom: none;
}

.as-sell-compare__table-head--accent {
 background: var(--as-purple) !important;
 color: #fff !important;
}

.as-sell-compare__table-cell--accent {
 background: #f5f1ff;
 font-weight: 500;
 color: var(--as-black);
}

@media (max-width: 767px) {
 .as-sell-compare__table th,
 .as-sell-compare__table td {
 padding: 0.8rem 0.7rem;
 font-size: 0.78rem;
 }
}

/* SPEED (giant knockout figure) */

.as-sell-speed {
 padding-top: 24px; /* straight top border now, just a comfortable gap, tune live */
 padding-bottom: 60px; /* clears the 36px shallow wave cap (now on the bottom edge) + breathing room, tune live */
}

.as-sell-speed__figure {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(72px, 15vw, 200px);
 line-height: 0.85;
 letter-spacing: -0.04em;
 color: var(--as-teal-ink);
 margin: 0;
}

.as-sell-speed__unit {
 font-size: 0.3em;
 vertical-align: super;
 color: #fff;
 margin-left: 0.05em;
}

.as-sell-speed__body {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1.05rem;
 line-height: 1.7;
 color: rgba(0, 49, 44, 0.72);
 max-width: 44ch;
 margin: 0;
}

.as-sell-speed .as-label {
 color: var(--as-teal-ink);
}

.as-sell-speed .as-eyebrow__dot {
 background: var(--as-teal-ink);
}

/* UPGRADE (founding-client promise, pink) */

.as-sell-upgrade {
 padding-bottom: var(--as-space-section); /* straight bottom border now, no deep-cap clearance needed */
}

.as-sell-upgrade__headline {
 font-family: var(--font-display);
 font-weight: 800;
 font-size: clamp(32px, 4.6vw, 56px);
 line-height: 1.1;
 letter-spacing: -0.02em;
 max-width: 20ch;
 color: #fff;
 margin: 0;
}

.as-sell-upgrade__headline span {
 color: var(--as-pink-ink);
}

.as-sell-upgrade__body {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 1.05rem;
 line-height: 1.7;
 color: var(--as-pink-ink);
 max-width: 52ch;
 margin: 0;
}

.as-sell-upgrade .as-label {
 color: var(--as-pink-ink);
}

.as-sell-upgrade .as-eyebrow__dot {
 background: var(--as-pink-ink);
}

@media (max-width: 480px) {
 .as-cosmos-band {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }

 .as-cosmos-band--wave-bottom {
 padding-bottom: 190px; /* first pass, tune live */
 }

 .as-cosmos-band--wave-top {
 padding-top: 190px; /* first pass, tune live */
 }
}

@media (max-width: 480px) {
 /* Side padding only — top/bottom stay put since wave caps are fixed-px
 and don't need percentage-style mobile shrinking. */
 .as-solid-band {
 padding-left: var(--as-space-section-side-mobile);
 padding-right: var(--as-space-section-side-mobile);
 }

 /* .as-svc-included--flip shares the base .as-svc-included class, which an
 earlier 480px rule resets to a flat 4rem padding — placed here, after
 that rule, so this wins and the deep-cap clearance survives on mobile. */
 .as-svc-included--flip {
 padding-top: 90px;
 padding-bottom: 90px;
 }
}


/* =============================================
 CASE STUDY PAGES
 ============================================= */

.as-cs-hero {
 background: var(--as-white);
 padding: 2rem 2rem 5rem;
}

.as-cs-hero__inner {
 display: grid;
 grid-template-columns: 1.15fr 1fr;
 gap: 6rem;
 align-items: start;
}

.as-cs-hero__left {
 display: flex;
 flex-direction: column;
 gap: 32px;
}

.as-cs-hero__headline {
 font-family: var(--font-heading);
 font-size: clamp(2.4rem, 5vw, 4rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 margin: 0;
}

.as-cs-hero__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-cs-hero__desc {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 margin: 0;
}

/* Shared by the case-study hero and the About hero - one declaration block, two pages. */
.as-cs-hero__spec,
.as-about-hero__spec {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 700;
 line-height: 1.6;
 color: var(--grey-500);
 padding-top: 0;
 margin: 0;
}

.as-cs-hero__link {
 display: inline-flex;
 align-self: flex-start;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 600;
 color: var(--as-purple);
 text-decoration: none;
 transition: gap var(--transition);
}

.as-cs-hero__link:hover {
 gap: 0.8rem;
}

.as-cs-hero__link i {
 font-size: 0.8rem;
}

.as-cs-hero__right {
 display: flex;
 flex-direction: column;
}

.as-cs-stats {
 background: var(--as-black);
 padding: 3.5rem 2rem;
}

.as-cs-stats__inner {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
 background: rgba(255, 255, 255, 0.06);
}

.as-cs-stats__item {
 background: var(--as-black);
 padding: 32px;
 display: flex;
 flex-direction: column;
 gap: 0.4rem;
 transition: background var(--transition);
}

.as-cs-stats__item:hover {
 background: #1a1a1a;
}

.as-cs-stats__icon {
 color: var(--as-purple);
 font-size: 1rem;
 margin-bottom: 0.4rem;
}

.as-cs-stats__number {
 font-family: var(--font-heading);
 font-size: clamp(1.8rem, 2.8vw, 2.6rem);
 font-weight: 400;
 color: #fff;
 line-height: 1;
}

.as-cs-stats__label {
 font-family: var(--font-mono);
 font-size: 0.78rem;
 font-weight: 400;
 color: rgba(255, 255, 255, 0.4);
 line-height: 1.4;
}

.as-cs-challenge {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-cs-challenge__inner {
 display: grid;
 grid-template-columns: 380px 1fr;
 gap: 6rem;
 align-items: start;
}

.as-cs-challenge__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-cs-section-headline {
 font-family: var(--font-heading);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-cs-challenge__right {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}

.as-cs-challenge__group {
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
}

.as-cs-challenge__group-title {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--as-purple);
 padding-bottom: 0.6rem;
 border-bottom: 1px solid var(--as-border);
}

.as-cs-challenge__list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.as-cs-challenge__list li {
 display: flex;
 align-items: flex-start;
 gap: 0.7rem;
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 400;
 color: var(--as-text-secondary);
 line-height: 1.55;
}

.as-cs-challenge__list li i {
 color: var(--as-purple);
 font-size: 0.75rem;
 margin-top: 0.25rem;
 flex-shrink: 0;
}

.as-cs-solution {
 background: var(--white);
}

.as-cs-solution__inner {
}

.as-cs-solution__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-cs-solution__grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1.5rem;
}

.as-cs-phase {
 background: #fff;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 padding: 2.2rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.as-cs-phase__number {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-mono);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--as-purple);
}

.as-cs-phase__icon {
 font-size: 2em;
}

.as-cs-phase__title {
 font-family: var(--font-heading);
 font-size: 1.3rem;
 font-weight: 400;
 line-height: 1.2;
 letter-spacing: -0.01em;
 color: var(--as-black);
 margin: 0;
}

.as-cs-phase__list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 0.45rem;
 border-top: 1px solid var(--as-border);
 padding-top: 1rem;
}

.as-cs-phase__list li {
 display: flex;
 align-items: flex-start;
 gap: 0.6rem;
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-text-body);
 line-height: 1.60;
}

.as-cs-phase__list li i {
 color: var(--as-purple);
 font-size: 0.7rem;
 margin-top: 0.2rem;
 flex-shrink: 0;
}

/* Challenge section intro paragraph */
.as-cs-challenge__intro {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-secondary);
 margin: 0.4rem 0 0;
}
 
/* Phase card image slot */
.as-cs-phase__image {
 margin-top: auto;
 border-radius: var(--radius-sm);
 overflow: hidden;
 border: 1px solid var(--as-border);
 line-height: 0;
}
 
.as-cs-phase__image img {
 width: 100%;
 height: auto;
 display: block;
 object-fit: cover;
 object-position: top;
}

.as-cs-beforeafter {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-cs-beforeafter__inner {
}

.as-cs-beforeafter__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-cs-beforeafter__grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
}

.as-cs-beforeafter__col {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}

.as-cs-beforeafter__label {
 font-family: var(--font-mono);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--as-mid);
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.as-cs-beforeafter__label i {
 font-size: 0.7rem;
}

.as-cs-beforeafter__label--after {
 color: var(--as-purple);
}

.as-cs-beforeafter__img {
 width: 100%;
 aspect-ratio: 16 / 10;
 background: var(--white);
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}

.as-cs-beforeafter__img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top;
 border-radius: var(--radius-md);
}

.as-cs-beforeafter__img-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.5rem;
 color: var(--as-border);
}

.as-cs-beforeafter__img-placeholder i {
 font-size: 1.6rem;
}

.as-cs-beforeafter__img-placeholder span {
 font-family: var(--font-body);
 font-size: 0.75rem;
}

.as-cs-beforeafter__caption {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-mid);
 line-height: 1.60;
}

.as-cs-testimonial {
 background: var(--as-black);
 padding: 6rem 2rem;
}

.as-cs-testimonial__inner {
 max-width: 800px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2rem;
 text-align: center;
}

.as-cs-testimonial__icon {
 color: var(--as-purple);
 font-size: 2rem;
 opacity: 0.6;
}

.as-cs-testimonial__quote {
 font-family: var(--font-heading);
 font-style: italic;
 font-size: clamp(1.3rem, 2.5vw, 1.8rem);
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.85);
 margin: 0;
}

.as-cs-testimonial__author {
 display: flex;
 flex-direction: column;
 gap: 0.2rem;
 align-items: center;
}

.as-cs-testimonial__name {
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 600;
 color: #fff;
}

.as-cs-testimonial__role {
 font-family: var(--font-mono);
 font-size: 0.8rem;
 font-weight: 400;
 color: rgba(255, 255, 255, 0.4);
}

.as-cs-testimonial__placeholder {
 border: 2px dashed rgba(255, 255, 255, 0.1);
 border-radius: var(--radius-md);
 padding: 2rem;
 width: 100%;
 text-align: center;
}

.as-cs-testimonial__placeholder p {
 font-family: var(--font-body);
 font-size: 0.82rem;
 color: rgba(255, 255, 255, 0.2);
 margin: 0;
}

.as-cs-page-cta {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-cs-page-cta__inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 1.5rem;
 max-width: 640px;
 margin: 0 auto;
}

.as-cs-page-cta__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
 max-width: 560px;
}

.as-cs-page-cta__headline {
 font-family: var(--font-heading);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-cs-page-cta__body {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-body);
 margin: 0;
}

.as-cs-page-cta__actions {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
}

@media (max-width: 960px) {
 .as-cs-hero__inner,
 .as-cs-challenge__inner {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 }

 .as-cs-hero__right,
 .as-cs-challenge__left {
 position: static;
 }

 .as-cs-stats__inner {
 grid-template-columns: repeat(2, 1fr);
 }

 .as-cs-solution__grid {
 grid-template-columns: 1fr;
 }

 .as-cs-beforeafter__grid {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 480px) {
 .as-cs-hero,
 .as-cs-challenge,
 .as-cs-solution,
 .as-cs-beforeafter,
 .as-cs-testimonial,
 .as-cs-page-cta {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 ABOUT PAGE
 ============================================= */

.as-about-hero {
 background: var(--as-white);
 padding: 2rem 2rem 5rem;
}

.as-about-hero__inner {
 display: grid;
 grid-template-columns: 1fr 420px;
 gap: 6rem;
 align-items: center;
}

.as-about-hero__left {
 display: flex;
 flex-direction: column;
 gap: 32px;
}

.as-about-hero__headline {
 font-family: var(--font-display);
 font-size: clamp(2.6rem, 5vw, 4.4rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 margin: 0;
}

.as-about-hero__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-about-hero__body {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-secondary);
 margin: 0;
}

.as-about-hero__meta {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 padding-top: 0.5rem;
}

.as-about-hero__meta-item {
 display: flex;
 align-items: center;
 gap: 0.7rem;
 font-family: var(--font-body);
 font-size: 0.88rem;
 font-weight: 400;
 color: var(--as-mid);
}

.as-about-hero__meta-item i {
 color: var(--as-purple);
 font-size: 0.9rem;
 width: 16px;
 text-align: center;
}

.as-about-hero__photo {
 width: 100%;
 aspect-ratio: 3 / 4;
 background: var(--white);
 border: 1px solid var(--as-border);
 border-radius: var(--radius-lg);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.8rem;
 color: var(--as-mid);
 overflow: hidden;
}

.as-about-hero__photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: var(--radius-lg);
 display: block;
}

.as-about-hero__photo-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.6rem;
}

.as-about-hero__photo-placeholder i {
 font-size: 2rem;
 color: var(--as-border);
}

.as-about-hero__photo-placeholder span {
 font-family: var(--font-body);
 font-size: 0.78rem;
 color: var(--as-border);
 letter-spacing: 0.04em;
}

@media (min-width: 481px) {
  .as-about-hero {
    padding-top: 8px;
  }

  .as-about-hero__photo {
    max-height: 480px;
  }
}

/* Shared about section eyebrow / headline / body */
.as-about-section-headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-about-section-body {
 font-family: var(--font-body);
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-body);
 margin: 0;
}

/* Paragraph spacing in multi-paragraph sections (e.g. section 2.12 "How I think").
 Adjacent sibling selector fires only when two body paragraphs follow each other,
 leaving single-paragraph uses (sections 2.2, 2.4) unaffected. */
.as-about-section-body + .as-about-section-body {
 margin-top: 1.5rem;
}

/* Background / Work History */
.as-about-background {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-about-background__inner {
 display: grid;
 grid-template-columns: 380px 1fr;
 gap: 6rem;
 align-items: start;
}

.as-about-background__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-about-background__right {
 display: flex;
 flex-direction: column;
 gap: 1px;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.as-about-role {
 background: #fff;
 padding: 32px;
 display: flex;
 gap: 1.4rem;
 align-items: flex-start;
 border-bottom: 1px solid var(--as-border);
 transition: background var(--transition);
}

.as-about-role:last-child {
 border-bottom: none;
}

.as-about-role:hover {
 background: #fafaf8;
}

.as-about-role__icon {
 display: flex;
 flex-shrink: 0;
}

.as-about-role__content {
 display: flex;
 flex-direction: column;
 gap: 0.3rem;
 flex: 1;
}

.as-about-role__header {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 1rem;
 flex-wrap: wrap;
}

.as-about-role__title {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 margin: 0;
}

.as-about-role__period {
 font-family: var(--font-mono);
 font-size: 12.5px;
 font-weight: 400;
 color: var(--as-mid);
 white-space: nowrap;
}

.as-about-role__company {
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 line-height: 1.50;
 color: var(--as-purple);
 margin: 0;
}

.as-about-role__desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 color: var(--as-text-body);
 line-height: 1.60;
 margin: 0.4rem 0 0;
}

/* Why Solo */
.as-about-solo {
 background: var(--as-black);
}

.as-about-solo__inner {
 display: grid;
 grid-template-columns: 1fr 1fr; /* fr, not %  — % + gap overflows the container */
 gap: 96px;
 align-items: start;
}

.as-about-solo__left {
 display: flex;
 flex-direction: column;
 gap: 0; /* spacing comes from each child's own margin below, not a shared gap */
}

.as-about-solo__left .as-eyebrow {
 margin-bottom: 14px;
}

.as-about-solo__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: #fff;
 margin: 0 0 32px;
}

.as-about-solo__body {
 font-family: var(--font-body);
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.75;
 color: rgba(255, 255, 255, 0.55);
 margin: 0 0 24px;
}
.as-about-solo__body + .as-about-solo__body {
 margin-bottom: 0;
}

.as-about-solo__reasons {
 display: flex;
 flex-direction: column;
}

.as-about-solo__reason {
 display: flex;
 gap: 20px;
 padding: 28px 0;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.as-about-solo__reason:first-child {
 padding-top: 0;
 border-top: 0;
}

.as-about-solo__reason i {
 font-size: 30px;
 line-height: 1;
 flex-shrink: 0;
 color: var(--as-purple);
}

.as-about-solo__reason-title {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 margin: 0 0 6px;
}

.as-about-solo__reason-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 margin: 0;
}


/* How I Work */
.as-about-work {
 background: var(--as-white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-about-work__inner {
}

.as-about-work__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-about-work__grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1.5rem;
}

.as-about-work__card {
 background: var(--white);
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 padding: 32px;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 transition: box-shadow var(--transition), transform var(--transition);
}

.as-about-work__card-icon {
 display: flex;
}

.as-about-work__card-title {
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 margin: 0;
}

.as-about-work__card-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 margin: 0;
}

/* Skills */
.as-about-skills {
 background: var(--white);
}

.as-about-skills__inner {
 display: block;
}

.as-about-skills__inner > .as-eyebrow {
 margin-bottom: 14px;
}

.as-about-skills__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0 0 24px;
}

.as-about-skills__intro {
 font-family: var(--font-body);
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.75;
 color: var(--as-text-body);
 max-width: 760px;
 margin: 0 0 56px;
}

.as-about-skills__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
}

.as-about-skills__group {
 padding: 0 32px;
}
.as-about-skills__group:first-child {
 padding-left: 0;
}
.as-about-skills__group:last-child {
 padding-right: 0;
}
.as-about-skills__group:not(:first-child) {
 border-left: 1px solid var(--as-border);
}

.as-about-skills__group i {
 display: block;
 font-size: 32px;
 margin-bottom: 22px;
 color: var(--as-purple);
}

.as-about-skills__group-title {
 font-family: var(--font-display);
 font-size: 24px;
 font-weight: 800;
 line-height: 1.20;
 color: var(--as-black);
 margin: 0 0 18px;
}

.as-about-skills__group-list {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-secondary);
 margin: 0;
}

@media (max-width: 960px) {
 .as-about-skills__grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .as-about-skills__group {
 padding: 0 24px;
 }
 .as-about-skills__group:nth-child(odd) {
 border-left: 0;
 padding-left: 0;
 }
 .as-about-skills__group:nth-child(even) {
 padding-right: 0;
 }
}

@media (max-width: 600px) {
 .as-about-skills__grid {
 grid-template-columns: 1fr;
 gap: 28px;
 }
 .as-about-skills__group:nth-child(odd),
 .as-about-skills__group:nth-child(even) {
 border-left: 0;
 padding: 0;
 }
}

@media (max-width: 960px) {
 .as-about-hero__inner,
 .as-about-background__inner {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 }

 .as-about-solo__inner {
 grid-template-columns: 1fr;
 gap: 2rem;
 }

 .as-about-background__left {
 position: static;
 }

 .as-about-hero__photo {
 max-width: 360px;
 }

 .as-about-work__grid {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 600px) {
 .as-about-hero__photo {
 max-width: 100%;
 }
}

@media (max-width: 480px) {
 .as-about-hero,
 .as-about-background,
 .as-about-solo,
 .as-about-work,
 .as-about-skills {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 SERVICES HUB
 ============================================= */

.as-hub-hero {
 background: var(--as-white);
 padding: 2rem 2rem 5rem;
}

.as-hub-hero__inner {
 display: block;
}

.as-hub-hero__inner > .as-eyebrow {
 margin-bottom: 14px;
}

.as-hub-hero__headline {
 font-family: var(--font-display);
 font-size: clamp(2.6rem, 5vw, 4.2rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 max-width: 820px;
 margin: 0 0 24px;
}

.as-hub-hero__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-hub-hero__desc {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 max-width: 640px;
 margin: 0;
}

/* NEW - .as-hub-bar mirrors .as-contact-bar: always dark by design, no
 white legacy version ever existed - same category as .as-creds /
 .as-contact-bar / .as-cs-testimonial, so the dark background is set
 directly here, unscoped (--liquorice, not --as-black - the old
 pre-system ink token, retired alongside .as-contact-hero__direct).
 Only the 70/74px padding refinement is .as-allsorts-scoped below. */
.as-hub-bar {
 background: var(--liquorice);
}

.as-hub-bar__header {
 margin-bottom: 56px;
}

.as-hub-bar__header .as-eyebrow {
 margin-bottom: 14px;
}

.as-hub-bar__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: #fff;
 margin: 0;
}

.as-hub-bar__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
}

.as-hub-bar__col {
 padding: 0 32px;
}
.as-hub-bar__col:first-child {
 padding-left: 0;
}
.as-hub-bar__col:last-child {
 padding-right: 0;
}
.as-hub-bar__col:not(:first-child) {
 border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.as-hub-bar__col i {
 display: block;
 font-size: 30px;
 margin-bottom: 20px;
 color: var(--as-purple);
}

.as-hub-bar__col-title {
 font-family: var(--font-display);
 font-size: 24px;
 font-weight: 800;
 line-height: 1.20;
 color: #fff;
 margin: 0 0 10px;
}

.as-hub-bar__col-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: rgba(255, 255, 255, 0.55);
 margin: 0;
}

@media (max-width: 960px) {
 .as-hub-bar__grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .as-hub-bar__col {
 padding: 0 24px;
 }
 .as-hub-bar__col:nth-child(odd) {
 border-left: 0;
 padding-left: 0;
 }
 .as-hub-bar__col:nth-child(even) {
 padding-right: 0;
 }
}

@media (max-width: 600px) {
 .as-hub-bar__grid {
 grid-template-columns: 1fr;
 gap: 28px;
 }
 .as-hub-bar__col:nth-child(odd),
 .as-hub-bar__col:nth-child(even) {
 border-left: 0;
 padding: 0;
 }
}


.as-hub-services {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-hub-services__inner {
}

.as-hub-services__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-hub-services__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-hub-services__grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}

.as-hub-card {
 background: #fff;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 transition: box-shadow var(--transition), transform var(--transition);
 text-decoration: none;
 color: inherit;
}

.as-hub-card__top {
 padding: 28px 26px 0;
 display: flex;
 flex-direction: column;
 gap: 0;
 flex-grow: 1;
}

.as-hub-card__icon {
 display: flex;
}

.as-hub-card__tag {
 font-family: var(--font-mono);
 font-size: 11.5px;
 font-weight: 500;
 letter-spacing: var(--ls-label);
 text-transform: uppercase;
 color: var(--as-purple);
 margin: 20px 0 9px;
}

.as-hub-card__title {
 font-family: var(--font-display);
 font-size: 1.55rem;
 font-weight: 400;
 line-height: 1.15;
 letter-spacing: -0.01em;
 color: var(--as-black);
 margin: 0 0 12.8px;
}

.as-hub-card__price {
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 line-height: 1.50;
 color: var(--as-mid);
 margin: 16px 0 0;
}

.as-hub-card__price strong {
 font-family: var(--font-mono);
 font-weight: 500;
 color: var(--as-black);
 font-size: 0.9rem;
}

.as-hub-card__desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 margin: 16px 0 20px;
}

.as-hub-card__divider {
 height: 1px;
 background: var(--as-border);
 margin: 0 26px;
}

.as-hub-card__features {
 padding: 18px 26px 38.4px;
 display: flex;
 flex-direction: column;
 gap: 11px;
 list-style: none;
 margin: 0;
}

.as-hub-card__features li {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-secondary);
}

.as-hub-card__features li i {
 color: var(--as-purple);
 font-size: 12px;
 flex-shrink: 0;
}

.as-hub-card__footer {
 padding: 24px 26px 28px;
 border-top: 1px solid var(--as-border);
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.as-hub-card__link {
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 600;
 color: var(--as-black);
 display: flex;
 align-items: center;
 gap: 0.5rem;
 transition: gap var(--transition), color var(--transition);
}

.as-hub-card:hover .as-hub-card__link {
 color: var(--as-purple);
 gap: 0.8rem;
}

.as-hub-card__link i {
 font-size: 0.8rem;
}

.as-hub-notsure {
 background: var(--as-white);
 padding: var(--as-space-section-cta) var(--as-space-section-side);
}

.as-hub-notsure__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-hub-notsure__tag {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: 100px;
 padding: 0.4rem 0.9rem;
 font-family: var(--font-mono);
 font-size: 11.5px;
 font-weight: 500;
 letter-spacing: var(--ls-label);
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.5);
 width: fit-content;
}

.as-hub-notsure__tag i {
 font-size: 0.7rem;
}

.as-hub-notsure__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 400;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-hub-notsure__body {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-secondary);
 margin: 0;
 max-width: 520px;
}

.as-hub-notsure__actions {
 display: flex;
 flex-direction: column;
 gap: 0.8rem;
 align-items: center;
 flex-shrink: 0;
}

@media (max-width: 960px) {
 .as-hub-services__grid {
 grid-template-columns: 1fr 1fr;
 }

 .as-hub-notsure__actions {
 align-items: flex-start;
 flex-direction: row;
 flex-wrap: wrap;
 }
}

@media (max-width: 640px) {
 .as-hub-services__grid {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 480px) {
 .as-hub-hero,
 .as-hub-bar,
 .as-hub-services,
 .as-hub-notsure {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }

}


/* =============================================
 CASE STUDIES HUB
 ============================================= */

.as-cs-hub-hero {
 background: var(--as-white);
 padding: 2rem 2rem 5rem;
}

.as-cs-hub-hero__inner {
 display: flex;
 flex-direction: column;
 gap: 32px;
}

.as-cs-hub-hero__headline {
 font-family: var(--font-display);
 font-size: clamp(2.6rem, 5vw, 4.2rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 margin: 0;
}

.as-cs-hub-hero__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-cs-hub-hero__desc {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 margin: 0;
}

.as-cs-hub-grid {
 background: var(--white);
}

.as-cs-hub-grid__inner {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}

/* Responsive - grid step-down, card itself stays a single column always */
@media (max-width: 960px) {
 .as-cs-hub-grid__inner {
 grid-template-columns: 1fr 1fr;
 }
}

@media (max-width: 640px) {
 .as-cs-hub-grid__inner {
 grid-template-columns: 1fr;
 }
}

.as-cs-hub-cta {
 background: var(--as-white);
 padding: var(--as-space-section-cta) var(--as-space-section-side);
}

.as-cs-hub-cta__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-cs-hub-cta__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 400;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-cs-hub-cta__body {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-secondary);
 margin: 0;
}

.as-cs-hub-cta__actions {
 display: flex;
 gap: 0.8rem;
 flex-shrink: 0;
 flex-wrap: wrap;
}


@media (max-width: 960px) {
 .as-cs-hub-cta__actions {
 flex-direction: row;
 }
}


@media (max-width: 480px) {
 .as-cs-hub-hero,
 .as-cs-hub-grid,
 .as-cs-hub-cta {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 CONTACT PAGE
 ============================================= */

.as-contact-hero {
 background: var(--as-white);
 padding: 2rem 2rem 5rem;
}

.as-contact-hero__inner {
 display: block;
}

.as-contact-hero__inner > .as-eyebrow {
 margin-bottom: 14px;
}

.as-contact-hero__headline {
 font-family: var(--font-display);
 font-size: clamp(2.6rem, 5vw, 4.2rem);
 font-weight: 800;
 line-height: 1.06;
 letter-spacing: -0.025em;
 color: var(--as-black);
 max-width: 820px;
 margin: 0 0 24px;
}

.as-contact-hero__headline em {
 font-style: italic;
 color: var(--as-purple);
}

.as-contact-hero__intro {
 font-family: var(--font-body);
 font-size: 18px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
 max-width: 640px;
 margin: 0;
}

/* NEW - .as-contact-bar consolidates the old __direct / __location /
 row-list trio into one full-width ink band. Always dark by design, no
 white legacy version ever existed (unlike .as-svc-process / .as-about-
 skills, which were white sections being converted) - same category as
 .as-creds / .as-cs-testimonial, so the dark background is set directly
 here, unscoped, matching that precedent. Only the liquorice/70-74px
 refinement is .as-allsorts-scoped below. */
.as-contact-bar {
 background: var(--as-black);
}

.as-contact-bar__header {
 margin-bottom: 56px;
}

.as-contact-bar__header .as-eyebrow {
 margin-bottom: 14px;
}

.as-contact-bar__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: #fff;
 margin: 0;
}

.as-contact-bar__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 1px;
}

.as-contact-bar__col {
 padding: 0 32px;
}
.as-contact-bar__col:first-child {
 padding-left: 0;
}
.as-contact-bar__col:last-child {
 padding-right: 0;
}
.as-contact-bar__col:not(:first-child) {
 border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.as-contact-bar__col i {
 display: block;
 font-size: 30px;
 margin-bottom: 20px;
 color: var(--as-purple);
}

.as-contact-bar__col-title {
 font-family: var(--font-display);
 font-size: 24px;
 font-weight: 800;
 line-height: 1.20;
 color: #fff;
 margin: 0 0 10px;
}

.as-contact-bar__col-desc {
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: rgba(255, 255, 255, 0.55);
 margin: 0;
}

.as-contact-bar__col-links {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.as-contact-bar__col-links a {
 font-family: var(--font-body);
 font-size: 14.5px;
 font-weight: 400;
 text-decoration: none;
 color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 960px) {
 .as-contact-bar__grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .as-contact-bar__col {
 padding: 0 24px;
 }
 .as-contact-bar__col:nth-child(odd) {
 border-left: 0;
 padding-left: 0;
 }
 .as-contact-bar__col:nth-child(even) {
 padding-right: 0;
 }
}

@media (max-width: 600px) {
 .as-contact-bar__grid {
 grid-template-columns: 1fr;
 gap: 28px;
 }
 .as-contact-bar__col:nth-child(odd),
 .as-contact-bar__col:nth-child(even) {
 border-left: 0;
 padding: 0;
 }
}

.as-contact-form {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-contact-form__inner {
 display: grid;
 grid-template-columns: 380px 1fr;
 gap: 6rem;
 align-items: start;
}

.as-contact-form__left {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.as-contact-form__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-contact-form__desc {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-body);
 margin: 0;
}

.as-contact-form__expects {
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
 margin-top: 0.4rem;
}

.as-contact-form__expect {
 display: flex;
 align-items: center;
 gap: 0.6rem;
 font-family: var(--font-body);
 font-size: 15px;
 font-weight: 400;
 line-height: 1.60;
 color: var(--as-text-body);
}

.as-contact-form__expect i {
 color: var(--as-purple);
 font-size: 0.75rem;
 flex-shrink: 0;
}

.as-cf-wrap {
 font-family: var(--font-body);
 background: #fff;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 padding: 48px;
}

.as-cf-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}

.as-cf-field {
 margin-bottom: 1.2rem;
}

.as-cf-field label {
 display: block;
 font-family: var(--font-mono);
 font-size: 12.5px;
 font-weight: 500;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: var(--as-black);
 margin-bottom: 0.4rem;
}

.as-cf-field input,
.as-cf-field select,
.as-cf-field textarea {
 width: 100%;
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 color: var(--as-black);
 background: #fff;
 border: 1.5px solid var(--as-border);
 border-radius: var(--radius-sm);
 padding: 0.85rem 1rem;
 box-sizing: border-box;
 transition: border-color var(--transition);
 outline: none;
 -webkit-appearance: none;
}

.as-cf-field input:focus,
.as-cf-field select:focus,
.as-cf-field textarea:focus {
 border-color: var(--as-purple);
 background: #fff;
}

.as-cf-field input.as-cf-error,
.as-cf-field select.as-cf-error,
.as-cf-field textarea.as-cf-error {
 border-color: #cc0000;
}

.as-cf-field textarea {
 resize: vertical;
 min-height: 130px;
}

.as-cf-gdpr {
 font-family: var(--font-body);
 font-size: 13px;
 font-weight: 400;
 color: #999;
 line-height: 1.55;
 margin-bottom: 1.4rem;
}

.as-cf-gdpr a {
 color: var(--as-text-body);
 text-decoration: underline;
 text-underline-offset: 2px;
}

.as-cf-submit {
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 500;
 background: var(--ink-900);
 color: #fff;
 border: none;
 border-radius: 100px;
 padding: 0.9rem 2rem;
 cursor: pointer;
 transition: background var(--transition);
 letter-spacing: 0.01em;
 width: 100%;
 box-sizing: border-box;
}

.as-cf-submit:hover {
 background: var(--as-purple);
}

.as-cf-submit:disabled {
 background: #aaa;
 cursor: not-allowed;
}

.as-cf-submit-error {
 display: none;
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 color: #cc0000;
 text-align: center;
 margin-top: 0.8rem;
}

.as-cf-success {
 display: none;
 text-align: center;
 padding: 3rem 1rem;
}

.as-cf-success-icon {
 font-family: var(--font-body);
 font-size: 36px;
 margin-bottom: 1rem;
 color: var(--as-purple);
}

.as-cf-success h3 {
 font-family: var(--font-display);
 font-size: 1.6rem;
 font-weight: 400;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0 0 0.6rem;
}

.as-cf-success p {
 font-family: var(--font-body);
 font-size: 0.9rem;
 font-weight: 400;
 color: var(--as-text-body);
 line-height: 1.65;
 margin: 0;
}

@media (max-width: 960px) {
 .as-contact-form__inner {
 grid-template-columns: 1fr;
 gap: 3.5rem;
 }

 .as-contact-form__left {
 position: static;
 }
}

@media (max-width: 600px) {
 .as-cf-wrap {
 padding: 1.8rem;
 }

 .as-cf-row {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 480px) {
 .as-contact-hero,
 .as-contact-bar,
 .as-contact-form {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }
}


/* =============================================
 LEGAL PAGES — SHARED
 (Privacy Policy, Terms of Service, Cookie Policy)
 ============================================= */

.as-privacy,
.as-tos,
.as-cookie {
 font-family: var(--font-body);
 padding: 80px 0 120px;
 background: var(--as-white);
}

.as-privacy__inner,
.as-tos__inner,
.as-cookie__inner {
 max-width: 760px;
 margin: 0 auto;
 padding: 0 24px;
}

/* Page header */
.as-privacy__header,
.as-tos__header,
.as-cookie__header {
 margin-bottom: 56px;
 padding-bottom: 40px;
 border-bottom: 2px solid var(--as-black);
}

.as-privacy__eyebrow,
.as-tos__eyebrow,
.as-cookie__eyebrow {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 20px;
}

.as-privacy__eyebrow-dot,
.as-tos__eyebrow-dot,
.as-cookie__eyebrow-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--as-black);
 flex-shrink: 0;
}

.as-privacy__header-label,
.as-tos__header-label,
.as-cookie__header-label {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--as-black);
}

.as-privacy__title,
.as-tos__title,
.as-cookie__title {
 font-family: var(--font-heading);
 font-size: clamp(32px, 5vw, 48px);
 font-weight: 800;
 line-height: 1.1;
 color: var(--as-black);
 margin: 0 0 20px;
}

.as-privacy__meta,
.as-tos__meta,
.as-cookie__meta {
 display: flex;
 gap: 24px;
 flex-wrap: wrap;
}

.as-privacy__meta-item,
.as-tos__meta-item,
.as-cookie__meta-item {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--as-text-body);
 display: flex;
 align-items: center;
 gap: 6px;
}

.as-privacy__meta-item i,
.as-tos__meta-item i,
.as-cookie__meta-item i {
 font-size: 13px;
 color: var(--as-black);
}

/* Section blocks */
.as-privacy__section,
.as-tos__section,
.as-cookie__section {
 margin-bottom: 48px;
 padding-bottom: 48px;
 border-bottom: 1px solid #e8e8e8;
}

.as-privacy__section:last-of-type,
.as-tos__section:last-of-type,
.as-cookie__section:last-of-type {
 border-bottom: none;
 margin-bottom: 0;
}

.as-privacy__section-header,
.as-tos__section-header,
.as-cookie__section-header {
 display: flex;
 align-items: flex-start;
 gap: 16px;
 margin-bottom: 20px;
}

.as-privacy__section-number,
.as-tos__section-number,
.as-cookie__section-number {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #999;
 background: #f0f0f0;
 padding: 4px 10px;
 border-radius: 2px;
 white-space: nowrap;
 margin-top: 6px;
 flex-shrink: 0;
}

.as-privacy__section-title,
.as-tos__section-title,
.as-cookie__section-title {
 font-family: var(--font-heading);
 font-size: 20px;
 font-weight: 800;
 color: var(--as-black);
 margin: 0;
 line-height: 1.3;
}

.as-privacy__body,
.as-tos__body,
.as-cookie__body {
 font-family: var(--font-body);
 font-size: 15px;
 line-height: 1.75;
 color: #444;
 margin: 0 0 16px;
}

.as-privacy__body:last-child,
.as-tos__body:last-child,
.as-cookie__body:last-child {
 margin-bottom: 0;
}

.as-privacy__body a,
.as-tos__body a,
.as-cookie__body a {
 color: var(--as-black);
 font-weight: 600;
 text-underline-offset: 3px;
 word-break: break-all;
}

.as-tos__body strong {
 color: var(--as-black);
 font-weight: 600;
}

/* Lists */
.as-privacy__list,
.as-tos__list {
 list-style: none;
 padding: 0;
 margin: 16px 0;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.as-privacy__list li,
.as-tos__list li {
 font-family: var(--font-body);
 font-size: 15px;
 color: #444;
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 10px 16px;
 background: #f8f8f8;
 border-radius: 4px;
 line-height: 1.6;
}

.as-privacy__list li::before,
.as-tos__list li::before {
 content: '';
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--as-black);
 flex-shrink: 0;
 margin-top: 7px;
}

/* Contact callout */
.as-privacy__contact,
.as-tos__contact {
 margin-top: 56px;
 padding: 36px 40px;
 background: var(--as-black);
 color: #fff;
}

.as-privacy__contact-label,
.as-tos__contact-label {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: #aaa;
 margin-bottom: 12px;
}

.as-privacy__contact-title,
.as-tos__contact-title {
 font-family: var(--font-heading);
 font-size: 22px;
 font-weight: 800;
 color: #fff;
 margin: 0 0 16px;
}

.as-privacy__contact-body,
.as-tos__contact-body {
 font-family: var(--font-body);
 font-size: 15px;
 line-height: 1.7;
 color: #ccc;
 margin: 0 0 8px;
}

.as-privacy__contact-body a,
.as-tos__contact-body a {
 color: #fff;
 font-weight: 600;
 text-underline-offset: 3px;
}

/* Footer notes */
.as-privacy__footer-note,
.as-tos__disclaimer,
.as-cookie__footer-note {
 margin-top: 40px;
 font-family: var(--font-mono);
 font-size: 11px;
 color: #aaa;
 text-align: center;
 line-height: 1.7;
}

.as-privacy__footer-note a,
.as-tos__disclaimer a,
.as-cookie__footer-note a {
 color: #888;
}


/* =============================================
 LEGAL PAGES — PRIVACY SPECIFIC
 ============================================= */

.as-privacy__intro,
.as-tos__intro {
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.75;
 color: #333;
 margin-bottom: 48px;
 padding: 28px 32px;
 background: #f5f5f5;
 border-left: 3px solid var(--as-black);
}

.as-privacy__intro a {
 color: var(--as-black);
 font-weight: 600;
 text-underline-offset: 3px;
}

.as-privacy__notice {
 font-family: var(--font-body);
 font-size: 14px;
 line-height: 1.7;
 color: var(--as-text-secondary);
 margin-bottom: 56px;
 padding: 20px 24px;
 border: 1px solid #ddd;
 border-radius: 4px;
}


/* =============================================
 LEGAL PAGES — TOS SPECIFIC
 ============================================= */

.as-tos__callout {
 margin: 20px 0;
 padding: 20px 24px;
 border: 1px solid #ddd;
 border-radius: 4px;
 background: #fafafa;
 font-family: var(--font-body);
 font-size: 14px;
 line-height: 1.7;
 color: var(--as-text-secondary);
}

.as-tos__callout strong {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--as-black);
 display: block;
 margin-bottom: 6px;
}


/* =============================================
 LEGAL PAGES — COOKIE SPECIFIC
 ============================================= */

.as-cookie__table-wrapper {
 margin-top: 20px;
 border: 1px solid #e8e8e8;
 border-radius: 4px;
 overflow: hidden;
}

.as-cookie__preferences-wrap {
 margin: 20px 0 24px;
}

a.cky-banner-element.as-cookie__btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-mono) !important;
 font-size: 12px !important;
 font-weight: 500 !important;
 letter-spacing: 0.08em !important;
 text-transform: uppercase !important;
 color: var(--as-black) !important;
 background: #f0f0f0 !important;
 border: 1px solid #ccc !important;
 border-radius: 2px !important;
 padding: 10px 20px !important;
 cursor: pointer;
 text-decoration: none;
 transition: background 0.15s ease, border-color 0.15s ease;
}

a.cky-banner-element.as-cookie__btn:hover {
 background: var(--as-black) !important;
 color: #fff !important;
 border-color: var(--as-black) !important;
}

.as-cookie__browser-list {
 list-style: none;
 padding: 0;
 margin: 20px 0 16px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.as-cookie__browser-list li {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px 16px;
 background: #f8f8f8;
 border-radius: 4px;
 font-family: var(--font-body);
 font-size: 14px;
 color: #444;
}

.as-cookie__browser-list li strong {
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 600;
 color: var(--as-black);
 min-width: 100px;
 flex-shrink: 0;
 padding-top: 1px;
}

.as-cookie__browser-list li a {
 color: var(--as-black);
 text-underline-offset: 3px;
 word-break: break-all;
 line-height: 1.5;
}

/* Legal pages — responsive */
@media (max-width: 600px) {
 .as-privacy,
 .as-tos,
 .as-cookie {
 padding: 48px 0 80px;
 }

 .as-privacy__inner,
 .as-tos__inner,
 .as-cookie__inner {
 padding: 0 16px;
 }

 .as-privacy__intro,
 .as-tos__intro {
 padding: 20px;
 }

 .as-privacy__contact,
 .as-tos__contact {
 padding: 28px 24px;
 }

 .as-privacy__meta,
 .as-tos__meta,
 .as-cookie__meta {
 flex-direction: column;
 gap: 10px;
 }

 .as-cookie__browser-list li {
 flex-direction: column;
 gap: 4px;
 }

 .as-cookie__browser-list li strong {
 min-width: unset;
 }
}

/* =============================================
 BREADCRUMBS
 ============================================= */

.as-breadcrumb {
 background: var(--as-white);
 padding: 1.5rem 0 0 0;
}

.as-breadcrumb__inner {
 max-width: var(--max-width);
 margin: 0 auto;
 display: flex;
 align-items: center;
 gap: .5rem;
 flex-wrap: wrap;
 justify-content: center;
}

.as-breadcrumb__item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-mono);
 font-size: 0.72rem;
 font-weight: 500;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--as-mid);
}

.as-breadcrumb__item a {
 color: var(--as-mid);
 text-decoration: none;
 transition: color var(--transition);
}

.as-breadcrumb__item a:hover {
 color: var(--as-black);
}

.as-breadcrumb__item--current {
 color: var(--as-black);
}

.as-breadcrumb__separator {
 color: #000;
 font-size: 0.6rem;
}

@media (max-width: 1280px) {
 .as-breadcrumb {
 padding: 2.5rem 1.2rem 1rem;
 }
}

/* =============================================================
 FOOTER — Redesign
 ============================================================= */

.as-footer {
 background-color: var(--liquorice);
 padding: 64px 40px 48px;
}

.as-footer__inner {
 max-width: 1160px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 align-items: start;
}

/* Brand column */
.as-footer__logo {
 display: block;
 margin-bottom: 20px;
}

.as-footer__tagline {
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 20px;
 line-height: 1.35;
 color: #fff;
 margin: 0 0 16px;
 letter-spacing: 0.01em;
}

.as-footer__desc {
 font-family: var(--font-body);
 font-size: 0.875rem;
 line-height: 1.7;
 color: rgba(255,255,255,0.55);
 margin: 0 0 32px;
}

.as-footer__legal {
 font-family: var(--font-mono);
 font-size: 0.75rem;
 line-height: 1.6;
 color: rgba(255,255,255,0.3);
 margin: 0;
}

/* Links column */
.as-footer__links {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
}

.as-footer__link-heading {
 font-family: var(--font-mono);
 font-weight: 500;
 font-size: 12.5px;
 text-transform: uppercase;
 letter-spacing: var(--ls-label);
 color: rgba(255,255,255,0.35);
 margin: 0 0 16px;
}

.as-footer__link-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.as-footer__link-list li {
 margin-bottom: 10px;
}

.as-footer__link-list a {
 font-family: var(--font-body);
 font-size: 0.9rem;
 color: rgba(255,255,255,0.7);
 text-decoration: none;
 transition: color 0.2s ease;
}

.as-footer__link-list a:hover {
 color: #fff;
}

/* Mobile */
@media (max-width: 767px) {
 .as-footer {
 padding: 48px 24px 40px;
 }

 .as-footer__inner {
 grid-template-columns: 1fr;
 gap: 40px;
 }

 .as-footer__links {
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 }
}

/* === FOOTER BOTTOM BAR === */
.as-footer__bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
 max-width: 1160px;
 margin: 0 auto;
 padding: 1.5rem 0;
}

.as-footer__backtotop {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 font-family: var(--font-display);
 font-weight: 800;
 font-style: normal;
 font-size: 1.6rem;
 color: var(--as-white);
 text-decoration: none;
 transition: opacity 0.2s ease;
 line-height: 1;
}

.as-footer__backtotop:hover {
 opacity: 0.6;
}

.as-footer__backtotop i {
 font-size: 1.6rem;
}

@media (max-width: 767px) {
 .as-footer__bottom {
 flex-direction: column;
 align-items: flex-end;
 gap: 1rem;
 }

 .as-footer__backtotop {
 padding-top: 30px;
 }

 .as-footer__legal {
 align-self: flex-start;
 }
}

/* =============================================
 FAQ
 ============================================= */

.as-faq {
 background: var(--white);
 padding: var(--as-space-section) var(--as-space-section-side);
}

.as-faq__inner {
 max-width: var(--max-width);
 margin: 0 auto;
}

.as-faq__header {
 display: flex;
 flex-direction: column;
 gap: 16px;
 margin-bottom: 56px;
}

.as-faq__headline {
 font-family: var(--font-display);
 font-size: clamp(2rem, 3.5vw, 3rem);
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--as-black);
 margin: 0;
}

.as-faq__list {
 display: flex;
 flex-direction: column;
 border: 1px solid var(--as-border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.as-faq__item {
 background: var(--as-white);
 border-bottom: 1px solid var(--as-border);
}

.as-faq__item:last-child {
 border-bottom: none;
}

.as-faq__question {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 2rem;
 padding: 24px 32px;
 font-family: var(--font-body);
 font-size: 17px;
 font-weight: 600;
 line-height: 1.40;
 color: var(--as-black);
 cursor: pointer;
 list-style: none;
}

.as-faq__question::-webkit-details-marker {
 display: none;
}

.as-faq__question::after {
 content: '\002B';
 font-size: 1.2rem;
 font-weight: 400;
 color: var(--as-purple);
 flex-shrink: 0;
 transition: transform var(--transition);
}

.as-faq__item[open] .as-faq__question::after {
 content: '\2212';
}

.as-faq__answer {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.70;
 color: var(--as-text-secondary);
 padding: 0 2rem 1.6rem;
 margin: 0;
}

@media (max-width: 480px) {
 .as-faq {
 padding: var(--as-space-section-mobile) var(--as-space-section-side-mobile);
 }

 .as-faq__question {
 padding: 1.4rem 1.4rem;
 }

 .as-faq__answer {
 padding: 0 1.4rem 1.4rem;
 }
}

/* =============================================
 MEDIUM SCREENS (13-inch / 1280px)
 ============================================= */

@media (max-width: 1280px) {

 /* Section padding: 7rem → 4rem */
 .as-positioning,
 .as-services,
 .as-casestudy,
 .as-cta,
 .as-svc-included,
 .as-svc-process,
 .as-svc-bottom,
 .as-about-background,
 .as-about-solo,
 .as-about-work,
 .as-about-skills,
 .as-hub-services,
 .as-cs-hub-grid,
 .as-cs-challenge,
 .as-cs-solution,
 .as-cs-beforeafter,
 .as-cs-page-cta,
 .as-contact-form {
 padding-top: 4rem;
 padding-bottom: 4rem;
 }

 /* Hero sections with asymmetric padding */
 .as-svc-hero,
 .as-about-hero,
 .as-hub-hero,
 .as-cs-hub-hero,
 .as-cs-hero,
 .as-contact-hero {
 padding-top: 2rem;
 padding-bottom: 2rem;
 }

 /* Internal two-column gaps: 6rem → 3.5rem */
 .as-positioning__inner,
 .as-cta__inner,
 .as-svc-hero__inner,
 .as-about-hero__inner,
 .as-about-background__inner,
 .as-cs-hero__inner,
 .as-cs-challenge__inner,
 .as-contact-form__inner {
 gap: 3.5rem;
 }

 /* Section header bottom margin: 3.5rem → 2rem */
 .as-services__header,
 .as-svc-included__header,
 .as-svc-process__header,
 .as-about-work__header,
 .as-hub-services__header,
 .as-cs-solution__header,
 .as-cs-beforeafter__header {
 margin-bottom: 2rem;
 }
}

/* =============================================
 SHORT VIEWPORTS (MacBook Air M2 / max-height: 1000px)
 Targets wide viewports with constrained height — height-based
 so the 1470px width on MacBook Air M2 does not trigger this.
 min-width guard keeps mobile landscape unaffected.
 ============================================= */

@media (max-height: 1000px) and (min-width: 1025px) {

 /* Part A: Shrink top hero image ~35% so H1 sits above the fold.
 aspect-ratio 2880/600 renders ~306px at 1470px wide; capped to 200px. */
 .as-hero--home,
 .as-hero--services,
 .as-hero--foundation-build,
 .as-hero--site-refresh,
 .as-hero--ongoing-support {
 max-height: 200px;
 }

 /* Part B: Reduce hero content bottom padding from 5rem to 3rem.
 This tightens the .as-hero-combined section height and pulls
 the H1 higher on the page. The 7rem gap above the content is
 Squarespace's native section wrapper padding — not in this file. */
 .as-hero-combined__content {
 padding-bottom: 3rem;
 }

}

/* ============================================
 9. HERO IMAGES
 ============================================ */

.as-hero {
 display: block;
 width: 100%;
 line-height: 0; /* removes phantom gap below image */
 overflow: hidden;
}

.as-hero__img {
 display: block;
 width: 100%;
 height: auto;
 max-width: 100%;
}

.as-hero {
 position: relative;
 width: 100%;
 border-top: 5px solid #000;
 background: transparent;
 overflow: hidden;
}

/* Per-page heights */
.as-hero--home { aspect-ratio: 2880 / 300; }
.as-hero--home-high-mid { aspect-ratio: 2880 / 300; background-color: var(--white);}
.as-hero--home-low-mid { aspect-ratio: 2880 / 300; background-color: var(--white);}
.as-hero--home-footer { aspect-ratio: 2880 / 200; border-top: none; border-bottom: 5px solid var(--liquorice); }
.as-hero--about { aspect-ratio: 2880 / 216; }
.as-hero--services { aspect-ratio: 2880 / 300; }
.as-hero--foundation-build { aspect-ratio: 2880 / 255; }
.as-hero--site-refresh { aspect-ratio: 2880 / 255; }
.as-hero--ongoing-support { aspect-ratio: 2880 / 255; }
.as-hero--contact { aspect-ratio: 2880 / 300; }
.as-hero--case-studies { aspect-ratio: 2880 / 300; }
.as-hero--case-study-terracotta { aspect-ratio: 2880 / 300; }
.as-hero--case-study-ddr { aspect-ratio: 2880 / 300; }
.as-hero--case-study-austin-space { aspect-ratio: 2880 / 300; }
.as-hero--policy-privacy { aspect-ratio: 2880 / 300; }
.as-hero--policy-tos { aspect-ratio: 2880 / 300; }
.as-hero--policy-cookies { aspect-ratio: 2880 / 300; }
.as-hero--one-page { aspect-ratio: 2880 / 300; }

.as-hero__img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Per-page clip and crop */
.as-hero--home .as-hero__img { clip-path: url(#wave-clip-home); object-position: center 33%; }
.as-hero--home-high-mid .as-hero__img { clip-path: url(#wave-clip-home-high-mid); object-position: 0 100%; }
.as-hero--home-low-mid .as-hero__img { clip-path: url(#wave-clip-home-low-mid); object-position: 0 95%; }
.as-hero--home-footer .as-hero__img { clip-path: url(#wave-clip-home-footer); object-position: center 100%; }
.as-hero--about .as-hero__img { clip-path: url(#wave-clip-about); object-position: center 95%; }
.as-hero--services .as-hero__img { clip-path: url(#wave-clip-services); object-position: center 5%; }
.as-hero--foundation-build .as-hero__img { clip-path: url(#wave-clip-foundation-build); object-position: center 87%; }
.as-hero--site-refresh .as-hero__img { clip-path: url(#wave-clip-site-refresh); object-position: center 11%; }
.as-hero--ongoing-support .as-hero__img { clip-path: url(#wave-clip-ongoing-support); object-position: center 80%; }
.as-hero--contact .as-hero__img { clip-path: url(#wave-clip-contact); object-position: center 18%; }
.as-hero--case-studies .as-hero__img { clip-path: url(#wave-clip-case-studies); object-position: center 75%; }
.as-hero--case-study-terracotta .as-hero__img { clip-path: url(#wave-clip-case-study-terracotta); object-position: center 22%; }
.as-hero--case-study-ddr .as-hero__img { clip-path: url(#wave-clip-case-study-ddr); object-position: center 70%; }
.as-hero--case-study-austin-space .as-hero__img { clip-path: url(#wave-clip-case-study-austin-space); object-position: center 28%; }
.as-hero--policy-privacy .as-hero__img { clip-path: url(#wave-clip-policy-privacy); object-position: center 65%; }
.as-hero--policy-tos .as-hero__img { clip-path: url(#wave-clip-policy-tos); object-position: center 33%; }
.as-hero--policy-cookies .as-hero__img { clip-path: url(#wave-clip-policy-cookies); object-position: center 60%; }
.as-hero--one-page .as-hero__img { clip-path: url(#wave-clip-one-page); object-position: center 20%; }

/* Stroke overlay sits on top of the whole hero */
.as-hero__stroke {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 1;
}

@media (min-width: 768px) {
 .fe-block-yui_3_17_2_1_1777471147825_1655 .sqs-block {
 justify-content: flex-start !important;
 position: relative !important;
 }
 .fe-block-yui_3_17_2_1_1777471147825_1655 .sqs-block-content {
 position: static !important;
 }
 .fe-block-yui_3_17_2_1_1777471147825_1655 .as-hero--home-footer {
 position: absolute !important;
 bottom: 0 !important;
 left: 0 !important;
 right: 0 !important;
 }
}

#footer-sections {
 padding-top: 0 !important;
}

/* === ALLSORTS TOKENS — added 2026-07-09 ===
 Source: AUSTIN_SPACE Design System (tokens + textures), pasted into Squarespace
 Design > Custom CSS. @import stripped — fonts load via a <link> in Header Code
 Injection instead (Phase 1a).

 NOTE ON SCOPE: --font-display and --radius-sm/md/lg collide by NAME with tokens
 already declared in the DESIGN TOKENS :root block above (line 11) and already
 consumed unscoped, site-wide, today (--font-display: 34 uses, --radius-sm: 8,
 --radius-md: 22, --radius-lg: 5). Because :root declarations cascade by source
 order regardless of selector, redeclaring them here on :root would silently
 swap headings/radii on every live page the moment this lands — not gated by
 .as-allsorts. So those 4 declarations are deliberately left OUT of the :root
 block below and instead live in the .as-allsorts override block further down,
 where they only take effect on pages carrying that class. Everything else
 below is a genuinely new token name — no collision, safe globally as-is.
 --font-body and --font-mono also collide by name but resolve to the identical
 font-family already (IBM Plex Sans / IBM Plex Mono), so redeclaring them is a
 harmless no-op — left in place for fidelity to the source file. */

/* ============================================================
 tokens/colors.css
 ============================================================ */

/* AUSTIN_SPACE — Color tokens
 The UI is a clean monochrome system — near-black ink, white, and greys —
 with a liquorice-allsorts candy accent (pink = the action, bead blue = the
 emphasis; sunshine/tangerine as support). The neon spectrum lives inside the
 cosmic illustration bands (and a few dark-surface accents). */
:root {
 /* ---- Neutral scale (the workhorse UI palette) ---- */
 --ink-900: #101014; /* primary text / black pill buttons */
 --ink-800: #1c1c22; /* black stats band surface */
 --grey-700: #3f3f46;
 --grey-600: #52525b; /* strong secondary text */
 --grey-500: #6b6b72; /* body copy */
 --grey-400: #9a9aa2; /* muted / captions */
 --grey-300: #c9c9cf;
 --grey-200: #e9e9ec; /* borders / dividers */
 --grey-100: #f2f2f4;
 --grey-050: #f7f7f8; /* card / inset surface */
 --white: #ffffff;

 /* ---- Violet (LEGACY — no longer the UI accent; kept for back-compat) ---- */
 --violet-700: #5b21b6; /* accent hover / deep */
 --violet-600: #6d28d9; /* primary accent */
 --violet-500: #7c3aed;
 --violet-400: #7c5cff; /* eyebrow dot / lighter accent */
 --violet-050: #f1ecfe; /* accent tint surface (partner pill icon) */

 /* ---- Cosmic / neon spectrum (illustration + dark-surface accents) ---- */
 --void-900: #120935; /* deepest space */
 --void-800: #1b0e4b; /* deep indigo (illustration) */
 --void-700: #2a1873;
 --magenta-500: #ff2e9a;
 --magenta-600: #e01f84;
 --pink-400: #ff6db3;
 --purple-500: #a94fe0;
 --purple-600: #8f37c9;
 --teal-500: #24d6be;
 --teal-600: #14b6a0;
 --teal-700: #0f9384; /* accent hover (deep teal) */
 --teal-050: #e6faf6; /* accent tint surface */
 --blue-500: #37b6ff;
 --blue-600: #1f95e0;
 --blue-700: #1578bd; /* emphasis hover */
 --blue-050: #e8f5ff; /* emphasis tint surface */
 --orange-500: #ff7a33;
 --orange-600: #ef631c;
 --orange-700: #cf5311; /* accent hover (deep coral) */
 --orange-050: #fff0e6; /* accent tint surface */
 --yellow-400: #ffd23f; /* icons on the black stats band */

 /* ---- Candy / liquorice-allsorts (committed accent palette) ---- */
 --candy-pink: #ec4d97; /* primary accent — the action */
 --candy-pink-deep: #d23c83; /* accent hover */
 --candy-pink-lt: #f26cae; /* luminous pink for dark surfaces */
 --candy-pink-050: #fdeaf3; /* accent tint surface */
 --sunshine: #f4cf3b;
 --tangerine: #f07d2e;
 --bead-blue: #4f7cc9; /* emphasis */
 --bead-blue-lt: #7fa3dd; /* luminous emphasis for dark surfaces */
 --liquorice: #17171a; /* candy black */

 /* legacy paper aliases (kept for back-compat) */
 --paper-000: var(--white);
 --paper-050: var(--grey-050);
 --paper-100: var(--grey-100);
 --paper-200: var(--grey-200);

 /* ---- Semantic aliases ---- */
 --surface-canvas: var(--white); /* pages are white */
 --surface-inset: var(--grey-050); /* stat cards, insets */
 --surface-card: var(--white);
 --surface-card-alt: var(--grey-050);
 --surface-ink: var(--ink-800); /* black bands / dark cards */
 --surface-cosmos: var(--void-800); /* behind illustration bands */

 --text-strong: var(--ink-900);
 --text-body: var(--grey-500);
 --text-muted: var(--grey-400);
 --text-invert: var(--white);
 --text-invert-muted: #a9a9b4;

 --border-subtle: var(--grey-200);
 --border-strong: var(--ink-900); /* the illustration's black outline */

 /* Split accent: PINK = the action · BEAD BLUE = the emphasis (liquorice allsorts). */
 --accent: var(--candy-pink); /* links, accent buttons, focus, eyebrow text */
 --accent-hover: var(--candy-pink-deep);
 --accent-tint: var(--candy-pink-050);
 --accent-dot: var(--bead-blue); /* eyebrow dot — the bead-blue emphasis */
 --accent-lum: var(--candy-pink-lt); /* luminous pink for dark surfaces */
 /* bead blue is the reserved emphasis (key stat, badges, hover pops) */
 --accent-secondary: var(--bead-blue);
 --accent-secondary-lum: var(--bead-blue-lt);
 --accent-tertiary: var(--sunshine);

 --btn-primary: var(--ink-900);
 --btn-primary-hover: #26262e;

 --focus-ring: var(--candy-pink);

 /* ---- Status ---- */
 --success: var(--teal-600);
 --info: var(--blue-600);
 --warning: var(--yellow-400);
 --danger: var(--magenta-600);

 /* ---- Link ---- */
 --link: var(--candy-pink);
 --link-hover: var(--candy-pink-deep);
}

/* ============================================================
 tokens/typography.css
 ============================================================ */

/* AUSTIN_SPACE — Typography tokens
 DM Serif Display carries the display voice (high-contrast serif); DM Sans
 keeps body warm & legible; DM Mono tags labels & code. (Brand fonts, loaded via fonts.css.)
 --font-display, --font-body and --font-mono are deliberately NOT redeclared here —
 all three collide by name with tokens already live, unscoped, in the original
 DESIGN TOKENS :root (line 11: --font-body was 'IBM Plex Sans', 104 uses;
 --font-mono was 'IBM Plex Mono', 23 uses). Redeclaring DM Sans/DM Mono here
 would silently swap body and label fonts site-wide on every live page. All
 three live only inside the .as-allsorts override block below. */
:root {
 /* ---- Weights ---- */
 --fw-regular: 400; /* @kind font */
 --fw-medium: 500; /* @kind font */
 --fw-semibold:600; /* @kind font */
 --fw-bold: 700; /* @kind font */
 --fw-display: 900; /* @kind font */ /* Fraunces has real weights - was 400 for DM Serif Display (single-weight face); every .as-allsorts rule below that sets font-weight on a var(--font-display) element now reads this token instead of hardcoding 400, so this is the one place to retune if the face changes again */

 /* ---- Type scale (fluid-ish, px) ---- */
 --fs-display: 76px; /* hero */
 --fs-h1: 54px;
 --fs-h2: 40px;
 --fs-h3: 28px;
 --fs-h4: 21px;
 --fs-body-lg: 19px;
 --fs-body: 16px;
 --fs-sm: 14px;
 --fs-label: 12px; /* mono, uppercase */

 /* ---- Line heights ---- */
 --lh-tight: 1.05; /* @kind font */ /* was 1.02 for DM Serif Display 400; Fraunces at weight 900 sits heavier and 1.02 risked clipping descenders (g/y/p) - loosened slightly. Only consumer sitewide is the Fraunces heading set below - tune live if any face still clips */
 --lh-heading: 1.1; /* @kind font */
 --lh-snug: 1.35; /* @kind font */
 --lh-body: 1.6; /* @kind font */

 /* ---- Letter spacing ---- */
 --ls-display: -0.03em;
 --ls-heading: -0.01em; /* was -0.02em for DM Serif Display 400; Fraunces at weight 900 is visually denser at the same tracking, so loosened one notch - only consumer sitewide is the Fraunces heading set below, tune live */
 --ls-body: 0em;
 --ls-label: 0.16em; /* wide, uppercase mono labels */
}

/* ============================================================
 tokens/spacing.css
 ============================================================ */

/* AUSTIN_SPACE — Spacing & layout tokens
 Base unit is 4px. Generous, chunky rhythm to match the bold outlines. */
:root {
 --space-0: 0;
 --space-1: 4px;
 --space-2: 8px;
 --space-3: 12px;
 --space-4: 16px;
 --space-5: 20px;
 --space-6: 24px;
 --space-8: 32px;
 --space-10: 40px;
 --space-12: 48px;
 --space-16: 64px;
 --space-20: 80px;
 --space-24: 96px;
 --space-32: 128px;

 /* ---- Container widths ---- */
 --container-sm: 640px;
 --container-md: 880px;
 --container-lg: 1120px;
 --container-xl: 1320px;

 /* ---- Section rhythm ---- */
 --gutter: 24px;
 --section-y: 96px;
}

/* ============================================================
 tokens/effects.css
 ============================================================ */

/* AUSTIN_SPACE — Effects: borders, radii, shadows, motion
 Two shadow systems: soft --shadow-* for floating overlays, and hard offset
 --pop-* (ink, no blur) for the chunky button/card treatment that echoes the
 illustration's heavy black linework and collapses on press.
 --radius-sm/md/lg are deliberately NOT redeclared here — see scope note at the
 top of this section. They're set only inside the .as-allsorts override block
 below; --radius-xl and --radius-pill are new names, safe globally. */
:root {
 /* ---- Border widths ---- */
 --bw-hair: 1px;
 --bw: 2px; /* control / card outline */
 --bw-bold: 2px;
 --bw-xl: 6px; /* the illustration's black wave outline */

 /* ---- Corner radii ---- */
 --radius-xl: 22px; /* large panels / stat card */
 --radius-pill: 999px; /* buttons, tags, badges */

 /* ---- Soft shadows: for floating/overlay surfaces (dialog, toast, menus) ---- */
 --shadow-xs: 0 1px 2px rgba(16, 16, 20, 0.05);
 --shadow-sm: 0 2px 8px rgba(16, 16, 20, 0.06);
 --shadow-md: 0 8px 24px rgba(16, 16, 20, 0.08);
 --shadow-lg: 0 20px 48px rgba(16, 16, 20, 0.12);

 /* ---- Hard offset "pop" shadows: the chunky control/card treatment ---- */
 /* ink-colored, no blur; echo the illustration's black linework. Collapse on press. */
 --pop-xs: 2px 2px 0 0 var(--ink-900);
 --pop-sm: 3px 3px 0 0 var(--ink-900);
 --pop-md: 5px 5px 0 0 var(--ink-900);
 --pop-lg: 7px 7px 0 0 var(--ink-900);
 --press-shift: 3px; /* @kind other */

 /* glow reserved for neon elements on dark surfaces only */
 --glow-teal: 0 0 24px -4px var(--teal-500);
 --glow-magenta: 0 0 28px -4px var(--magenta-500);

 /* ---- Motion ---- */
 --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
 --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
 --dur-fast: 120ms; /* @kind other */
 --dur: 200ms; /* @kind other */
 --dur-slow: 340ms; /* @kind other */
}

/* ---- .as-allsorts override block ----
 The 6 declarations that collide by name with the original DESIGN TOKENS :root
 (line 11). Scoped to .as-allsorts so they only resolve on pages carrying that
 class; every other page keeps its current Exo 2 / IBM Plex Sans / IBM Plex Mono
 headings and 6/14/28px radii untouched. This is also exactly the gating
 Phase 2's component layer assumes (type binds to var(--font-display) /
 var(--font-body) / var(--font-mono) expecting DM Serif Display / DM Sans /
 DM Mono under .as-allsorts). */
.as-allsorts {
 /* Fraunces replaces DM Serif Display as the display face - DM Serif Display
    kept as the fallback link in the stack (not dropped) in case Fraunces
    fails to load; loaded at opsz 9..144 wght 900 via the Google Fonts link
    in Header Code Injection. */
 --font-display: "Fraunces", "DM Serif Display", Georgia, "Times New Roman", serif;
 --font-body: "DM Sans", system-ui, sans-serif;
 --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --as-pad-band: 80px;
 --as-pad-ink: 72px;
 --as-pad-cta-top: 80px;
 --as-pad-side: 32px;
 --as-clear-wave: 224px;
 --as-clear-wave-banner: 128px;
}

/* ============================================================
 tokens/textures.css
 ============================================================ */

/* AUSTIN_SPACE — Textured surfaces (liquorice-allsorts)
 Nonpareil speckle (hundreds & thousands), the layered "sandwich", and sugar-matte
 fondant. Utility classes — pair with a `--bw` ink border + `--pop-*` offset shadow
 for the chunky candy treatment. Colours come from the candy tokens in colors.css. */

/* --- Nonpareil speckle: multi-colour beads over a candy base --- */
.surface-speckle-blue {
 background-color: var(--bead-blue);
 background-image:
 radial-gradient(circle, #fff 0 1.1px, transparent 1.6px),
 radial-gradient(circle, var(--candy-pink-lt) 0 1px, transparent 1.5px),
 radial-gradient(circle, var(--sunshine) 0 1px, transparent 1.5px),
 radial-gradient(circle, #fff 0 1px, transparent 1.5px);
 background-size: 9px 9px, 11px 11px, 13px 13px, 7px 7px;
 background-position: 0 0, 4px 6px, 7px 2px, 2px 5px;
}
.surface-speckle-pink {
 background-color: var(--candy-pink);
 background-image:
 radial-gradient(circle, #fff 0 1.1px, transparent 1.6px),
 radial-gradient(circle, var(--sunshine) 0 1px, transparent 1.5px),
 radial-gradient(circle, var(--bead-blue-lt) 0 1px, transparent 1.5px),
 radial-gradient(circle, #fff 0 1px, transparent 1.5px);
 background-size: 9px 9px, 12px 12px, 10px 10px, 7px 7px;
 background-position: 0 0, 5px 3px, 2px 7px, 4px 1px;
}

/* Legibility helper: white label text over a speckle/candy surface */
.on-speckle { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* === ALLSORTS COMPONENTS — contact page — added 2026-07-09 === */

/* Eyebrow / mono label (shared: hero, form, FAQ) */
.as-allsorts .as-eyebrow__dot { width: 10px; height: 10px; background: var(--candy-pink); }
.as-allsorts .as-label { color: var(--bead-blue); font-weight: 500; font-size: 12.5px; letter-spacing: var(--ls-label); }

/* Breadcrumb — explicit remap off legacy --as-mid/--as-black so it doesn't
 just inherit whatever DM Mono + stale colour tokens happen to cascade to */
.as-allsorts .as-breadcrumb__item,
.as-allsorts .as-breadcrumb__item a { color: var(--grey-400); }
.as-allsorts .as-breadcrumb__item a:hover,
.as-allsorts .as-breadcrumb__item--current { color: var(--ink-900); }

.as-allsorts .as-breadcrumb__inner {
 justify-content: flex-start;
}

.as-allsorts .as-breadcrumb__separator {
 font-family: var(--font-mono);
 font-size: 11.5px;
 color: #c4c4cc;
 padding: 0 4px;
 line-height: 1;
}

/* Display headings: Fraunces 900 (was DM Serif Display's only weight, 400) */
.as-allsorts .as-contact-hero__headline,
.as-allsorts .as-contact-form__headline,
.as-allsorts .as-faq__headline,
.as-allsorts .as-cf-success h3,
.as-allsorts .as-hub-hero__headline {
 font-weight: var(--fw-display);
 letter-spacing: var(--ls-heading);
 color: var(--ink-900);
}
.as-allsorts .as-contact-hero__headline em { font-style: normal; color: var(--candy-pink); }

/* Body copy: DM Sans loaded at 400-700, drop the old 300 to avoid weight-matching oddities */
.as-allsorts .as-contact-hero__intro,
.as-allsorts .as-contact-form__desc,
.as-allsorts .as-faq__answer,
.as-allsorts .as-cf-success p,
.as-allsorts .as-hub-hero__desc,
.as-allsorts .as-row-item__desc,
.as-allsorts .as-contact-form__expect {
 font-weight: 400;
 color: var(--grey-500);
}
.as-allsorts .as-row-item__title { color: var(--ink-900); }

/* Row-item icons -> bare duotone glyphs, matches .as-services__card-icon.
   Chip removed: width/height/border/radius/background all dropped (was a
   48px chip with candy fill, no !important to beat). */
.as-allsorts .as-row-item__icon {
 width: auto;
 height: auto;
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
}
.as-allsorts .as-row-item__icon i {
 font-size: 39px;
 line-height: 1;
 --fa-secondary-opacity: 1;
}

/* Duo colour rotation modifiers - pink/blue/tangerine/sunshine. Explicit
   classes on the icon <i>, not nth-child: nth-child counts every sibling,
   so a topper inserted as the container's first child shifts the whole
   rotation by one slot (Phase 5b regression, fixed here). Shared by
   .as-row-item__icon and .as-about-role__icon. */
.as-allsorts .as-icon--pink {
 --fa-primary-color: #ec4d97;
 --fa-secondary-color: #f6aed0;
 color: #ec4d97;
}
.as-allsorts .as-icon--blue {
 --fa-primary-color: #4f7cc9;
 --fa-secondary-color: #afc4e6;
 color: #4f7cc9;
}
.as-allsorts .as-icon--tangerine {
 --fa-primary-color: #f07d2e;
 --fa-secondary-color: #f8c4a0;
 color: #f07d2e;
}
/* SUNSHINE IS A DELIBERATE EXCEPTION to the derived duotone ratio.
   The other three pairs are: locked palette hex on the shape, fill mixed 54.2 percent
   toward white. That collapses on yellow, because #f4cf3b is already near-white in value
   and the derived fill left the icon washed out on a white card.
   So the SHAPE is darkened toward amber (#d69d1c) and the FILL is left alone.
   Approved live 14 July 2026 against a #deab24 alternative. Do not restore #f4cf3b here.
   The palette token --sunshine is still #f4cf3b and is still correct everywhere else,
   including every fa-slab-press icon on the ink bands. */
.as-allsorts .as-icon--sunshine {
 --fa-primary-color: #d69d1c;
 --fa-secondary-color: #fae9a6;
 color: #d69d1c;
}

/* Form "expects" pink-check list */
.as-allsorts .as-contact-form__expect i { color: var(--candy-pink); }

/* Form field focus — ring, not just border colour */
.as-allsorts .as-cf-field input:focus,
.as-allsorts .as-cf-field select:focus,
.as-allsorts .as-cf-field textarea:focus {
 border-color: var(--candy-pink);
 box-shadow: 0 0 0 4px var(--candy-pink-050);
 outline: none;
 background: #fff;
}

/* Submit button — chunky pop, ink (end of the journey, not an invitation -
   pink would compete with "Get in touch"). Background stays ink-900 on
   hover, matching the no-colour-change-on-hover pattern every other button
   in this file uses; only shadow+transform move. */
.as-allsorts .as-cf-submit {
 font-weight: 700;
 font-size: 16px;
 letter-spacing: normal;
 padding: 15px 34px;
 border-radius: 999px;
 background: var(--ink-900);
 border: 2px solid var(--ink-900);
 box-shadow: var(--pop-md);
 transition: transform var(--dur-fast) var(--ease-pop),
 box-shadow var(--dur-fast) var(--ease-pop);
}
.as-allsorts .as-cf-submit:hover {
 transform: translate(-1px, -1px);
 box-shadow: var(--pop-lg);
}
.as-allsorts .as-cf-submit:active {
 transform: translate(var(--press-shift), var(--press-shift));
 box-shadow: 0 0 0 0 var(--ink-900);
}
.as-allsorts .as-cf-submit:disabled {
 background: var(--grey-300);
 border-color: var(--grey-300);
 box-shadow: none;
 transform: none;
}

.as-allsorts .as-cf-success-icon { color: var(--candy-pink); }

/* FAQ marker */
.as-allsorts .as-faq__question::after { color: var(--candy-pink); font-weight: 400; }

/* === ALLSORTS CONTAINER TREATMENT — contact page — added 2026-07-09 ===
 Outer containers get chunky ink border + pop-shadow; inner row/item
 dividers stay hairline (remapped off legacy --as-border to --grey-200). */
.as-allsorts .as-row-list,
.as-allsorts .as-faq__list,
.as-allsorts .as-cf-wrap {
 border: var(--bw) solid var(--ink-900);
 border-radius: var(--radius-lg);
 box-shadow: var(--pop-md);
}

.as-allsorts .as-row-item,
.as-allsorts .as-faq__item {
 border-bottom-color: var(--grey-200);
}

/* === ALLSORTS SECTION BACKGROUNDS — contact page — added 2026-07-09 ===
 Phase 1 white-out (2026-07-12): both .as-contact-form and .as-faq now go
 to white at the base rule directly - these overrides were fighting a
 --coconut / --as-off-white base that no longer exists, so removed. */

/* Tighter section rhythm - base .as-contact-form and .as-faq are both
   var(--as-space-section) (7rem/112px) top and bottom. Desktop-only,
   guarded below; mobile (<=480px) falls back to the existing unscoped
   64px mobile token rule. .as-faq is a single shared rule used by every
   page that includes this stylesheet, so this one change covers all of
   them, not just contact. */
@media (min-width: 481px) {
  .as-allsorts .as-contact-form,
  .as-allsorts .as-faq {
    padding-top: var(--as-pad-band);
    padding-bottom: var(--as-pad-band);
  }
}

/* === ALLSORTS DISPLAY HEADINGS — full-weight render, reference line-height ===
   .as-cf-success h3 added here (was missing before the Fraunces pass - it
   sets font-family: var(--font-display) too, css:cf-success h3 base rule,
   so it needs the same line-height/smoothing fix as the other three). */
.as-allsorts .as-contact-hero__headline,
.as-allsorts .as-contact-form__headline,
.as-allsorts .as-faq__headline,
.as-allsorts .as-cf-success h3,
.as-allsorts .as-hub-hero__headline {
 line-height: var(--lh-tight);
 -webkit-font-smoothing: auto;
 -moz-osx-font-smoothing: auto;
}

/* Hero H1 fixed size - can't add font-size to the shared headline group
   above (.as-contact-form__headline / .as-faq__headline / .as-cf-success h3
   all share that selector and must not pick up a 64px override). Standalone
   rule instead. */
.as-allsorts .as-contact-hero__headline {
  font-size: 64px;
}

/* H3 token (24px/900/lh1.20) for .as-cf-success h3 - can't join the shared
   group above either, since that group sets lh-tight (1.05) for its other
   3 H2-tier members and h3 needs a different line-height. Standalone rule,
   same pattern as the H1 override just above. */
.as-allsorts .as-cf-success h3 {
  font-size: 24px;
  line-height: 1.20;
}

/* Same fixed-size treatment for the services hub - brings .as-hub-hero__headline
   up to the contact spec (was font-weight 800 / clamp-sized / no max-width,
   the only 800 H1 on the site). H1 normalisation across the other two H1
   specs (service pages, about) is logged as a separate future item, not
   done here. */
.as-allsorts .as-hub-hero__headline {
  font-size: 64px;
}

/* ============================================================
   PHASE 3 ITEM 4 - contact page: .as-contact-hero splits into a plain
   white intro + a new .as-contact-bar ink band. Locked to .as-creds /
   .as-svc-process / .as-about-solo / .as-about-skills - same object,
   different job. Consolidates 3 separate boxes (.as-row-list trust
   signals, .as-contact-hero__direct, .as-contact-hero__location) that
   were fighting each other in white space into one full-width band.
   Breaks the last unbroken white run on the site (2521px, contact).

   .as-contact-form and .as-faq are NOT part of this change. Zero
   markup or CSS edits inside either - every asCf* id, name attribute,
   and select value survives verbatim.
   ============================================================ */
.as-allsorts .as-contact-bar {
  background-color: var(--liquorice);
}

/* Padding extracted to its own min-width:481px rule (was unguarded on the
   block above). Background/color/etc stay unguarded on purpose - they are
   correct at every width; only the desktop-scale padding is guarded. */
@media (min-width: 481px) {
.as-allsorts .as-contact-bar {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}

.as-allsorts .as-contact-bar .as-label {
  color: var(--sunshine);
}

.as-allsorts .as-contact-bar__headline {
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-contact-bar__col-title {
  font-weight: var(--fw-display);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-contact-bar__col-desc,
.as-allsorts .as-contact-bar__col-links a {
  font-weight: 400;
  color: var(--grey-400);
}

/* Column 4: email is the primary action - pure white, not the muted grey
   every other link/desc in this band uses. Phone stays muted grey so email
   reads as primary, phone as secondary. Charles was explicit: white, not
   pink. */
.as-allsorts .as-contact-bar__col:nth-child(4) .as-contact-bar__col-links a:first-child {
  color: var(--white);
}

/* Icon rotation: fa-slab-press (dark band), same 4-stop luminous sequence
   as .as-creds / .as-svc-process / .as-about-solo / .as-about-skills. */
.as-allsorts .as-contact-bar__col:nth-child(1) i { color: var(--candy-pink-lt); }
.as-allsorts .as-contact-bar__col:nth-child(2) i { color: var(--bead-blue-lt); }
.as-allsorts .as-contact-bar__col:nth-child(3) i { color: var(--tangerine); }
.as-allsorts .as-contact-bar__col:nth-child(4) i { color: var(--sunshine); }

/* === ALLSORTS COMPONENTS — about page — added 2026-07-09 === */

/* Display headings: Fraunces 900, tight line-height, full-weight render.
 .as-about-solo__headline is white-on-black — smoothing/line-height/weight
 fixed, colour left untouched (would vanish on black otherwise). */
.as-allsorts .as-about-hero__headline,
.as-allsorts .as-about-section-headline {
 font-weight: var(--fw-display);
 line-height: var(--lh-tight);
 letter-spacing: var(--ls-heading);
 color: var(--ink-900);
 -webkit-font-smoothing: auto;
 -moz-osx-font-smoothing: auto;
}
.as-allsorts .as-about-hero__headline em { font-style: normal; color: var(--candy-pink); }

/* H1 normalisation, 12 July 2026 - font-size/max-width can't join the
   shared display-heading group above (.as-about-section-headline shares
   that selector and must not pick up an 820px cap). Standalone rule,
   same pattern as the hub/contact fixed-size split at css:6452/:6461. */
.as-allsorts .as-about-hero__headline {
  font-size: clamp(2.6rem, 5vw, 3.5rem);
  max-width: 820px;
}

.as-allsorts .as-about-solo__headline {
 font-weight: var(--fw-display);
 line-height: var(--lh-tight);
 -webkit-font-smoothing: auto;
 -moz-osx-font-smoothing: auto;
}

/* Body copy: DM Sans 400, remapped off legacy greys */
.as-allsorts .as-about-hero__body,
.as-allsorts .as-about-section-body,
.as-allsorts .as-about-hero__meta-item,
.as-allsorts .as-about-role__desc,
.as-allsorts .as-about-work__card-desc {
 font-weight: 400;
 color: var(--grey-500);
}
/* .as-about-solo__body colour now DOES change - #b4b4bc, the same value
 the homepage .as-casestudy__desc uses on ink (css:7620ish), not left at
 the legacy rgba(255,255,255,0.55) any more. */
.as-allsorts .as-about-solo__body {
 font-weight: 400;
 font-size: 16px;
 color: #b4b4bc;
}

.as-allsorts .as-about-role__title,
.as-allsorts .as-about-work__card-title { color: var(--ink-900); }
.as-allsorts .as-about-role__period { color: var(--grey-400); }
.as-allsorts .as-about-role__company { color: var(--bead-blue); }

/* Icons: plain inline (bead-blue) vs candy-pink checklist vs candy chips */
.as-allsorts .as-about-hero__meta-item i { color: var(--bead-blue); }

/* Role icons -> bare duotone glyph, matches the homepage row-item precedent
 (Phase 2, 12 July 2026). Chip removed. Base rule (css:398-409) guards
 background/border-radius/width/height/font-size/color/justify-content/
 align-items with !important, so every one of those still needs !important
 here too or the override silently loses. Bare glyph sized to occupy the
 space the 40px chip did, scaled down from the 52px card-icon treatment in
 the same ratio the row-item migration used (48px chip -> 39px glyph,
 ~0.81x): 40px * 0.81 ~ 32px. */
.as-allsorts .as-about-role__icon {
 width: auto !important;
 height: auto !important;
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 font-size: 32px !important;
 color: inherit !important;
 justify-content: center !important;
 align-items: center !important;
}
.as-allsorts .as-about-role__icon i {
 font-size: 32px;
 line-height: 1;
 --fa-secondary-opacity: 1;
}

.as-allsorts .as-about-work__card-icon {
 width: auto !important;
 height: auto !important;
 background: transparent !important;
 border: 0 !important;
 border-radius: 0 !important;
 font-size: 52px !important;
 color: inherit !important;
 justify-content: flex-start !important;
 align-self: flex-start !important;
 margin-bottom: 0;
}
.as-allsorts .as-about-work__card-icon i {
 font-size: 52px;
 line-height: 1;
 --fa-secondary-opacity: 1;
}

/* About-role rotation converted to .as-icon--* modifier classes (see
   .as-row-item__icon block above) - was nth-child, broken by the topper
   insertion. .as-about-work__card below is unaffected (not a topper
   host) and keeps its nth-child rotation as-is. */

.as-allsorts .as-about-work__grid .as-about-work__card:nth-child(1) .as-about-work__card-icon i {
 --fa-primary-color: #ec4d97;
 --fa-secondary-color: #f6aed0;
 color: #ec4d97;
}
.as-allsorts .as-about-work__grid .as-about-work__card:nth-child(2) .as-about-work__card-icon i {
 --fa-primary-color: #4f7cc9;
 --fa-secondary-color: #afc4e6;
 color: #4f7cc9;
}
.as-allsorts .as-about-work__grid .as-about-work__card:nth-child(3) .as-about-work__card-icon i {
 --fa-primary-color: #f07d2e;
 --fa-secondary-color: #f8c4a0;
 color: #f07d2e;
}
/* Duotone sunshine, always on white — SHAPE darkened per the .as-icon--sunshine exception above. */
.as-allsorts .as-about-work__grid .as-about-work__card:nth-child(4) .as-about-work__card-icon i {
 --fa-primary-color: #d69d1c;
 --fa-secondary-color: #fae9a6;
 color: #d69d1c;
}

/* Container treatment: light cards get ink border + pop-shadow + radius-lg;
 dark/solid card gets shadow+radius only (border would be invisible on black);
 .as-row-list--dark is excluded — already dark-safe translucent border, an
 ink border or pop-shadow would be as invisible there as on a solid black box */
.as-allsorts .as-about-background__right,
.as-allsorts .as-about-work__card {
 border: var(--bw) solid var(--ink-900);
 border-radius: var(--radius-lg);
 box-shadow: var(--pop-md);
}

/* .as-about-work__card topper - host is padded (2.2rem, css:3106) and was
   overflow:visible. Nothing in the card relies on overflowing (no negative
   margins, no absolute-positioned children beyond icon/title/desc), and
   the pop-shadow above paints outside the border box regardless of
   overflow, so it is unaffected. Icon rotation (css:5932-5951) keys off
   the card's own nth-child position in .as-about-work__grid, not off
   anything inside the card, so this insertion does not shift it. */
.as-allsorts .as-about-work__card {
 overflow: hidden;
}
.as-allsorts .as-about-work__card .as-topper {
 margin: -2.2rem -2.2rem 16px;
}

/* Inner hairline divider, remapped off legacy --as-border */
.as-allsorts .as-about-role { border-bottom-color: var(--grey-200); }

/* Phase 1 white-out: .as-about-work__card /
 .as-about-background / .as-about-skills all go to white at their base
 rules directly now - the overrides that used to force it here (or force
 coconut, in .as-about-skills' case) are gone. */

/* Tighter section rhythm - base .as-about-* sections are all
   var(--as-space-section) (7rem/112px) top and bottom. Desktop-only,
   guarded below; mobile (<=480px) falls back to the existing unscoped
   64px mobile token rule. */
@media (min-width: 481px) {
  .as-allsorts .as-about-background,
  .as-allsorts .as-about-solo,
  .as-allsorts .as-about-work,
  .as-allsorts .as-about-skills {
    padding-top: var(--as-pad-band);
    padding-bottom: var(--as-pad-band);
  }
}

/* ============================================================
   PHASE 3 ITEM 3 - about page: .as-about-skills becomes the second
   editorial ink band. Locked to .as-creds / .as-svc-process / the
   .as-about-solo rebuild - same object, different job. Second break in
   the 2633px unbroken white run left after Item 2.

   Unlike .as-svc-process / .as-about-solo, this component's BASE (pre-
   allsorts) tier sits on white with dark text - it is being converted
   TO an ink band for the first time here, not already dark pre-redesign.
   So every text/icon colour below is set explicitly, not just weight/
   line-height/smoothing - there is no white-on-black base to inherit
   from.

   Must land AFTER the 84px section-rhythm rule above - equal
   specificity, so file order decides the winner. Padding here
   overrides that rule intentionally; do not add !important.
   ============================================================ */
.as-allsorts .as-about-skills {
  background-color: var(--liquorice);
}

/* Padding extracted to its own min-width:481px rule (was unguarded on the
   block above). Background/color/etc stay unguarded on purpose - they are
   correct at every width; only the desktop-scale padding is guarded. */
@media (min-width: 481px) {
.as-allsorts .as-about-skills {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}

.as-allsorts .as-about-skills .as-label {
  color: var(--sunshine);
}

.as-allsorts .as-about-skills__headline {
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  color: var(--white);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-about-skills__intro {
  font-weight: 400;
  font-size: 16px;
  color: #b4b4bc;
}

/* Vertical column dividers only - no horizontal hairlines under the
   group titles (Charles: "no horizontal hairlines"). */
.as-allsorts .as-about-skills__group {
  border-left-color: rgba(255, 255, 255, 0.12);
}

/* Group titles: Fraunces 900, same role as the big numerals in .as-creds,
   just words instead of digits. DM Mono was tried and rejected - read as
   a label, not a heading. No border-bottom - that lived on the base rule
   pre-redesign and is dropped entirely, not overridden here. */
.as-allsorts .as-about-skills__group-title {
  font-weight: var(--fw-display);
  color: var(--white);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-about-skills__group-list {
  font-weight: 400;
  line-height: 1.60;
  color: var(--grey-400);
}

/* Icon rotation: fa-slab-press (verified present - see the tofu note at
   the HTML markup), same 4-stop luminous sequence as .as-creds /
   .as-svc-process / .as-about-solo. */
.as-allsorts .as-about-skills__group:nth-child(1) i { color: var(--candy-pink-lt); }
.as-allsorts .as-about-skills__group:nth-child(2) i { color: var(--bead-blue-lt); }
.as-allsorts .as-about-skills__group:nth-child(3) i { color: var(--tangerine); }
.as-allsorts .as-about-skills__group:nth-child(4) i { color: var(--sunshine); }

/* ============================================================
   PHASE 3 ITEM 2 - about page: .as-about-solo rebuild (Option A).
   Locked to .as-creds / .as-svc-process - same ink band, same job.
   Fixes a live contrast bug: the old .as-row-list--dark variant this
   section used to run on computed near-black text on a near-black
   band (.as-row-item__title / __desc never got re-coloured for dark
   surfaces). Rebuilt off dedicated .as-about-solo__reason* classes
   instead - .as-row-list--dark was deleted entirely in the Phase 4
   dead-code pass.

   Must land AFTER the 84px section-rhythm rule above - equal
   specificity, so file order decides the winner. Padding here
   overrides that rule intentionally; do not add !important.
   ============================================================ */
.as-allsorts .as-about-solo {
  background-color: var(--liquorice);
}

/* Padding extracted to its own min-width:481px rule (was unguarded on the
   block above). Background/color/etc stay unguarded on purpose - they are
   correct at every width; only the desktop-scale padding is guarded. */
@media (min-width: 481px) {
.as-allsorts .as-about-solo {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}

/* Eyebrow label goes sunshine on ink, matching .as-creds / .as-svc-process.
   Dot is NOT touched here - it stays candy-pink via the general
   .as-allsorts .as-eyebrow__dot rule now that the two legacy !important
   overrides forcing it to sunshine (css:372, css:6431 pre-removal) are
   gone. Verified live: the dot is pink on every surface sitewide, ink
   bands included - only the label switches blue -> sunshine on ink. */
.as-allsorts .as-about-solo .as-label {
  color: var(--sunshine);
}

.as-allsorts .as-about-solo__reason-title { color: var(--white); }
.as-allsorts .as-about-solo__reason-desc  { color: var(--grey-400); }

/* Icon rotation: fa-slab-press (not fa-slab-duo) - dark band, duotone's
   secondary layer disappears on ink. Same 4-stop luminous sequence as
   .as-creds / .as-svc-process. */
.as-allsorts .as-about-solo__reason:nth-child(1) i { color: var(--candy-pink-lt); }
.as-allsorts .as-about-solo__reason:nth-child(2) i { color: var(--bead-blue-lt); }
.as-allsorts .as-about-solo__reason:nth-child(3) i { color: var(--tangerine); }
.as-allsorts .as-about-solo__reason:nth-child(4) i { color: var(--sunshine); }

/* === ALLSORTS COMPONENTS - home page - added 2026-07-09 === */

/* Display headings: Fraunces 900 (was DM Serif Display's only weight, 400).
Full render fix (weight, line-height, letter-spacing, smoothing) on the
5 confirmed section headings; colour goes to ink-900 across the board - none
of these five sit on a dark band. */
.as-allsorts .as-hero-combined__headline,
.as-allsorts .as-positioning__headline,
.as-allsorts .as-services__headline,
.as-allsorts .as-cta__headline {
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--ink-900);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.as-allsorts .as-positioning__headline em,
.as-allsorts .as-cta__headline em {
  font-style: normal;
  color: var(--candy-pink);
}

/* By the Numbers heading - same render fix, white text preserved (dark band) */
.as-allsorts .as-creds__headline {
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: #fff;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.as-allsorts .as-eyebrow--on-dark .as-label {
  color: var(--sunshine);
}
/* Wrapper-level restate, same colour, same reasoning. The rule above targets
   .as-label directly (3 classes), which beats the global .as-allsorts .as-label
   rule (2 classes, color: bead-blue) on specificity regardless of source order,
   so it should already be the one winning. This targets .as-eyebrow--on-dark
   itself in case something is reading the wrapper's own color rather than the
   label span's. Harmless either way: .as-label always sets its own explicit
   color, so it never inherits from this wrapper. Dot is untouched by both
   (uses background, not color) and stays candy-pink via the global dot rule. */
.as-allsorts .as-creds .as-eyebrow--on-dark {
  color: var(--sunshine);
}

/* Other var(--font-display) elements on the page - not full headings, but
Fraunces at 900 needs the same weight bump here too. Weight + line-height +
smoothing only - the white-on-dark numerals (creds/casestudy) and the
casestudy client name keep their existing colour. */
.as-allsorts .as-creds__number,
.as-allsorts .as-casestudy__client {
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* Title set in DM Sans, not DM Serif Display - base rule (css:859-868) has
   no !important on any property, so this wins on source order alone. */
.as-allsorts .as-services__card-title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink-900);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Tag/eyebrow spacing, per reference .svc margins */
.as-allsorts .as-services__card-tag {
  margin: 20px 0 9px;
}

/* Price spacing - top gap only; the gap before the description now comes
   from the description's own top margin (see .as-services__card-desc below),
   not from this element's bottom margin. */
.as-allsorts .as-services__card-price {
  margin: 16px 0 0;
}

/* Tighter description copy, per reference .svc spec */
.as-allsorts .as-services__card-desc {
  font-size: 15px;
  line-height: 1.60;
  margin: 16px 0 20px;
}

/* Checklist spacing, per reference .svc spec */
.as-allsorts .as-services__card-features {
  padding-top: 18px;
  gap: 11px;
}

/* Gap above "Learn more" - card-cta keeps margin-top: auto (base css:927,
   pushes the CTA to the card bottom regardless of description length);
   the padding-top above the link text stays at the reference .svc's 24px.
   border-top removed - reference has only ONE divider per card (above the
   checklist, css:894-903), not a second one here. Spacing is unchanged,
   only the hairline itself is gone. */
.as-allsorts .as-services__card-cta {
  padding-top: 24px;
  border-top: none;
}

/* "Learn more" - bold, per reference .svc .more */
.as-allsorts .as-services__card-link {
  font-weight: 600;
  font-size: 14px;
}

/* Body copy: DM Sans 400, remapped off legacy greys. Dark-card copy
(casestudy client-desc / stat-label) is already muted-white and correct -
left untouched. */
.as-allsorts .as-hero-combined__subline,
.as-allsorts .as-positioning__body,
.as-allsorts .as-services__subline,
.as-allsorts .as-services__card-desc,
.as-allsorts .as-services__card-features li,
.as-allsorts .as-cta__body {
  font-weight: 400;
  color: var(--grey-500);
}
.as-allsorts .as-creds__text {
  font-weight: 400;
  color: #b7b7bf;
}

/* Phase 1 white-out: .as-positioning's background and border-bottom are
 both handled at the base rule now (var(--white), no border) - this used
 to force coconut + suppress the base border-bottom, both now redundant. */
@media (min-width: 481px) {
  .as-allsorts .as-positioning {
    padding-top: var(--as-pad-band);
    padding-bottom: var(--as-pad-band);
  }
}

/* Tighter section rhythm - base .as-services is var(--as-space-section)
   (7rem/112px) top and bottom. Desktop-only values guarded below; mobile
   (<=480px) falls back to the unscoped 64px mobile token rhythm.
   Top uses --as-pad-band (80px), same token every other white section
   uses coming off an ink band (see .as-about-*, .as-contact-form/.as-faq
   above) - this gives the "WHAT I DO" eyebrow proper clearance below
   .as-backstory instead of sitting flush against it. Paired with
   .as-backstory's own bottom padding (--as-pad-ink, 72px, css:8517-8519),
   the two together total 152px, matching every other ink-to-white gap
   on this page. */
@media (min-width: 481px) {
  .as-allsorts .as-services {
    padding-top: var(--as-pad-band);
    padding-bottom: 96px;
  }
}

/* ============================================
   HOMEPAGE CASE STUDY - editorial black band
   Single study, 2fr/1fr, whole band is a link.
   Sibling of .as-creds (ink bg, Fraunces, eyebrow).
   ============================================ */

.as-allsorts .as-casestudy {
  display: block;
  background: var(--liquorice);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.18s ease;
  overflow-x: hidden;
}

/* Padding extracted to its own min-width:481px rule (was unguarded on the
   block above). Background/color/etc stay unguarded on purpose - they are
   correct at every width; only the desktop-scale padding is guarded. */
@media (min-width: 481px) {
.as-allsorts .as-casestudy {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}

.as-allsorts .as-casestudy:hover {
  background: #1d1d22;
}

.as-allsorts .as-casestudy__inner {
  display: block;
}

.as-allsorts .as-casestudy__client {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  margin: 10px 0 20px;
  color: #ffffff;
}

.as-allsorts .as-casestudy__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.70;
  color: #b4b4bc;
  margin: 0 0 24px;
  max-width: 58ch;
}

.as-allsorts .as-casestudy__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  margin: 0 0 12px;
  padding-left: 22px;
  border-left: 3px solid #f26cae;
  color: #ffffff;
  max-width: 56ch;
}

.as-allsorts .as-casestudy__attribution {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.50;
  color: #8a8a94;
  margin: 0 0 26px;
  padding-left: 25px;
}

.as-allsorts .as-casestudy__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
}

/* Image zone: overlapping device pair, desktop + phone.
   Shadow-only separation, no border by design. */

.as-allsorts .as-casestudy__imgs {
  position: relative;
  height: 260px;
  margin-top: 40px;
}

.as-allsorts .as-casestudy__card {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0e0e11;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  transition: transform 0.35s ease;
}

.as-allsorts .as-casestudy__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.as-allsorts .as-casestudy__card--desktop {
  aspect-ratio: 16 / 10;
  width: 96%;
  top: 0;
  left: 0;
  transform: rotate(-3deg);
  z-index: 1;
}

.as-allsorts .as-casestudy__card--desktop img {
  object-position: top center;
}

.as-allsorts .as-casestudy__card--phone {
  aspect-ratio: 9 / 17;
  width: 38%;
  bottom: -6px;
  right: -8%;
  transform: rotate(5deg);
  z-index: 2;
}

.as-allsorts .as-casestudy__card--phone img {
  object-position: top left;
}

.as-allsorts .as-casestudy:hover .as-casestudy__card--desktop {
  transform: rotate(-4.5deg) translateY(-6px);
}

.as-allsorts .as-casestudy:hover .as-casestudy__card--phone {
  transform: rotate(7deg) translateY(-8px);
}

/* Desktop: 2fr/1fr side by side */
@media (min-width: 481px) {

  .as-allsorts .as-casestudy__inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .as-allsorts .as-casestudy__imgs {
    height: 340px;
    margin-top: 0;
  }

}

.as-allsorts .as-creds,
.as-allsorts .as-creds__item {
  background-color: var(--liquorice);
}

/* By the Numbers polish - locked as the canonical dark-band pattern (Why Solo
syncs to this next). Section padding bumped for breathing room; item padding
goes horizontal-only (0 vertical) since the column-divider borders now do
the separating job, and 30px each side doubles as the section's own left/
right gutter - the leftmost/rightmost items carry it since .as-creds itself
goes flush (0 horizontal). Mobile keeps its own padding, restated below at
equal specificity so this doesn't silently override it under 480px. */
/* Padding extracted to its own min-width:481px rule (was unguarded above). */
@media (min-width: 481px) {
.as-allsorts .as-creds {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}
.as-allsorts .as-creds__item {
  padding: 0 30px;
}
.as-allsorts .as-creds__item:not(:first-child) {
  border-left: var(--bw-hair) solid rgba(255, 255, 255, 0.14);
}
@media (max-width: 480px) {
  .as-allsorts .as-creds__item {
    padding: 1.5rem 1.2rem;
  }
}

/* By the Numbers icons - plain coloured outline glyphs, no chips (this is the
canonical dark-band-points pattern; About's Why Solo syncs to it later).
Beats the legacy yellow (css:374-378, !important) the same way the about
overrides above beat their guarded legacy properties. Rotation: pink -> blue
-> tangerine -> sunshine, luminous -lt variants where they exist (dark ground). */
.as-allsorts .as-creds__item:nth-child(1) .as-creds__icon { color: var(--candy-pink-lt) !important; }
.as-allsorts .as-creds__item:nth-child(2) .as-creds__icon { color: var(--bead-blue-lt) !important; }
.as-allsorts .as-creds__item:nth-child(3) .as-creds__icon { color: var(--tangerine) !important; }
.as-allsorts .as-creds__item:nth-child(4) .as-creds__icon { color: var(--sunshine) !important; }

/* Services cards - chunky container + candy icon chips, off the legacy
purple (css:398-411 guards background/radius/width/height/size/colour with
!important on .as-services__card-icon - every one of those needs
!important here too, same technique as as-about-role__icon/
as-about-work__card-icon above). Tags keep the pink/blue/tangerine
text-colour rotation (unrelated legacy purple, no !important guard) -
deliberately NOT synced to the icon fill's sunshine on card 3, since flat
sunshine text on white is barely legible; tangerine reads fine. */
/* Card fill is pure white at its own base rule (Phase 1 white-out) - no
   override needed here. */
.as-allsorts .as-services__card {
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-md);
  overflow: hidden;
  padding: 28px 26px;
}
/* Topper. A lid on a box. Only ever goes on a white card with a 2px ink
   border, 16px radius and overflow hidden. Never on a full-bleed band.
   Size and border only. Any bleed is declared by the host, because it
   depends on the host's padding.
   No width declaration on purpose - width:100% resolves against the
   padding box, so on a padded host it falls short of the border box and
   the negative-margin bleed never reaches the edge. auto stretches to
   fill the flex column AND absorbs the negative margins correctly. */
.as-allsorts .as-topper {
  height: 14px;
  border-bottom: var(--bw) solid var(--ink-900);
}

/* Solid fills. */
.as-allsorts .as-topper--pink      { background: var(--candy-pink); }
.as-allsorts .as-topper--blue      { background: var(--bead-blue); }
.as-allsorts .as-topper--tangerine { background: var(--tangerine); }
.as-allsorts .as-topper--sunshine  { background: var(--sunshine); }

/* Variant 1. The allsort seen from above. Liquorice in slot 2 is the
   whole point: without the ink break it is just a rainbow. */
.as-allsorts .as-topper--allsorts {
  background-image: linear-gradient(90deg,
    #ec4d97 0%,  #ec4d97 25%,
    #17171a 25%, #17171a 50%,
    #f4cf3b 50%, #f4cf3b 75%,
    #4f7cc9 75%, #4f7cc9 100%);
}

/* Variant 2. The same allsort in cross-section, top to bottom.
   This is .surface-sandwich-yellow with the coconut band swapped to
   white. It is the only place tangerine enters the topper system. */
.as-allsorts .as-topper--sandwich {
  background-image: linear-gradient(180deg,
    #f4cf3b 0%,  #f4cf3b 22%,
    #17171a 22%, #17171a 36%,
    #ffffff 36%, #ffffff 64%,
    #17171a 64%, #17171a 78%,
    #f07d2e 78%, #f07d2e 100%);
}

/* Layered allsort, pink fondant. */
.as-allsorts .as-topper--sandwich-pink {
  background-image: linear-gradient(180deg,
    #ffffff 0%,  #ffffff 22%,
    #17171a 22%, #17171a 36%,
    #ec4d97 36%, #ec4d97 64%,
    #17171a 64%, #17171a 78%,
    #ffffff 78%, #ffffff 100%);
}

/* Layered allsort, blue fondant. */
.as-allsorts .as-topper--sandwich-blue {
  background-image: linear-gradient(180deg,
    #4f7cc9 0%,  #4f7cc9 22%,
    #17171a 22%, #17171a 36%,
    #ffffff 36%, #ffffff 64%,
    #17171a 64%, #17171a 78%,
    #4f7cc9 78%, #4f7cc9 100%);
}

/* The plug. A liquorice tube with a fondant core, in cross-section.
   Ink dominant on purpose. */
.as-allsorts .as-topper--plug-sunshine {
  background-image: linear-gradient(180deg,
    #17171a 0%,  #17171a 30%,
    #f4cf3b 30%, #f4cf3b 70%,
    #17171a 70%, #17171a 100%);
}

/* The blue speckle fill is not a modifier. It stays as the existing
   .surface-speckle-blue utility applied alongside .as-topper in the
   markup, exactly as it works on the homepage's card 2. */

/* Homepage service card - bleeds the topper to the card edges via
   negative margin. Margin matches the card's own padding (28px 26px,
   set above), clipped to the card's rounded corners by the
   overflow:hidden above. Bottom margin restores the gap before the
   icon, so nothing below the topper shifts. */
.as-allsorts .as-services__card .as-topper {
  margin: -28px -26px 28px;
}

/* Service-page pricing box and the about-page background list both use
   gap: 1px between rows (css:1457, css:2919). Cancel it so the topper's
   ink border-bottom sits flush against the first row instead of leaving
   a 1px sliver of the row's own top edge showing through. */
.as-allsorts .as-svc-pricing .as-topper,
.as-allsorts .as-about-background__right .as-topper {
  margin-bottom: -1px;
}
/* Bare duotone "Lucky Charms" glyph - replaces the candy chip box above.
   Neutralises every guarded chip property (width/height/radius/font-size/
   color were !important on the old rule; background per-card was
   !important too) with matching !important so this wins regardless of
   source order. Colour now lives on the <i> itself via --fa-primary-color/
   --fa-secondary-color (duotone), not on this wrapper. */
.as-allsorts .as-services__card-icon {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 52px;
  color: inherit;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-bottom: 8px;
}
.as-allsorts .as-services__card:nth-child(1) .as-services__card-icon,
.as-allsorts .as-services__card:nth-child(2) .as-services__card-icon,
.as-allsorts .as-services__card:nth-child(3) .as-services__card-icon {
  background: transparent !important;
}
.as-allsorts .as-services__card-icon i {
  font-size: 52px;
  line-height: 1;
  --fa-secondary-opacity: 1;
}
.as-allsorts .as-services__card:nth-child(1) .as-services__card-icon i {
  --fa-primary-color: #ec4d97;
  --fa-secondary-color: #f6aed0;
  color: #ec4d97 !important;
}
.as-allsorts .as-services__card:nth-child(2) .as-services__card-icon i {
  --fa-primary-color: #4f7cc9;
  --fa-secondary-color: #afc4e6;
  color: #4f7cc9 !important;
}
.as-allsorts .as-services__card:nth-child(3) .as-services__card-icon i {
  --fa-primary-color: #f07d2e;
  --fa-secondary-color: #f8c4a0;
  color: #f07d2e !important;
}
/* Subtitles uniform muted grey, not per-card colour - reference .svc .ce.
   !important needed: this single-class selector is lower specificity than
   the nth-child rules it replaces, and this file's cascade order can't be
   relied on alone once .as-allsorts grows. Mono font, uppercase, tracking,
   size and weight are untouched (still set on the base .as-services__card-tag
   rule, css:849-857) - only the colour changes here. */
.as-allsorts .as-services__card-tag { color: var(--grey-400) !important; }
.as-allsorts .as-services__card-features li i { color: var(--candy-pink); }
.as-allsorts .as-services__card:hover .as-services__card-link { color: var(--candy-pink); }

/* ============================================================
   Services hub (/services/view-all) - allsorts pass, added 2026-07-10.
   .as-hub-* classes are unique to services-hub.html (no shared blast
   radius). No topper strip here - deferred to a whole-site combo pass
   with every other card's topper, not a hub-only decision. No
   overflow:hidden - not needed, no child fill reaches the rounded
   corners without a topper.
   ============================================================ */

/* Card container - chunky pop treatment, ports home's .as-services__card
   border/radius/shadow (css:6857-6862). */
.as-allsorts .as-hub-card {
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-md);
}

/* Icon -> bare duotone glyph, matches the homepage service-card / row-item
   precedent (Phase 2, 12 July 2026). Chip removed: still overrides the
   legacy shared rule (css:398-411) that also guards .as-services__card-icon
   / .as-about-role__icon / .as-about-work__card-icon, so background/border-
   radius/width/height/font-size/color all still need !important to beat
   it. Bare glyph sized to occupy the space the 52px chip did. Card order
   (Custom Build / Site Refresh / Ongoing Support) keeps home's pink / blue
   / tangerine rotation, now on the glyph itself rather than a chip fill. */
.as-allsorts .as-hub-card__icon {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 52px !important;
  color: inherit !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  margin-bottom: 8px;
}
.as-allsorts .as-hub-card__icon i {
  font-size: 52px;
  line-height: 1;
  --fa-secondary-opacity: 1;
}
.as-allsorts .as-hub-card:nth-child(1) .as-hub-card__icon i {
  --fa-primary-color: #ec4d97;
  --fa-secondary-color: #f6aed0;
  color: #ec4d97;
}
.as-allsorts .as-hub-card:nth-child(2) .as-hub-card__icon i {
  --fa-primary-color: #4f7cc9;
  --fa-secondary-color: #afc4e6;
  color: #4f7cc9;
}
.as-allsorts .as-hub-card:nth-child(3) .as-hub-card__icon i {
  --fa-primary-color: #f07d2e;
  --fa-secondary-color: #f8c4a0;
  color: #f07d2e;
}

/* Title set in DM Sans, not Fraunces - mirrors .as-services__card-title's
   allsorts override (css:5978-5986) exactly, per Charles's request to match
   the card-title language sitewide. */
.as-allsorts .as-hub-card__title {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink-900);
}

/* Card tag - uniform muted grey, same as home (css:6904). Not synced to
   the icon fill's tangerine on card 3 - flat tangerine text on white
   reads worse than grey, same call home made for sunshine. */
.as-allsorts .as-hub-card__tag { color: var(--grey-400); }

/* Feature ticks - uniform candy-pink, same as home (css:6905). */
.as-allsorts .as-hub-card__features li i { color: var(--candy-pink); }

/* Footer link hover - candy-pink, same as home (css:6906). */
.as-allsorts .as-hub-card:hover .as-hub-card__link { color: var(--candy-pink); }

/* Hero em accent - candy-pink, italic dropped to match the established
   em pattern on contact/detail hero headlines (css:6344). */
.as-allsorts .as-hub-hero__headline em {
  font-style: normal;
  color: var(--candy-pink);
}

/* ============================================================
   PHASE 3 ITEM 5 - services hub page: .as-hub-hero splits into a plain
   white intro + a new .as-hub-bar ink band. Locked to .as-creds /
   .as-contact-bar - same object, different job. Consolidates the
   .as-row-list trust signals (stranded beside the h1, doing nothing) into
   one full-width band with its own argument: whichever service you pick,
   this is what doesn't change.

   .as-hub-services / .as-faq / .as-hub-notsure are NOT part of this
   change. Zero markup or CSS edits inside any of them.
   ============================================================ */
.as-allsorts .as-hub-bar {
  background-color: var(--liquorice);
}

/* Padding extracted to its own min-width:481px rule (was unguarded on the
   block above). Background/color/etc stay unguarded on purpose - they are
   correct at every width; only the desktop-scale padding is guarded. */
@media (min-width: 481px) {
.as-allsorts .as-hub-bar {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}

.as-allsorts .as-hub-bar .as-label {
  color: var(--sunshine);
}

.as-allsorts .as-hub-bar__headline {
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-hub-bar__col-title {
  font-weight: var(--fw-display);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-hub-bar__col-desc {
  font-weight: 400;
  color: var(--grey-400);
}

/* Icon rotation: fa-slab-press (dark band), same 4-stop luminous sequence
   as .as-creds / .as-contact-bar. Order changed from the old row-list -
   credential first, differentiator second, then the two service promises;
   "end-to-end ownership" no longer buried last. */
.as-allsorts .as-hub-bar__col:nth-child(1) i { color: var(--candy-pink-lt); }
.as-allsorts .as-hub-bar__col:nth-child(2) i { color: var(--bead-blue-lt); }
.as-allsorts .as-hub-bar__col:nth-child(3) i { color: var(--tangerine); }
.as-allsorts .as-hub-bar__col:nth-child(4) i { color: var(--sunshine); }

/* Tighter section rhythm - base .as-hub-services is var(--as-space-section)
   (7rem/112px) top and bottom. Desktop-only, guarded below; mobile
   (<=480px) falls back to the existing unscoped 64px mobile token rule. */
@media (min-width: 481px) {
  .as-allsorts .as-hub-services {
    padding-top: var(--as-pad-band);
    padding-bottom: var(--as-pad-band);
  }
}

/* H2 token weight bump - size comes from the shared base clamp(2rem,3.5vw,3rem),
   this class just had no allsorts override before this pass. */
.as-allsorts .as-hub-services__headline {
  font-weight: var(--fw-display);
}

/* Mid-page wave cleanup - hide the low-mid illustration band (sits at
services' bottom edge, between services and case studies). Top/tail
bookends (--home, --home-footer) and the other mid-page slice
(--home-high-mid) are untouched. display:none collapses its border-top
too, so no stray gap is left behind. */
.as-allsorts .as-hero--home-low-mid {
  display: none;
}

/* Bottom breathing room - was 160px (too much dead air), then cut to 72px
(too aggressive: the right-column row-list card runs taller than the left
copy column, so at 72px it overlapped the footer wave by 34px - verified
live, card bottom 4634 vs wave top 4600). 128px cleared the card; bumped to
148px, then 168px for further clearance above the wave. Desktop-only,
guarded below; mobile (<=480px) falls back to the 64px mobile token. */
@media (min-width: 481px) {
  .as-allsorts .as-cta {
    padding-top: var(--as-pad-cta-top);
    padding-bottom: var(--as-clear-wave);
  }
}

/* CTA row-list -> four individual pop-shadow cards (Option D). Unframes the
   shared .as-row-list panel and gives each .as-row-item its own ink border +
   offset shadow instead, scoped to .as-cta only so the contact page's
   row-list (and .as-faq__item, which shares the divider-color rule) are
   unaffected. Desktop-only; mobile falls back to the base unscoped rules. */
@media (min-width: 481px) {
  .as-allsorts .as-cta .as-row-list {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: grid;
    gap: 14px;
    overflow: visible;
  }
  .as-allsorts .as-cta .as-row-item {
    border: var(--bw) solid var(--ink-900);
    border-radius: var(--radius-md);
    box-shadow: var(--pop-sm);
    padding: 16px 18px;
    border-bottom: none;
  }
}

/* Staged for future rollout - swaps the CTA's two columns via order, not
   applied to any live HTML yet. .as-cta--flipped does not appear in
   home.html, so this has zero effect until it's added there or elsewhere. */
@media (min-width: 481px) {
  .as-allsorts .as-cta--flipped .as-cta__left {
    order: 2;
  }
  .as-allsorts .as-cta--flipped .as-row-list {
    order: 1;
  }
}

/* Buttons - chunky pop treatment. Base .as-btn/.as-btn--primary/.as-btn--outline
   (css:127-165) carry no !important, so this wins on specificity alone (2
   classes vs 1) with no override tricks needed. Fills untouched - primary
   stays black/white, outline stays white/ink; this only adds the border,
   shadow, and press mechanics. No button on home currently sits on a dark
   band (By the Numbers has none), so no white-border variant is needed yet -
   if one shows up later, it needs the same treatment as the dark-card fixes
   above: an ink-900 border is invisible on a dark fill, use white instead. */
.as-allsorts .as-btn {
  border: var(--bw) solid var(--ink-900);
  box-shadow: var(--pop-md);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: normal;
  padding: 15px 34px;
}
.as-allsorts .as-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--pop-lg);
}
.as-allsorts .as-btn:active {
  transform: translate(var(--press-shift), var(--press-shift));
  box-shadow: 0 0 0 0 var(--ink-900);
}

/* Primary button fill - candy-pink, not the legacy --as-purple that was
   firing on hover (css:149, .as-btn--primary:hover). Note: the actual
   culprit token is --as-purple (#5107ad, the original design-tokens
   purple), not --violet-* - those violet tokens are defined but never
   referenced anywhere in this file, so there was nothing to remove there.
   Hover changes shadow+transform only (from the generic rule above),
   background stays pink - this rule only needs to override the color. */
.as-allsorts .as-btn--primary {
  background: var(--candy-pink);
  color: #fff;
}
.as-allsorts .as-btn--primary:hover {
  background: var(--candy-pink);
}

/* Blue button variant - bead-blue fill, same no-color-change-on-hover
   pattern as primary. This class does not exist in the base stylesheet;
   nothing to override, just a new variant. Not yet applied anywhere in
   home.html - see chat note, no button currently lives in .as-positioning
   to attach it to. */
.as-allsorts .as-btn--blue {
  background: var(--bead-blue);
  color: #fff;
}
.as-allsorts .as-btn--blue:hover {
  background: var(--bead-blue);
}

/* White button variant flipped to pink primary fill - used only in the 5
   deep-page CTA banners (.as-svc-cta / .as-hub-notsure / .as-cs-hub-cta),
   now light-background sections where a white fill would be invisible.
   Border/shadow/pill-radius/hover-lift already come from the generic
   .as-allsorts .as-btn rule above - only the fill needs changing here. */
.as-allsorts .as-btn--white {
  background: var(--candy-pink);
  color: #fff;
}
.as-allsorts .as-btn--white:hover {
  background: var(--candy-pink);
}

/* Button arrow icon - slides right on hover. Icon is a plain <i>, inline
   by default, transform: translateX still applies fine without changing
   display. */
.as-allsorts .as-btn .arw {
  transition: transform var(--dur) var(--ease-out);
}
.as-allsorts .as-btn:hover .arw {
  transform: translateX(4px);
}

/* Outline buttons never show the sliding arrow - coloured buttons (primary
   pink, blue) keep it. One rule, covers See the work / View all work /
   Explore services now and any future outline button automatically. */
.as-allsorts .as-btn--outline .arw {
  display: none;
}

/* Hero single-column layout, Silver Partner demoted to a line (Phase 3,
   item 1, 12 July 2026). Right-column stats panel removed - duplicated
   the Track Record band below and out-decorated the H1. box-sizing:
   border-box fixes a pre-existing bug: .as-hero-combined__content had
   padding added on top of its own max-width:1160px (content-box
   default), rendering 1224px wide - 32px wider than every other section
   on each side. Same fix already used at the existing max-width:1024px
   breakpoint (css:579); this brings the desktop rule into line with it.
   Adding .as-container was considered and rejected - it declares no
   box-sizing of its own (max-width + margin only), so it would not have
   fixed the padding maths. */
@media (min-width: 481px) {
  .as-hero-combined__content {
    grid-template-columns: 1fr;
    gap: 0;
    box-sizing: border-box;
  }
  .as-hero-combined__headline {
    max-width: 640px;
  }
}

/* ============================================================
   Off-white sweep - card/panel surfaces to pure white
   ============================================================
   Phase 1 white-out (2026-07-12): --as-off-white and --coconut are gone
   from the whole stylesheet - every consumer now reads var(--white) (or
   an equivalent) at its own base rule directly. .as-hero--home-high-mid,
   .as-services__card and .as-row-list:not(.as-row-list--dark) .as-row-item
   dropped out of this sweep as a result - their bases already resolve to
   white with nothing left to override. .as-hero-combined__stat and
   .as-hero-combined__partner's entry in this sweep was removed in the
   Phase 4 dead-code pass along with the rest of that component. */

/* === ALLSORTS COMPONENTS - service pages (ongoing_support, site_refresh,
   custom_build) - added 2026-07-10 ===
   .as-svc-hero__headline and .as-svc-section-headline are shared verbatim
   across all three service detail pages (h1/h2 only, no other role) and
   currently read var(--font-heading), which still resolves to the legacy
   Exo font - not var(--font-display) - so they were staying Exo while every
   other allsorts page moved to Fraunces. Remap font-family plus the usual
   full-weight render fix (Squarespace's antialiased default reads thin). */
.as-allsorts .as-svc-hero__headline,
.as-allsorts .as-svc-section-headline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* H1 normalisation, 12 July 2026 - font-size/max-width/colour can't join
   the shared group above (.as-svc-section-headline shares that selector
   and must not pick up an 820px cap or the H1's ink). Standalone rule,
   same pattern as the hub/contact fixed-size split at css:6452/:6461. */
.as-allsorts .as-svc-hero__headline {
  font-size: clamp(2.6rem, 5vw, 3.5rem);
  color: var(--ink-900);
  max-width: 820px;
}

/* Exo retirement (13 July 2026 typography pass) - .as-svc-hero__price was
   still reading var(--font-heading), which stays Exo 2 (never remapped by
   the .as-allsorts token block). Family later moved off Fraunces to DM Mono
   (Charles's call after live preview) - tabular figures keep the pricing
   tiers aligned down the column; rhymes with the mono numeral layer
   (.as-cs-stats__label, .as-cs-phase__number, .as-svc-hero__price-label
   directly above this element). 500 is the heaviest real DM Mono weight -
   700 has no face. */
.as-allsorts .as-svc-hero__price {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 48px;
}

/* Hero meta-row icons (Phase 2, 12 July 2026) - first allsorts treatment
   this selector has ever had; it was still rendering the legacy --as-purple
   flat colour (base rule css:1209-1213), never swept to candy at all. Bare
   duotone glyph, same colour-only recipe as the rest of Tier 1, no chip to
   remove so the existing 22.4px size is kept. 4 items per page, clean 1:1
   nth-child mapping, no wraparound needed. */
.as-allsorts .as-svc-hero__meta-item i {
  --fa-secondary-opacity: 1;
}
.as-allsorts .as-svc-hero__meta-item:nth-child(1) i {
  --fa-primary-color: #ec4d97;
  --fa-secondary-color: #f6aed0;
  color: #ec4d97;
}
.as-allsorts .as-svc-hero__meta-item:nth-child(2) i {
  --fa-primary-color: #4f7cc9;
  --fa-secondary-color: #afc4e6;
  color: #4f7cc9;
}
.as-allsorts .as-svc-hero__meta-item:nth-child(3) i {
  --fa-primary-color: #f07d2e;
  --fa-secondary-color: #f8c4a0;
  color: #f07d2e;
}
/* Duotone sunshine, always on white — SHAPE darkened per the .as-icon--sunshine exception above. */
.as-allsorts .as-svc-hero__meta-item:nth-child(4) i {
  --fa-primary-color: #d69d1c;
  --fa-secondary-color: #fae9a6;
  color: #d69d1c;
}

/* .as-svc-cta__headline already reads var(--font-display) via its base
   rule (css:1890) - render fix only, no font-family change needed. */
.as-allsorts .as-svc-cta__headline {
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Deep-page CTA banners flipped from a dark horizontal banner to a light
   centred stack - .as-cta-banner__inner is shared by .as-svc-cta (3 service
   pages + one-page-website's --light variant), .as-hub-notsure (services
   hub) and .as-cs-hub-cta (case-studies hub), so this covers all of them
   in one place. Eyebrow centres under the new centred content. */
.as-allsorts .as-cta-banner__inner .as-eyebrow {
  justify-content: center;
}

/* H2 token weight bump - .as-hub-notsure__headline had no allsorts override
   before this pass; size comes from the shared base clamp(2rem,3.5vw,3rem). */
.as-allsorts .as-hub-notsure__headline {
  font-weight: var(--fw-display);
}

/* Deep-page CTA headline em - matches homepage .as-cta__headline em
   treatment exactly (upright, candy-pink) instead of falling through to
   browser-default italic + inherited ink-black. */
.as-allsorts .as-svc-cta__headline em,
.as-allsorts .as-hub-notsure__headline em,
.as-allsorts .as-cs-hub-cta__headline em,
.as-allsorts .as-cs-page-cta__headline em {
  font-style: normal;
  color: var(--candy-pink);
}

/* Section padding - base .as-svc-cta / .as-hub-notsure / .as-cs-hub-cta all
   use var(--as-space-section-cta) (5rem/80px) top and bottom. Bottom bumped
   to 100px to clear the 107px footer wave's ~60px intrusion, with headroom
   for the taller centred stack. Desktop-only, guarded below; mobile
   (<=480px) falls back to the existing unscoped 64px mobile token rule. */
@media (min-width: 481px) {
  .as-allsorts .as-svc-cta,
  .as-allsorts .as-hub-notsure,
  .as-allsorts .as-cs-hub-cta {
    padding-top: var(--as-pad-cta-top);
    padding-bottom: var(--as-clear-wave-banner);
  }
}

/* Em keyword - upright pink, matches home's verified .as-positioning__headline em */
.as-allsorts .as-svc-hero__headline em,
.as-allsorts .as-svc-section-headline em {
  font-style: normal;
  color: var(--candy-pink);
}

/* What's-available card icons -> bare duotone glyphs, matches the
   homepage service-card / row-item precedent (Phase 2, 12 July 2026).
   Chip removed: background/border/radius/forced white colour all dropped
   (was a 52px chip with candy fill). Bare glyph sized to occupy the space
   the chip did (52px). */
.as-allsorts .as-svc-included__item-icon {
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
}
.as-allsorts .as-svc-included__item-icon i {
  font-size: 52px;
  line-height: 1;
  --fa-secondary-opacity: 1;
}

/* Duo colour rotation - pink/blue/tangerine/sunshine, cycles every 4.
   Confirmed the six .as-svc-included__item cards are direct siblings of
   one parent (.as-svc-included__grid), so nth-child(1..6) maps to visual
   order 1-6: SEO, Advanced Dev, Performance, Monthly Reviews, Strategic,
   Content. No more sunshine ink-glyph special case - sunshine is now the
   glyph's own colour on a white card, not white text on a yellow chip. */
.as-allsorts .as-svc-included__item:nth-child(1) .as-svc-included__item-icon i,
.as-allsorts .as-svc-included__item:nth-child(5) .as-svc-included__item-icon i {
  --fa-primary-color: #ec4d97;
  --fa-secondary-color: #f6aed0;
  color: #ec4d97;
}
.as-allsorts .as-svc-included__item:nth-child(2) .as-svc-included__item-icon i,
.as-allsorts .as-svc-included__item:nth-child(6) .as-svc-included__item-icon i {
  --fa-primary-color: #4f7cc9;
  --fa-secondary-color: #afc4e6;
  color: #4f7cc9;
}
.as-allsorts .as-svc-included__item:nth-child(3) .as-svc-included__item-icon i {
  --fa-primary-color: #f07d2e;
  --fa-secondary-color: #f8c4a0;
  color: #f07d2e;
}
/* Duotone sunshine, always on white — SHAPE darkened per the .as-icon--sunshine exception above. */
.as-allsorts .as-svc-included__item:nth-child(4) .as-svc-included__item-icon i {
  --fa-primary-color: #d69d1c;
  --fa-secondary-color: #fae9a6;
  color: #d69d1c;
}

/* === ALLSORTS CONTAINER TREATMENT - service pages (ongoing_support,
   site_refresh, custom_build) - added 2026-07-10 ===
   Outer containers get chunky ink border + pop-shadow. Radius/shadow tier
   matches home's own large-panel equivalents (.as-services__card - both
   --radius-lg + --pop-md, not the --radius-xl/--pop-lg large-panel tier) -
   .as-svc-pricing follows the same lg/md tier.
   .as-svc-hero__right keeps its off-white fill: same pattern as
   .as-contact-hero__location (also off-white + thin border, already boxed
   without a white override at css:6423) - background left untouched here,
   matching that precedent and the "off-white sweep" note above which names
   this class as deliberate section rhythm, not a trap. */
.as-allsorts .as-svc-included__item,
.as-allsorts .as-svc-hero__right,
.as-allsorts .as-svc-pricing {
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-md);
}

/* .as-svc-hero__right topper - host is padded (2.2rem, css:1044) and was
   overflow:visible, so it could not clip a topper strip. overflow:hidden
   is safe here: nothing in the block relies on overflowing (no negative
   margins, no absolute-positioned children), and the pop-shadow paints
   outside the border box regardless of overflow, so it is unaffected. */
.as-allsorts .as-svc-hero__right {
  overflow: hidden;
}
.as-allsorts .as-svc-hero__right .as-topper {
  margin: -2.2rem -2.2rem 0;
}

/* Internal pricing rows stay hairline - recolour off the legacy --as-border
   token only, same technique as .as-row-item / .as-faq__item above. */
.as-allsorts .as-svc-pricing__tier {
  border-bottom-color: var(--grey-200);
}

/* Exo retirement (13 July 2026 typography pass) - same "Exo trap" as
   .as-svc-hero__price above, .as-svc-pricing__tier-price was still reading
   var(--font-heading) (stays Exo 2, never remapped). Family later moved off
   Fraunces to DM Mono (Charles's call after live preview) - tabular figures
   keep the three pricing tiers aligned; they drifted in Fraunces. */
.as-allsorts .as-svc-pricing__tier-price {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 22px;
}

/* .as-faq intentionally NOT boxed here - it's a section wrapper (border-top
   only, off-white section fill), not a card. Its child .as-faq__list already
   carries the box treatment from the contact-page container pass
   (.as-allsorts .as-faq__list, css:6425). */

/* Tighter section rhythm - base .as-svc-included / .as-svc-process /
   .as-svc-bottom are all var(--as-space-section) (7rem/112px) top and
   bottom. Desktop-only, guarded below; mobile (<=480px) falls back to
   the existing unscoped 64px mobile token rule. */
@media (min-width: 481px) {
  .as-allsorts .as-svc-included,
  .as-allsorts .as-svc-process,
  .as-allsorts .as-svc-bottom {
    padding-top: var(--as-pad-band);
    padding-bottom: var(--as-pad-band);
  }
}

/* ============================================================
   PHASE 3 ITEM 1 - service pages: .as-svc-process becomes the
   editorial ink band. Locked to .as-creds on the homepage - same
   object, different job. Breaks the ~3736px unbroken white run on
   the 3 service pages (custom-build / site-refresh / ongoing-support).
   No topper: toppers require a white card with an ink border to be
   the lid of, and this is a full-bleed band.

   Deliberately unscoped by page (simple .as-allsorts .as-svc-process,
   not sibling-scoped to hero modifiers) - .as-svc-process also exists
   on one-page-website.html, but that page is being rebuilt solo and
   is not a page we need to protect from this change.

   Must land AFTER the 84px section-rhythm rule above - equal
   specificity, so file order decides the winner. Padding here
   overrides that rule intentionally; do not add !important.
   ============================================================ */
.as-allsorts .as-svc-process {
  background-color: rgb(23, 23, 26);
}

/* Padding extracted to its own min-width:481px rule (was unguarded on the
   block above). Background/color/etc stay unguarded on purpose - they are
   correct at every width; only the desktop-scale padding is guarded. */
@media (min-width: 481px) {
.as-allsorts .as-svc-process {
  padding: var(--as-pad-ink) var(--as-pad-side);
}
}

/* Eyebrow label goes sunshine on ink, matching .as-creds. Dot stays pink. */
.as-allsorts .as-svc-process .as-label {
  color: var(--sunshine);
}

/* Headline to creds spec: white, 48px. .as-svc-section-headline is SHARED
   with .as-svc-included / .as-svc-bottom - scoped to .as-svc-process only
   so the white doesn't leak onto the still-ink sections either side. */
.as-allsorts .as-svc-process .as-svc-section-headline {
  color: var(--white);
}

/* Grey horizontal timeline line (base .as-svc-process__steps::before) is a
   leftover from the white design - on ink it becomes a dim grey stripe
   crossing the candy-coloured step numbers. The 1px grid gap + per-step
   border-left below do the divider job instead, same as .as-creds. */
.as-allsorts .as-svc-process__steps::before {
  display: none;
}

/* 1px gap + hairline dividers, matching the creds grid. */
.as-allsorts .as-svc-process__steps {
  gap: 1px;
}
.as-allsorts .as-svc-process__step {
  padding: 0 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.as-allsorts .as-svc-process__step:first-child {
  border-left: 0;
  padding-left: 0;
}

.as-allsorts .as-svc-process__step-title { color: var(--white); }
.as-allsorts .as-svc-process__step-desc  { color: var(--grey-400); }

/* Step numbers: luminous candy rotation, same order as .as-creds. Class
   is now fa-slab-press - fa-1..fa-4 are plain numerals, swapped from
   fa-slab fa-regular for a heavier weight, so the colour rules below
   still apply unchanged regardless of family. */
.as-allsorts .as-svc-process__step-number i { font-size: 32px; }

/* The 56px size below belongs to the Slab Press digits only, not the
   container - one-page-website.html shares this same container class
   with fa-sharp fa-thin fa-circle-N icons and must not be resized.
   text-align: left corrects Font Awesome's fixed 1.25em icon box
   (70px at 56px font-size) centring the narrower digit glyph inside
   it, which otherwise reads as a 21px indent against the text below.
   Shared by the service-page process steps and the case-study hub rows -
   same glyph treatment, two components. */
.as-allsorts .as-svc-process__step-number i.fa-slab-press,
.as-allsorts .as-cs-row__number i.fa-slab-press {
  font-size: 56px;
  text-align: left;
}

.as-allsorts .as-svc-process__step:nth-child(1) .as-svc-process__step-number i { color: var(--candy-pink-lt); }
.as-allsorts .as-svc-process__step:nth-child(2) .as-svc-process__step-number i { color: var(--bead-blue-lt); }
.as-allsorts .as-svc-process__step:nth-child(3) .as-svc-process__step-number i { color: var(--tangerine); }
.as-allsorts .as-svc-process__step:nth-child(4) .as-svc-process__step-number i { color: var(--sunshine); }

/* Stacked-grid stray divider fix: at <=960px the grid drops to 2 columns
   (css:1740) and at <=600px to 1 (css:1777). An unconditional border-left
   would draw a divider mid-row at 2-col and a stray line down every
   stacked item at 1-col. Reset at the same breakpoint the existing
   ::before divider already resets at (css:1745). */
@media (max-width: 960px) {
  .as-allsorts .as-svc-process__step {
    border-left: 0;
    padding-left: 0;
  }
}

/* ============================================================
   ALLSORTS COMPONENTS - case studies hub (/case-studies) - added 2026-07-10
   .as-cs-card* removed in the Phase 4 dead-code pass (retired by the
   .as-cs-row rebuild below, orphaned base+allsorts rules deleted
   entirely rather than left flagged). .as-cs-hub-* remains page-unique
   to case-studies-hub.html.
   ============================================================ */

/* Hero em accent - drop italic + legacy purple for the established
   upright-pink em pattern used on every other migrated headline
   (.as-positioning__headline em, .as-svc-hero__headline em, etc). */
.as-allsorts .as-cs-hub-hero__headline em {
  font-style: normal;
  color: var(--candy-pink);
}

/* Render fix - .as-cs-hub-hero__headline reads var(--font-display) at the
   base CSS level already - no font-family remap needed, only the
   weight/line-height/smoothing fix every other Fraunces heading on the
   site already gets. (.as-cs-card__title / __stat-number had matching
   render-fix rules here too, removed with the rest of .as-cs-card* in
   the Phase 4 dead-code pass.) */
.as-allsorts .as-cs-hub-hero__headline {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--ink-900);
  max-width: 820px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* cs-hub-cta__headline is now part of the unified H2 token (13 July 2026
   typography pass) - weight bumped to var(--fw-display) along with every
   other H2-tier class, reversing the earlier "intentionally lighter"
   decision noted here previously. */
.as-allsorts .as-cs-hub-cta__headline {
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* ============================================================
   PHASE 3 ITEM 7 - case studies hub (/case-studies/view-all):
   .as-cs-hub-grid becomes editorial ink rows, replacing the three
   .as-cs-card trading cards. Same object as the detail-page phase
   rows (Item 6) - click from hub into a case study and the visual
   language doesn't change. Last page on the site with zero ink
   bands; breaks the 2689px unbroken white run. Approved from live
   DOM-injection preview, 12 July 2026 - Charles's own idea, logged
   as a follow-up note on Item 6.

   .as-cs-card* was retired by this rebuild and has since been deleted
   entirely (Phase 4 dead-code pass). New .as-cs-row* markup replaced it;
   the two families never interacted.

   .as-cs-hub-hero / .as-faq / .as-cs-hub-cta are NOT part of this
   change - zero markup or CSS edits inside any of them.
   ============================================================ */
.as-allsorts .as-cs-hub-grid {
  background-color: rgb(23, 23, 26);
}
.as-allsorts .as-cs-hub-grid .as-label {
  color: var(--sunshine);
}

/* __inner reused as a plain container (eyebrow + h2 + rows wrapper) -
   the old 3-col card grid is gone, __rows below is the real grid now. */
.as-allsorts .as-cs-hub-grid__inner {
  display: block;
}

.as-allsorts .as-cs-hub-grid__headline {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  margin: 0 0 20px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* New intro paragraph, 12 July 2026 - h2 dropped its hard-coded count
   ("Three builds, three outcomes" -> "Recent builds") since Charles will
   be adding a new case study soon; this intro carries the sector list
   instead so nothing needs editing when a study is added. Same treatment
   as .as-about-skills__intro - #b4b4bc, 17px, capped at 640px so it does
   not run the full 1160 container. */
.as-allsorts .as-cs-hub-grid__intro {
  font-family: var(--font-body);
  color: #b4b4bc;
  font-size: 18px;
  line-height: 1.60;
  margin: 0;
  max-width: 640px;
}

.as-allsorts .as-cs-hub-grid__rows {
  margin-top: 48px;
}

/* Row: the WHOLE row is the link. 2-col grid - copy one side, device
   pair the other - divided by a top hairline, same recipe as the
   detail-page phase (Item 6). */
.as-allsorts .as-cs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0 72px;
  align-items: center;
  padding: 52px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: inherit;
}
.as-allsorts .as-cs-row:first-child {
  border-top: 0;
}

.as-allsorts .as-cs-row__copy {
  grid-column: 1;
  grid-row: 1;
}

.as-allsorts .as-cs-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.as-allsorts .as-cs-row__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9a9aa2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
}

/* One candy hue per case study, not per stat (12 July 2026) - with the
   stats bars gone, tags are the only place colour lives on this page.
   Walks the candy array by nth-child so a 4th study picks up sunshine
   automatically. Provisional - Charles: "not sure on the pills, but leave
   it like this for now." */
.as-allsorts .as-cs-row:nth-child(1) .as-cs-row__tag {
  color: var(--candy-pink-lt);
  border-color: rgba(242, 108, 174, 0.45);
}
.as-allsorts .as-cs-row:nth-child(2) .as-cs-row__tag {
  color: var(--bead-blue-lt);
  border-color: rgba(127, 163, 221, 0.45);
}
.as-allsorts .as-cs-row:nth-child(3) .as-cs-row__tag {
  color: var(--tangerine);
  border-color: rgba(240, 125, 46, 0.45);
}
.as-allsorts .as-cs-row:nth-child(4) .as-cs-row__tag {
  color: var(--sunshine);
  border-color: rgba(244, 207, 59, 0.45);
}

/* Tags replaced by a single candy-coloured number above each title, 14 July
   2026 - reuses the service-page process step-number glyph exactly (shared
   font-size/text-align rule, see .as-svc-process__step-number above). No
   centring here - left-aligned to sit flush with the title/desc/cta column
   below it. margin-bottom matches the old .as-cs-row__tags gap (16px) so the
   vertical rhythm to the title is unchanged. */
.as-allsorts .as-cs-row__number {
  line-height: 1;
  margin-bottom: 16px;
}

.as-allsorts .as-cs-row:nth-child(1) .as-cs-row__number i { color: var(--candy-pink-lt); }
.as-allsorts .as-cs-row:nth-child(2) .as-cs-row__number i { color: var(--bead-blue-lt); }
.as-allsorts .as-cs-row:nth-child(3) .as-cs-row__number i { color: var(--tangerine); }

/* Titles reverted to Fraunces 900, 14 July 2026 - the DM Sans experiment
   noted below (12 July 2026) is superseded now that a number sits above
   the title instead of the tag pills. Size stays 30px, not the card's
   22px - a hub row heading next to a full device-pair shot needs more
   presence than a card title. Titles moved off the heavy Fraunces serif
   onto the same DM Sans used by .as-services__card-title (homepage),
   12 July 2026 - Charles: "bring the Case Study titles out of the heavy
   serif" - this note is kept for history, the DM Sans swap is reverted
   above. */
.as-allsorts .as-cs-row__title {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
}

/* Stats bars removed entirely, 12 July 2026 (markup deleted from
   case-studies-hub.html, not display:none) - Charles: "stats bars can go
   here, kinda meaningless, gets repeated on individual pages". Same
   reasoning that killed the homepage hero stats panel the same day: every
   number here reappears on the detail page this row links to. Section
   height is unaffected - rows are held at ~453px by the device pair, not
   the copy, so reclaiming this space costs nothing vertically. */
.as-allsorts .as-cs-row__desc {
  font-family: var(--font-body);
  color: #9a9aa2;
  font-size: 16px;
  line-height: 1.70;
  margin: 0 0 28px;
  max-width: 460px;
}

.as-allsorts .as-cs-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}
.as-allsorts .as-cs-row__cta i {
  font-size: 12px;
}

/* Image zone - the homepage .as-casestudy__card / Item 6 recipe
   verbatim: shadow-only separation, no border. Longhand grid-row -
   Squarespace strips the slash form (grid-row: 1 / 2) silently, see
   the Item 6 postmortem. */
.as-allsorts .as-cs-row__image {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  position: relative;
  width: 88%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  transform: rotate(-3deg);
  z-index: 1;
}
.as-allsorts .as-cs-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.as-allsorts .as-cs-row__phone {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  align-self: end;
  justify-self: end;
  width: 34%;
  aspect-ratio: 9 / 17;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  transform: rotate(5deg) translateY(28px);
  margin-right: -6%;
  z-index: 2;
}
.as-allsorts .as-cs-row__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Alternation - row 2 mirrors. Rotation mirrors too, so the device
   pair always leans INTO the copy. */
.as-allsorts .as-cs-row:nth-child(even) .as-cs-row__copy {
  grid-column: 2;
}
.as-allsorts .as-cs-row:nth-child(even) .as-cs-row__image,
.as-allsorts .as-cs-row:nth-child(even) .as-cs-row__phone {
  grid-column: 1;
}
.as-allsorts .as-cs-row:nth-child(even) .as-cs-row__image {
  transform: rotate(3deg);
  margin-left: auto;
}
.as-allsorts .as-cs-row:nth-child(even) .as-cs-row__phone {
  justify-self: start;
  margin-right: 0;
  margin-left: -6%;
  transform: rotate(-5deg) translateY(28px);
}

/* Tighter section rhythm - locked to the .as-creds padding recipe
   (css:7202), same as every other ink band on the site. Desktop-only,
   guarded below; mobile (<=480px) falls back to the existing unscoped
   64px mobile token rule (css:4164-4170, shared with hub-hero/hub-cta,
   untouched). */
@media (min-width: 481px) {
  .as-allsorts .as-cs-hub-grid {
    padding: var(--as-pad-ink) var(--as-pad-side);
  }
}

/* ============================================================
   ALLSORTS COMPONENTS - case study template (shared across
   austin-space, terracotta-property, ddr-ltd) - added 2026-07-10
   Every .as-cs-* rule below lands on all 3 pages simultaneously.
   LOCKED, no rules written: .as-cs-testimonial__quote/__name/__role
   TEXT (typography only, below), .as-casestudy__quote-source (icon
   family swap only, done in HTML, no CSS rule at all), DDR's
   __before-screens / __screens-grid / __screen (out of scope,
   separate future work).
   ============================================================ */

/* --- heading remap - the Exo trap, full remap not render-fix only.
   All five classes were reading var(--font-heading), which is never
   remapped under .as-allsorts (only var(--font-display) is), so they
   need font-family changed here too, not just weight/line-height. */
.as-allsorts .as-cs-hero__headline,
.as-allsorts .as-cs-section-headline,
.as-allsorts .as-cs-phase__title,
.as-allsorts .as-cs-stats__number,
.as-allsorts .as-cs-page-cta__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.as-allsorts .as-cs-hero__headline em {
  font-style: normal;
  color: var(--candy-pink);
}

/* H1 normalisation, 12 July 2026 - max-width/colour can't join the shared
   heading-remap group above (.as-cs-section-headline / __phase__title /
   __stats__number / __page-cta__headline all share that selector and
   must not pick up an 820px cap or the H1's ink). Standalone rule, same
   pattern as the hub/contact fixed-size split at css:6452/:6461.
   font-size is untouched - clamp(2.4rem, 5vw, 4rem) in the base rule
   (css:2312) already tops out at 64px, matching every other page. */
.as-allsorts .as-cs-hero__headline {
  color: var(--ink-900);
  max-width: 820px;
}

/* --- testimonial quote - same font-display token, DIFFERENT weight
   (400, not fw-display/900) - matches home's live .as-casestudy__quote p
   exactly. Only Fraunces 900 is loaded today, so this currently still
   renders at 900 in practice - known, accepted, matches home's existing
   behaviour. Loading a lighter Fraunces weight is separate future work,
   not part of this pass. Text content is completely untouched -
   presentation only. */
.as-allsorts .as-cs-testimonial__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  line-height: var(--lh-tight);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* __name / __role: no change - both already read correct tokens
   (--font-body / --font-mono, both remap to DM Sans / DM Mono
   automatically under .as-allsorts) and neither has the Exo trap or a
   legacy purple reference. Already clean. */

/* --- stats dark band - synced to home's live .as-creds pattern.
   Background swept from --as-black to --liquorice; icon rotation is
   the same 4-stop sequence used on .as-creds__icon and
   .as-casestudy__stat-icon (pink-lt / blue-lt / tangerine / sunshine)
   with !important, needed to beat the legacy guard shared with those
   two siblings (css: "ICON COLOUR OVERRIDES" section, #f6d847
   !important on .as-cs-stats__icon); label colour matches
   .as-creds__text's allsorts value verbatim (#b7b7bf). No eyebrow
   exists on this component (unlike .as-creds__header), so there's
   nothing to colour sunshine here. */
.as-allsorts .as-cs-stats,
.as-allsorts .as-cs-stats__item {
  background-color: var(--liquorice);
}
.as-allsorts .as-cs-stats__item:nth-child(1) .as-cs-stats__icon { color: var(--candy-pink-lt) !important; }
.as-allsorts .as-cs-stats__item:nth-child(2) .as-cs-stats__icon { color: var(--bead-blue-lt) !important; }
.as-allsorts .as-cs-stats__item:nth-child(3) .as-cs-stats__icon { color: var(--tangerine) !important; }
.as-allsorts .as-cs-stats__item:nth-child(4) .as-cs-stats__icon { color: var(--sunshine) !important; }
.as-allsorts .as-cs-stats__label {
  font-weight: 400;
  color: #b7b7bf;
}

/* ============================================================
   PHASE 3 ITEM 6 - case study detail pages: .as-cs-solution becomes
   the editorial ink band (shared template: austin-space,
   terracotta-property, ddr-ltd). Splits the 3550px unbroken white
   run in the middle of the page. Locked to .as-creds / .as-svc-process
   - same ink band, same job. Rhymes with Item 1 (.as-svc-process on
   the service pages) - same content type ("how it works"), same
   treatment, two page families. Approved from live DOM-injection
   preview, 12 July 2026.

   Supersedes the white-card phase treatment above (chunky box +
   circular candy-chip numeral): the card is gone, copy sits directly
   on the ink, and the numeral becomes a DM Mono label instead of a
   filled chip.
   ============================================================ */
.as-allsorts .as-cs-solution {
  background-color: rgb(23, 23, 26);
}
.as-allsorts .as-cs-solution .as-label {
  color: var(--sunshine);
}
.as-allsorts .as-cs-solution .as-cs-section-headline {
  color: #fff;
}

/* 2x2 card grid -> vertical stack. Phases divided by a top hairline,
   the horizontal equivalent of the vertical column dividers used on
   every other ink band (.as-creds, .as-svc-process). */
.as-allsorts .as-cs-solution__grid {
  display: block;
  margin-top: 44px;
}

/* Phase: white card removed (background/border/radius/shadow all
   reset). Each phase becomes a 2-col grid - copy one side, device
   pair the other - divided by the top hairline instead of its own box.
   No hover rule - these are plain divs, not links. */
.as-allsorts .as-cs-phase {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0 72px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.as-allsorts .as-cs-phase:first-child {
  border-top: 0;
  padding-top: 0;
}
.as-allsorts .as-cs-phase:last-child {
  padding-bottom: 0;
}

/* Numeral chip is gone entirely - .as-cs-phase__number becomes a bare
   label, matching the eyebrow language, rotating through the same
   luminous-on-dark candy sequence as .as-svc-process__step-number. */
.as-allsorts .as-cs-phase__icon {
  display: none;
}
.as-allsorts .as-cs-phase__number {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: block;
  font-family: var(--font-mono);
  font-size: 11.52px;
  letter-spacing: 1.84px;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  height: auto;
}
.as-allsorts .as-cs-solution__grid .as-cs-phase:nth-child(1) .as-cs-phase__number { color: var(--candy-pink-lt); }
.as-allsorts .as-cs-solution__grid .as-cs-phase:nth-child(2) .as-cs-phase__number { color: var(--bead-blue-lt); }
.as-allsorts .as-cs-solution__grid .as-cs-phase:nth-child(3) .as-cs-phase__number { color: var(--tangerine); }
.as-allsorts .as-cs-solution__grid .as-cs-phase:nth-child(4) .as-cs-phase__number { color: var(--sunshine); }

.as-allsorts .as-cs-phase__title {
  grid-column: 1;
  grid-row: 2;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.20;
  margin: 8px 0 14px;
}

.as-allsorts .as-cs-phase__list {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  border-top: 0;
  padding: 0;
  margin: 0;
}
.as-allsorts .as-cs-phase__list li {
  color: #9a9aa2;
  font-size: 14.5px;
  line-height: 1.55;
  padding: 0 0 7px 0;
}
/* Ticks removed - matches the tick-free treatment on .as-cs-phase__list
   li i's only sibling context that mattered here: the copy sits on ink
   with no card to frame a bullet against. */
.as-allsorts .as-cs-phase__list li i {
  display: none;
}

/* Image zone - the homepage .as-casestudy__card recipe verbatim:
   shadow-only separation, no border. A mount/border here was tried
   and rejected - it reads as a hole rather than an object. */
.as-allsorts .as-cs-phase__image {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  position: relative;
  width: 88%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  transform: rotate(-3deg);
  align-self: center;
  z-index: 1;
  margin: 0;
}
.as-allsorts .as-cs-phase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* NEW element - overlapping phone, leaning out past the container
   edge. For now shares the desktop screenshot's src cropped to 9:17
   (Charles: "just use a double up for now") - built so only the src
   needs swapping when real mobile screenshots exist. */
.as-allsorts .as-cs-phase__phone {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  align-self: end;
  justify-self: end;
  width: 34%;
  aspect-ratio: 9 / 17;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
  transform: rotate(5deg) translateY(28px);
  margin-right: -6%;
  z-index: 2;
}
.as-allsorts .as-cs-phase__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Alternation - even phases mirror. Devices swap sides, rotation
   mirrors too, so the pair always leans INTO the copy. */
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__number,
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__title,
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__list {
  grid-column: 2;
}
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__image,
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__phone {
  grid-column: 1;
}
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__image {
  transform: rotate(3deg);
  margin-left: auto;
}
.as-allsorts .as-cs-phase:nth-child(even) .as-cs-phase__phone {
  justify-self: start;
  margin-right: 0;
  margin-left: -6%;
  transform: rotate(-5deg) translateY(28px);
}

/* --- before/after frames - ink + pop, same tier as the phase cards
   above (bumped from the base's --radius-md to --radius-lg for
   consistency with every other boxed component on this template).
   Covers both the "Before" and "After" columns automatically, since
   both share the one .as-cs-beforeafter__img class - austin-space's
   fa-triangle-exclamation placeholder gets the identical frame with no
   extra selector needed. */
.as-allsorts .as-cs-beforeafter__img {
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-md);
}
.as-allsorts .as-cs-beforeafter__img img {
  border-radius: var(--radius-lg);
}
/* Placeholder icon/text - was --as-border (very faint), bumped to
   --grey-400 so the "no online presence" placeholder actually reads
   instead of nearly vanishing against its own off-white fill. */
.as-allsorts .as-cs-beforeafter__img-placeholder {
  color: var(--grey-400);
}

/* --- challenge list xmarks - muted grey, not candy-pink. These mark
   problems/constraints (a negative); the checklist ticks above mark
   solutions (a positive) - keeping them visually distinct keeps the
   challenge-vs-solution narrative reading clearly. */
.as-allsorts .as-cs-challenge__list li i {
  color: var(--grey-500);
}

/* --- testimonial band - frame only, quote typography is above, text is
   locked. Background swept from --as-black to --liquorice (same
   technique as .as-cs-stats above and .as-casestudy__card elsewhere).
   Icon goes sunshine, matching the established "single accent icon on a
   black band" precedent (.as-about-solo .as-eyebrow__dot) rather than a
   pink/blue/tangerine rotation - there's only one icon here, not four,
   so a rotation doesn't apply. Opacity raised from the base's 0.6 to
   full strength since this is now a deliberate accent colour, not a
   muted purple wash. */
.as-allsorts .as-cs-testimonial {
  background-color: var(--liquorice);
}
.as-allsorts .as-cs-testimonial__icon {
  color: var(--sunshine);
  opacity: 1;
}

/* --- page-cta: no container CSS - it's a flush, unbordered band by
   design (flex row directly in the section, no card wrapper ever
   existed here), unlike .as-cta-banner__inner (a different component,
   out of scope). Its heading is already covered by the remap above;
   its buttons already get the chunky pop treatment globally via
   .as-allsorts .as-btn. */

/* --- purple cleanup pass - 4 elements missed by the main plan, all
   remap to neutral ink-900 (informational/plain-label elements, not
   action elements - no candy applied). Confirmed via grep: these are
   the only remaining var(--as-purple) consumers left in the whole
   case-study block after the main pass. */

/* No border exists on this element (text-only link, .as-cs-hero__link
   has no border property in the base rule) - just the text colour.
   No hover colour state exists either (:hover only widens the gap) -
   nothing to neutralise there. */
.as-allsorts .as-cs-hero__link {
  color: var(--ink-900);
}

/* Hero device pair - landscape + portrait, mirrors .as-cs-phase__image /
   __phone verbatim (css:7630-7678), expressed for a position:relative
   parent instead of the phase's grid-column/grid-row placement. Single
   instance per page, no alternation needed. */
.as-allsorts .as-cs-hero__media {
  position: relative;
  display: flex;
  align-items: center;
}
.as-allsorts .as-cs-hero__media-desktop {
  position: relative;
  z-index: 1;
  width: 88%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  transform: rotate(-3deg);
}
.as-allsorts .as-cs-hero__media-phone {
  position: absolute;
  z-index: 2;
  right: -6%;
  bottom: 0;
  width: 34%;
  aspect-ratio: 9 / 17;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  transform: rotate(5deg) translateY(28px);
}
.as-allsorts .as-cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.as-allsorts .as-cs-challenge__group-title {
  color: var(--ink-900);
}

/* Base .as-cs-beforeafter__label is already neutral (--as-mid) -
   only the --after modifier carries purple. */
.as-allsorts .as-cs-beforeafter__label--after {
  color: var(--ink-900);
}

/* Tighter section rhythm - base .as-cs-challenge / .as-cs-solution /
   .as-cs-beforeafter are all var(--as-space-section) (7rem/112px) top and
   bottom. Desktop-only, guarded below; mobile (<=480px) falls back to the
   existing unscoped 64px mobile token rule.
   .as-cs-solution pulled out by Item 6 below - it's now the ink band and
   takes the .as-creds padding recipe instead of the shared 84/84. */
@media (min-width: 481px) {
  .as-allsorts .as-cs-challenge,
  .as-allsorts .as-cs-beforeafter {
    padding-top: var(--as-pad-band);
    padding-bottom: var(--as-pad-band);
  }
}

/* .as-cs-solution pulled out of the group above by Item 6 - ink band,
   locked to the .as-creds padding recipe (css:7202) instead of the
   shared 84/84. Must land AFTER the group rule above - equal
   specificity, so file order decides the winner. Do not add !important. */
@media (min-width: 481px) {
  .as-allsorts .as-cs-solution {
    padding: var(--as-pad-ink) var(--as-pad-side);
  }
}

/* .as-cs-page-cta pulled out of the group above - now centred as a light
   CTA stack (see .as-cs-page-cta__inner, css:2991), so its bottom padding
   is bumped past the shared 84px to clear the 107px footer wave's ~60px
   intrusion, matching the deep-page CTA banner treatment above. */
@media (min-width: 481px) {
  .as-allsorts .as-cs-page-cta {
    padding-top: var(--as-pad-cta-top);
    padding-bottom: var(--as-clear-wave);
  }
}

/* ============================================================
   ABOUT PAGE FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Matches the homepage's .as-hero--home-footer pattern (base .as-hero /
   .as-hero__img / .as-hero__stroke rules already exist and are reused
   as-is - this only adds the footer-specific geometry: fixed height,
   top-edge clip, border-bottom, slice). Additive only - no existing
   hero, clip, or the homepage footer touched.
   ============================================================ */
.as-hero--about-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--about-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 8%;
  clip-path:url(#wave-clip-about-footer);
  display:block;
}
.as-hero--about-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   SERVICES HUB FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Mirrors .as-hero--about-footer exactly (border-top:0 and
   background:transparent baked in to avoid the two bugs About hit).
   Pins absolute bottom:0 to the same .sqs-block context as About - the
   page's true last section is the white .as-faq, confirmed via live
   Y-position measurement, so the strip meets white ground, same clean
   case as About. Additive only - no existing hero, clip, the About
   footer, or the homepage footer touched.
   ============================================================ */
.as-hero--services-hub-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--services-hub-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 92%;
  clip-path:url(#wave-clip-services-hub-footer);
  display:block;
}
.as-hero--services-hub-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   CUSTOM BUILD FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Same recipe as About/Services Hub. Page's true last element before
   this strip is the BLACK .as-svc-cta banner (confirmed via live
   Y-position: bottom 4640 -> footer 4949), not a white section, so the
   stroke is black-on-black at the top edge until the CTA banner is
   whitened. Accepted temporary state. Additive only.
   ============================================================ */
.as-hero--custom-build-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--custom-build-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 15%;
  clip-path:url(#wave-clip-custom-build-footer);
  display:block;
}
.as-hero--custom-build-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   SITE REFRESH FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Same recipe as About/Services Hub/Custom Build. Page's true last
   element before this strip is the BLACK .as-svc-cta banner (confirmed
   via live Y-position: bottom 4530 -> footer 4610), so the stroke is
   black-on-black at the top edge until the CTA banner is whitened.
   Accepted temporary state. Additive only.
   ============================================================ */
.as-hero--site-refresh-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--site-refresh-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 60%;
  clip-path:url(#wave-clip-site-refresh-footer);
  display:block;
}
.as-hero--site-refresh-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   ONGOING SUPPORT FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Same recipe as About/Services Hub/Custom Build/Site Refresh. Page's
   true last element before this strip is the BLACK .as-svc-cta banner
   (confirmed via live Y-position: bottom 4505 -> footer), so the stroke
   is black-on-black at the top edge until the CTA banner is whitened.
   Accepted temporary state. Additive only.
   ============================================================ */
.as-hero--ongoing-support-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--ongoing-support-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 40%;
  clip-path:url(#wave-clip-ongoing-support-footer);
  display:block;
}
.as-hero--ongoing-support-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   CONTACT FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Same recipe as About/Services Hub. Page's true last element before
   this strip is the white .as-faq (confirmed via live Y-position:
   bottom 3120, flush to footer) - no CTA banner on this page, so this
   is a clean case like About/Services Hub, fully resolved on deploy.
   Additive only.
   ============================================================ */
.as-hero--contact-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--contact-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 75%;
  clip-path:url(#wave-clip-contact-footer);
  display:block;
}
.as-hero--contact-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* Contact: lift FAQ so the footer wave has white clearance above it.
   PENDING mobile pass - re-guarded to mobile only (was unguarded). Desktop
   clearance now comes from the min-width:481px rule below instead. */
@media (max-width: 480px) {
.as-faq:has(~ .as-hero--contact-footer){
  margin-bottom: 160px;
}
}

/* Case-study pages: lift the page CTA so the footer wave has white clearance.
   PENDING mobile pass - re-guarded to mobile only (was unguarded). Desktop
   clearance now comes from the min-width:481px rule below instead. */
@media (max-width: 480px) {
.as-cs-page-cta:has(~ .as-hero[class*="-footer"]){
  margin-bottom: 160px;
}
}

/* Desktop footer-wave clearance exception - guarded to min-width:481px so
   this does not out-specify the mobile rule above (same specificity bug the
   ink-band fix elsewhere in this pass exists to correct: 3-class :has()
   selectors beat a 1-class mobile fallback regardless of media guard, so
   both sides must be explicitly scoped). The homepage .as-cta:has(~ .as-hero
   --home-footer) exception is gone - the homepage now takes the standard
   var(--as-clear-wave) like every other bare CTA, confirmed live. */
@media (min-width: 481px) {
.as-allsorts .as-faq:has(~ .as-hero--contact-footer) { padding-bottom: var(--as-clear-wave); }
}

/* ============================================================
   CASE-STUDY HUB FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Same recipe as prior pages. Page's true last element before this strip
   is the BLACK .as-cs-hub-cta__inner .as-cta-banner__inner (confirmed via
   live Y-position: bottom 3632), so the stroke is black-on-black at the
   top edge until the CTA banner is whitened. Accepted temporary state.
   Scoped to /case-studies/view-all (the reskinned hub) - the plain
   unreskinned /case-studies blog collection is untouched. Additive only.
   ============================================================ */
.as-hero--casestudies-hub-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
  
}
.as-hero--casestudies-hub-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 25%;
  clip-path:url(#wave-clip-casestudies-hub-footer);
  display:block;
}
.as-hero--casestudies-hub-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   CS AUSTIN-SPACE FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Scoped to /case-studies/austin-space ONLY - the 3 case-study pages
   share the .as-cs-* template classes, but this footer strip's markup
   lives only in this page's own HTML, not in the shared template, so it
   does not appear on terracotta-property or ddr-ltd. Page's true last
   element before this strip is the LIGHT off-white .as-cs-page-cta
   (confirmed via live Y-position), not the black CTA banner used
   elsewhere - so the wave emerges from off-white, a clean case fully
   resolved on deploy, not a temporary black state. No testimonial
   section exists on this page (own company, no client quote). Additive
   only - .as-cs-testimonial and any review-link markup untouched.
   ============================================================ */
.as-hero--cs-austin-space-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--cs-austin-space-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  clip-path:url(#wave-clip-cs-austin-space-footer);
  display:block;
}
.as-hero--cs-austin-space-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   CS TERRACOTTA FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   Scoped to /case-studies/terracotta-property ONLY - the footer strip's
   markup lives only in this page's own HTML, not the shared .as-cs-*
   template, so it does not appear on austin-space or ddr-ltd. Page's
   true last element before this strip is the LIGHT off-white
   .as-cs-page-cta (confirmed via live Y-position), so the wave emerges
   from off-white, a clean case fully resolved on deploy. This page's
   LOCKED testimonial (.as-cs-testimonial, Charlie Crocker quote) and
   LOCKED Google review link (maps.app.goo.gl/DiL3qV9RftvfoZxa7 on
   .as-casestudy__quote-source) sit earlier in the page and are entirely
   untouched by this addition. Additive only.
   ============================================================ */
.as-hero--cs-terracotta-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--cs-terracotta-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 85%;
  clip-path:url(#wave-clip-cs-terracotta-footer);
  display:block;
}
.as-hero--cs-terracotta-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ============================================================
   CS DDR FOOTER STRIP - inverted top-edge cosmos, added 2026-07-10
   LAST page of the footer rollout. Scoped to /case-studies/ddr-ltd
   ONLY - the footer strip's markup lives only in this page's own
   HTML, not the shared .as-cs-* template, so it does not appear on
   austin-space or terracotta-property. Page's true last element
   before this strip is the LIGHT off-white .as-cs-page-cta (confirmed
   via live Y-position), so the wave emerges from off-white, a clean
   case fully resolved on deploy. No new spacing rule needed here -
   the shared .as-cs-page-cta:has(~ .as-hero[class*="-footer"]) rule
   (added earlier in this file) already covers every case-study page,
   this one included, automatically. This page's LOCKED testimonial
   (.as-cs-testimonial, Sarah Hart quote) and LOCKED Google review link
   (maps.app.goo.gl/sTPZ39R2rhWhNFNJA on .as-casestudy__quote-source),
   plus the undesigned .as-cs-challenge__before-screens block, sit
   earlier in the page and are entirely untouched by this addition.
   Additive only.
   ============================================================ */
.as-hero--cs-ddr-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%; height:102px;
  border-top:0;
  border-bottom:5px solid var(--liquorice);
  overflow:hidden;
  background:transparent;
}
.as-hero--cs-ddr-footer .as-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 30%;
  clip-path:url(#wave-clip-cs-ddr-footer);
  display:block;
}
.as-hero--cs-ddr-footer .as-hero__stroke{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ==========================================================
   POSITIONING SECTION - CARD GRID
   New family. Shares no selector with .as-row-item, which is
   still live in .as-cta on the homepage and on About.
   ========================================================== */

/* Base: everything stacked, one column of cards. */
.as-allsorts .as-positioning__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.as-allsorts .as-pos-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.as-allsorts .as-pos-card {
  background: var(--white);
  border: var(--bw) solid var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --fa-secondary-opacity MUST be declared here. The .as-icon--* classes at css:5557-5576
   set the two colours only. The opacity was coming from .as-allsorts .as-row-item__icon i
   at css:5546-5549, which this markup no longer uses. Omit it and every duotone fill
   silently renders at FA's 40 percent default, which looks like a design decision rather
   than a bug. */
.as-allsorts .as-pos-card__icon {
  font-size: 36px;
  line-height: 1;
  --fa-secondary-opacity: 1;
}

.as-allsorts .as-pos-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 0;
}

.as-allsorts .as-pos-card__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-500);
  margin: 0;
}

/* Cards pair up only once there is room for them. Measured: pairing from 481px gives
   234px columns on a 560px viewport, too narrow for a 300-character body. */
@media (min-width: 700px) {

  .as-allsorts .as-pos-cards {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

}

/* The two-column split. FRACTIONS, not a fixed column. A fixed 400px against a fr
   remainder produced 147px cards at 800px viewport. Fractions subtract the gap before
   dividing. At the capped 1160px container this yields copy 401px and cards 337px,
   within a pixel of the approved 400 / 338. */
@media (min-width: 1100px) {

  .as-allsorts .as-positioning__inner {
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 56px;
    align-items: start;
  }

}

/* ==========================================================
   HOMEPAGE BACKGROUND STORY - editorial ink band
   Sits between .as-positioning and .as-services. Prose-led, NOT a
   card section - zero borders, zero radius, zero shadow by design,
   unlike every .as-pos-card / .as-services__card sibling on this page.
   Locked to .as-creds / .as-hub-bar / .as-contact-bar for the dark
   band itself; the stat rail and two-column prose are a genuinely
   new layout, no existing precedent to sync to.
   ========================================================== */

/* Padding extracted to its own min-width:481px rule, same technique as
   every other ink band (.as-creds / .as-hub-bar / .as-svc-process /
   .as-cs-solution) - background/color stay unguarded since they're
   correct at every width; only the desktop-scale padding is guarded.
   Mobile falls back to the unscoped .as-backstory 480px rule above.

   Bottom matches every other ink-band transition on this page: the gap
   splits two-sided, ink-band bottom (--as-pad-ink, 72px) plus the next
   section's own top padding (--as-pad-band, 80px), total 152px. Formerly
   .as-services carried padding-top:0, so this rule had to solo-supply
   the full 152px via calc(ink + band) - that made the "WHAT I DO"
   eyebrow sit flush against the ink band. .as-services now carries its
   own --as-pad-band top padding (see the .as-allsorts .as-services rule
   above), so bottom here reverts to the plain ink value like every other
   ink band on the page. Top is untouched at the plain ink value - the
   positioning->backstory gap (80 + 72) is already correct and must not
   change. */
@media (min-width: 481px) {
.as-allsorts .as-backstory {
  padding: var(--as-pad-ink) var(--as-pad-side);
  padding-bottom: var(--as-pad-ink);
}
}

/* Eyebrow uses the shared .as-eyebrow/.as-eyebrow--on-dark/.as-eyebrow__dot/
   .as-label markup verbatim (same as .as-casestudy below it) - the earlier
   one-off .as-backstory__eyebrow (DM Mono, sunshine, no dot) matched
   nothing else on the site and has been removed; no CSS override needed
   here, the shared rules already render it correctly on this dark band. */

/* Shared .as-eyebrow carries no bottom margin of its own - the old one-off
   .as-backstory__eyebrow (now removed) had margin: 0 0 22px, so swapping to
   the shared component dropped the eyebrow-to-headline gap to 0. Restored
   here, scoped to .as-backstory only - do not touch the shared .as-eyebrow
   rule, it is sitewide. */
.as-allsorts .as-backstory .as-eyebrow--on-dark {
  margin-bottom: 22px;
}

.as-allsorts .as-backstory__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.6rem, 4.4vw, 3.4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: #ffffff;
  max-width: 20ch;
  margin: 0 0 14px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-backstory__standfirst {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
  color: #b4b4bc;
  max-width: 60ch;
  margin: 0 0 52px;
}

/* Base (mobile-first): stats stack above prose, single column - matches
   the min-width-guarded-override idiom used everywhere else in this
   file rather than a max-width teardown. */
.as-allsorts .as-backstory__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}

.as-allsorts .as-backstory__stats {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* The figure-wrap shrink-wraps to the figure so the bar can match the
   number's width, NOT the label's - a typographic device (the strings
   just happen to sort in the right order), not a data chart. inline-
   block is the shrink-wrap; the label lives OUTSIDE this wrap so it
   never stretches the box. Do not hardcode pixel widths here - this
   must recompute if a figure is edited. */
.as-allsorts .as-backstory__figure-wrap {
  display: inline-block;
}

.as-allsorts .as-backstory__bar {
  display: block;
  width: 100%;
  height: 5px;
  margin-bottom: 12px;
}

.as-allsorts .as-backstory__bar--pink      { background: var(--candy-pink); }
.as-allsorts .as-backstory__bar--blue      { background: var(--bead-blue); }
.as-allsorts .as-backstory__bar--tangerine { background: var(--tangerine); }

.as-allsorts .as-backstory__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #ffffff;
  white-space: nowrap;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.as-allsorts .as-backstory__stat-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8a8a94;
  margin-top: 8px;
}

/* Grid, not CSS columns - columns can't anchor a child under one specific
   column, and the CTA must sit under the LEFT prose column only, beneath
   its own paragraph, not spanning both. Base (mobile-first): both
   .as-backstory__prose-col cells stack in a single column; the CTA still
   follows its own paragraph correctly at every width since it lives
   inside that column's own markup, not a spanning sibling. */
.as-allsorts .as-backstory__prose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  columns: auto;
}

.as-allsorts .as-backstory__prose-col {
  display: flex;
  flex-direction: column;
}

.as-allsorts .as-backstory__prose p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #b4b4bc;
  margin: 0 0 1em;
}

/* CTA - matches .as-casestudy__cta exactly: bare text link, no
   underline, no border, no padding, arrow icon. text-decoration:none
   is required here (unlike .as-casestudy__cta, which sits nested
   inside an outer <a>) since this CTA is itself the anchor. Sits inside
   .as-backstory__prose-col (left column only), not a spanning sibling -
   no column-span needed under the grid model. */
.as-allsorts .as-backstory__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
}

/* Desktop: fixed stat-rail gutter beside the prose, prose runs 2 columns.
   700px chosen to match .as-pos-cards' own pairing breakpoint just above -
   narrower and the 230px rail leaves too little room for the prose column. */
@media (min-width: 700px) {

  .as-allsorts .as-backstory__body {
    grid-template-columns: 230px 1fr;
    gap: 64px;
    align-items: start;
  }

  .as-allsorts .as-backstory__stats {
    padding-top: 6px;
  }

  .as-allsorts .as-backstory__prose {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }

}