astro-component-kit 0.4.0 → 0.4.1

package/src/components/lib/layout/FooterCenteredMinimal.astro

@@ -21,6 +21,7 @@ interface Props {
 const { copyright = '© 2026 Built with Astro Components Kit.', className = '' } = Astro.props;
 ---
 
+<div class="cq-footer-centered-minimal-cq">
 <footer class:list={['footer-centered', className]}>
   <div class="footer-centered__inner">
     <div class="footer-centered__logo">
@@ -29,8 +30,9 @@ const { copyright = '© 2026 Built with Astro Components Kit.', className = '' }
     <p class="footer-centered__copy">{copyright}</p>
   </div>
 </footer>
-
+</div>
 <style>
+  .cq-footer-centered-minimal-cq { container-type: inline-size; }
   .footer-centered {
     border-top: 1px solid var(--c-border);
     padding: var(--sp-10) var(--sp-6);
@@ -54,7 +56,7 @@ const { copyright = '© 2026 Built with Astro Components Kit.', className = '' }
     margin: 0;
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .footer-centered {
       padding: var(--sp-8) var(--sp-4);
     }

package/src/components/lib/layout/FullBleedSection.astro

@@ -27,8 +27,8 @@ const { className = '' } = Astro.props;
     margin-left: -50vw;
     margin-right: -50vw;
     background: rgba(30, 41, 59, 0.4);
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     padding: 3.5rem 1.5rem;
     box-sizing: border-box;
   }

package/src/components/lib/layout/GalleryGrid4.astro

@@ -28,8 +28,8 @@ const { className = '' } = Astro.props;
   .gal-grid :global(> *), .gal-item {
     aspect-ratio: 1;
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/lib/layout/HolyGrailGrid.astro

@@ -22,6 +22,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-holy-grail-grid-cq">
 <div
   class:list={['holy-grail', className]}
   style={`--hg-left: ${leftWidth}; --hg-right: ${rightWidth}; --hg-gap: ${gap};`}
@@ -48,8 +49,9 @@ const {
     <slot name="footer" />
   </footer>
 </div>
-
+</div>
 <style>
+  .cq-holy-grail-grid-cq { container-type: inline-size; }
   .holy-grail {
     display: flex;
     flex-direction: column;
@@ -64,7 +66,7 @@ const {
     padding: var(--sp-4, 1rem) var(--sp-6, 1.5rem);
     background: rgba(10, 10, 14, 0.8);
     backdrop-filter: blur(16px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
   }
 
   .holy-grail__middle {
@@ -81,8 +83,8 @@ const {
   .holy-grail__left,
   .holy-grail__right {
     padding: var(--sp-4, 1rem);
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     border-radius: var(--r-lg, 16px);
     height: fit-content;
     position: sticky;
@@ -91,8 +93,8 @@ const {
 
   .holy-grail__main {
     padding: var(--sp-6, 1.5rem);
-    background: rgba(255, 255, 255, 0.015);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.015);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
     border-radius: var(--r-lg, 16px);
     min-height: 400px;
   }
@@ -101,11 +103,11 @@ const {
     width: 100%;
     padding: var(--sp-6, 1.5rem);
     background: rgba(10, 10, 14, 0.9);
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     margin-top: auto;
   }
 
-  @media (max-width: 1024px) {
+  @container (max-width: 1024px) {
     .holy-grail__middle {
       grid-template-columns: var(--hg-left) 1fr;
     }
@@ -114,7 +116,7 @@ const {
     }
   }
 
-  @media (max-width: 768px) {
+  @container (max-width: 768px) {
     .holy-grail__middle {
       grid-template-columns: 1fr;
     }

package/src/components/lib/layout/LandingSectionSplit.astro

@@ -15,6 +15,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-landing-section-split-cq">
 <section class={`split-sec ${className}`}>
   <div class="split-sec-text">
     <h2>{title}</h2>
@@ -33,8 +34,9 @@ const {
     </slot>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-landing-section-split-cq { container-type: inline-size; }
   .split-sec {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -72,14 +74,14 @@ const {
     height: 220px;
     background: rgba(15, 23, 42, 0.6);
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #94a3b8;
     font-weight: 600;
   }
-  @media (max-width: 768px) {
+  @container (max-width: 768px) {
     .split-sec {
       grid-template-columns: 1fr;
       gap: 2rem;

package/src/components/lib/layout/MasonryGrid.astro

@@ -34,8 +34,8 @@ const { columns = 3, gap = '1.5rem', className = '' } = Astro.props;
     display: block;
   }
   .masonry-demo-item {
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-md, 12px);
     display: flex;
     align-items: center;

package/src/components/lib/layout/MinimalFooterGrid.astro

@@ -37,7 +37,7 @@ const { brandName = 'AstroKit', className = '' } = Astro.props;
   .m-footer {
     width: 100%;
     padding: 3rem 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     background: rgba(0, 0, 0, 0.2);
   }
   .f-row {

package/src/components/lib/layout/ScrollSnapSection.astro

@@ -25,7 +25,7 @@ const { height = '300px', className = '' } = Astro.props;
     scroll-snap-type: y mandatory;
     width: 100%;
     border-radius: var(--r-lg, 12px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
   }
   .snap-wrap :global(section), .snap-panel {
     height: var(--snap-height, 300px);

package/src/components/lib/layout/SidebarLayoutWrapper.astro

@@ -30,6 +30,7 @@ interface Props {
 const { sidebarWidth = '280px', breakpoint = '768px', className = '' } = Astro.props;
 ---
 
+<div class="cq-sidebar-layout-wrapper-cq">
 <div class:list={['sidebar-layout', className]} style={`--sidebar-w: ${sidebarWidth}; --breakpoint: ${breakpoint}`}>
   <aside class="sidebar-layout__sidebar">
     <slot name="sidebar" />
@@ -38,8 +39,9 @@ const { sidebarWidth = '280px', breakpoint = '768px', className = '' } = Astro.p
     <slot name="main" />
   </main>
 </div>
-
+</div>
 <style>
+  .cq-sidebar-layout-wrapper-cq { container-type: inline-size; }
   .sidebar-layout {
     display: grid;
     grid-template-columns: var(--sidebar-w) 1fr;
@@ -54,7 +56,7 @@ const { sidebarWidth = '280px', breakpoint = '768px', className = '' } = Astro.p
     padding: var(--sp-6);
   }
 
-  @media (max-width: 768px) {
+  @container (max-width: 768px) {
     .sidebar-layout {
       grid-template-columns: 1fr;
     }

package/src/components/lib/layout/SplitScreenLayout.astro

@@ -36,7 +36,7 @@ const { className = '' } = Astro.props;
     width: 100%;
     border-radius: var(--r-xl, 16px);
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
   }
   .split-side {
     flex: 1;
@@ -47,11 +47,11 @@ const { className = '' } = Astro.props;
     padding: 3rem 2rem;
   }
   .left {
-    background: rgba(255, 255, 255, 0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
   }
   .right {
     background: rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(255, 255, 255, 0.06);
+    border-left: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
   }
   .demo-split-block {
     text-align: center;

package/src/components/lib/layout/StepLayoutVertical.astro

@@ -53,7 +53,7 @@ const { className = '' } = Astro.props;
     top: 18px;
     bottom: 18px;
     width: 2px;
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
     z-index: 0;
   }
   .step-point {

package/src/components/lib/layout/StickySidebarWrapper.astro

@@ -32,6 +32,7 @@ interface Props {
 const { sidebarWidth = '280px', stickyTop = '100px', gap = '2rem', className = '' } = Astro.props;
 ---
 
+<div class="cq-sticky-sidebar-wrapper-cq">
 <div class:list=['sticky-sidebar', className]} style={`--sidebar-w: ${sidebarWidth}; --sticky-top: ${stickyTop}; --col-gap: ${gap}`}>
   <main class="sticky-sidebar__main">
     <slot name="main" />
@@ -42,8 +43,9 @@ const { sidebarWidth = '280px', stickyTop = '100px', gap = '2rem', className = '
     </div>
   </aside>
 </div>
-
+</div>
 <style>
+  .cq-sticky-sidebar-wrapper-cq { container-type: inline-size; }
   .sticky-sidebar {
     display: grid;
     grid-template-columns: 1fr var(--sidebar-w, 280px);
@@ -61,7 +63,7 @@ const { sidebarWidth = '280px', stickyTop = '100px', gap = '2rem', className = '
     top: var(--sticky-top, 100px);
   }
 
-  @media (max-width: 768px) {
+  @container (max-width: 768px) {
     .sticky-sidebar {
       grid-template-columns: 1fr;
       gap: var(--sp-6);

package/src/components/lib/sections/AgencyContactBrief.astro

@@ -0,0 +1,194 @@
+---
+/**
+ * AgencyContactBrief — "Start a project" brief: service chips, budget pills, timeline, contact
+ * details and message, with validation and a success state; side column with direct contacts,
+ * office and response time.
+ *
+ * @param {string} title - Heading. Default "Let's build something people remember".
+ * @param {string} text - Intro text.
+ * @param {string[]} services - Service chips (multi-select).
+ * @param {string[]} budgets - Budget options (single-select).
+ * @param {string[]} timelines - Timeline select options.
+ * @param {string} action - Form action. With '#' the form validates and confirms locally. Default '#'.
+ * @param {Array<{label: string, value: string, href: string}>} contacts - Direct channels.
+ * @param {{city: string, address: string}} office - Office card (optional).
+ * @param {string} responseTime - Reply promise. Default 'We reply within one business day.'
+ * @param {string} id - Base id. Default 'brief'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: chips and pills are native checkboxes/radios inside fieldsets with legends;
+ * required fields use autocomplete hints; errors are listed in an alert and focus moves to the
+ * first invalid field; the success message receives focus.
+ */
+interface Props {
+  title?: string;
+  text?: string;
+  services?: string[];
+  budgets?: string[];
+  timelines?: string[];
+  action?: string;
+  contacts?: Array<{ label: string; value: string; href: string }>;
+  office?: { city: string; address: string };
+  responseTime?: string;
+  id?: string;
+  className?: string;
+}
+
+const {
+  title = "Let's build something people remember",
+  text = 'Tell us a little about your project. A partner — not a salesperson — will reply with next steps.',
+  services = ['Brand identity', 'Website', 'Growth marketing', 'Content & social', 'Not sure yet'],
+  budgets = ['< €15k', '€15–30k', '€30–60k', '€60k+'],
+  timelines = ['As soon as possible', 'In 1–3 months', 'In 3–6 months', 'Just exploring'],
+  action = '#',
+  contacts = [
+    { label: 'New business', value: 'hello@volta.studio', href: 'mailto:hello@volta.studio' },
+    { label: 'Call us', value: '+34 910 123 456', href: 'tel:+34910123456' },
+  ],
+  office = { city: 'Madrid', address: 'Calle de Fuencarral 45, 28004' },
+  responseTime = 'We reply within one business day.',
+  id = 'brief',
+  className = '',
+} = Astro.props;
+---
+
+<div class="cq-agency-brief">
+<section class:list={['acb', className]} aria-labelledby={`${id}-title`}>
+  <div class="acb__intro">
+    <h2 class="acb__title" id={`${id}-title`}>{title}</h2>
+    {text && <p class="acb__text">{text}</p>}
+    <ul class="acb__contacts">
+      {contacts.map((c) => <li><span>{c.label}</span><a href={c.href}>{c.value}</a></li>)}
+    </ul>
+    {office && <p class="acb__office"><span>Studio</span><strong>{office.city}</strong>{office.address}</p>}
+    {responseTime && <p class="acb__reply"><i aria-hidden="true"></i>{responseTime}</p>}
+  </div>
+
+  <form class="acb__form" action={action} method="post" novalidate data-brief>
+    <fieldset class="acb__group">
+      <legend>What do you need?</legend>
+      <div class="acb__chips">
+        {services.map((s, i) => (
+          <label class="acb__chip"><input type="checkbox" name="services" value={s} checked={i === 0} /><span>{s}</span></label>
+        ))}
+      </div>
+    </fieldset>
+    <fieldset class="acb__group">
+      <legend>Budget</legend>
+      <div class="acb__chips">
+        {budgets.map((b, i) => (
+          <label class="acb__chip"><input type="radio" name="budget" value={b} checked={i === 1} /><span>{b}</span></label>
+        ))}
+      </div>
+    </fieldset>
+    <div class="acb__row">
+      <div class="acb__field">
+        <label for={`${id}-name`}>Your name</label>
+        <input id={`${id}-name`} name="name" required autocomplete="name" />
+      </div>
+      <div class="acb__field">
+        <label for={`${id}-email`}>Work email</label>
+        <input id={`${id}-email`} name="email" type="email" required autocomplete="email" />
+      </div>
+    </div>
+    <div class="acb__row">
+      <div class="acb__field">
+        <label for={`${id}-company`}>Company</label>
+        <input id={`${id}-company`} name="company" autocomplete="organization" />
+      </div>
+      <div class="acb__field">
+        <label for={`${id}-when`}>Timeline</label>
+        <select id={`${id}-when`} name="timeline">{timelines.map((t) => <option>{t}</option>)}</select>
+      </div>
+    </div>
+    <div class="acb__field">
+      <label for={`${id}-msg`}>Tell us about the project</label>
+      <textarea id={`${id}-msg`} name="message" rows="4" required minlength="20" placeholder="Goals, audience, deadlines, links…"></textarea>
+    </div>
+    <p class="acb__error" role="alert" data-error></p>
+    <button class="acb__submit" type="submit">Send brief <span aria-hidden="true">↗</span></button>
+    <p class="acb__fine">By sending this form you agree to our privacy policy. No newsletters, promise.</p>
+  </form>
+
+  <div class="acb__done" hidden tabindex="-1" data-done>
+    <span class="acb__done-badge" aria-hidden="true">✓</span>
+    <h3>Brief received — thank you!</h3>
+    <p>{responseTime} In the meantime, have a look at our recent work.</p>
+  </div>
+</section>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLFormElement>('form[data-brief]:not([data-bound])').forEach((form) => {
+    form.dataset.bound = '';
+    const error = form.querySelector<HTMLElement>('[data-error]')!;
+    const done = form.parentElement!.querySelector<HTMLElement>('[data-done]')!;
+    form.addEventListener('submit', (e) => {
+      form.querySelectorAll('[aria-invalid]').forEach((n) => n.removeAttribute('aria-invalid'));
+      const invalid = Array.from(form.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>('input[required], textarea[required]')).filter((n) => !n.checkValidity());
+      const noService = !form.querySelector('input[name="services"]:checked');
+      if (invalid.length || noService) {
+        e.preventDefault();
+        invalid.forEach((n) => n.setAttribute('aria-invalid', 'true'));
+        const msgs = invalid.map((n) => form.querySelector(`label[for="${n.id}"]`)?.textContent).filter(Boolean);
+        if (noService) msgs.unshift('at least one service');
+        error.textContent = `Please complete: ${msgs.join(', ')}.`;
+        (invalid[0] ?? form.querySelector<HTMLInputElement>('input[name="services"]'))?.focus();
+        return;
+      }
+      if (form.getAttribute('action') === '#') {
+        e.preventDefault();
+        form.hidden = true;
+        done.hidden = false;
+        done.focus();
+      }
+    });
+  });
+</script>
+
+<style>
+  .cq-agency-brief { container-type: inline-size; }
+  .acb { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6cqi, 5rem); color: var(--c-text-1, #fff); }
+  .acb__title { margin: 0; font-size: clamp(2.4rem, 6.5cqi, 4.6rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.92; }
+  .acb__text { margin: var(--sp-5, 1.25rem) 0 0; max-width: 28rem; font-size: 1.05rem; line-height: 1.6; color: var(--c-text-2, #a3a3a3); }
+  .acb__contacts { display: grid; gap: var(--sp-4, 1rem); margin: var(--sp-8, 2rem) 0 0; padding: 0; list-style: none; }
+  .acb__contacts li, .acb__office { display: grid; gap: 2px; margin: 0; }
+  .acb__contacts span, .acb__office span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3, #737373); }
+  .acb__contacts a { font-size: clamp(1.2rem, 2.6cqi, 1.6rem); font-weight: 800; letter-spacing: -0.02em; color: inherit; text-decoration: none; background: linear-gradient(var(--agency-accent, var(--c-primary-light, #d4a017)), var(--agency-accent, var(--c-primary-light, #d4a017))) 0 100% / 0 35% no-repeat; transition: background-size 0.3s ease; width: fit-content; }
+  .acb__contacts a:hover { background-size: 100% 35%; }
+  .acb__office { margin-top: var(--sp-6, 1.5rem); font-size: 0.92rem; color: var(--c-text-2, #a3a3a3); }
+  .acb__office strong { font-size: 1.05rem; color: var(--c-text-1, #fff); }
+  .acb__reply { display: flex; align-items: center; gap: 8px; margin: var(--sp-6, 1.5rem) 0 0; font-size: 0.88rem; font-weight: 600; }
+  .acb__reply i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-success, #34d399); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-success, #34d399) 25%, transparent); }
+
+  .acb__form, .acb__done { display: grid; gap: var(--sp-5, 1.25rem); padding: clamp(1.25rem, 3.5cqi, 2.25rem); border-radius: 28px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12)); background: var(--c-bg-1, #0a0a0a); }
+  .acb__form[hidden], .acb__done[hidden] { display: none; }
+  .acb__group { margin: 0; padding: 0; border: 0; min-width: 0; }
+  .acb__group legend { margin-bottom: var(--sp-3, 0.75rem); font-size: 0.95rem; font-weight: 800; }
+  .acb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
+  .acb__chip { position: relative; cursor: pointer; }
+  .acb__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .acb__chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.2)); font-size: 0.9rem; font-weight: 700; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
+  .acb__chip:hover span { border-color: currentColor; }
+  .acb__chip input:checked + span { background: var(--agency-accent, var(--c-primary-light, #d4a017)); border-color: transparent; color: var(--c-on-primary, #050505); }
+  .acb__chip input:focus-visible + span { outline: 2px solid var(--c-text-1, #fff); outline-offset: 2px; }
+  .acb__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4, 1rem); }
+  .acb__field { display: grid; gap: 6px; }
+  .acb__field label { font-size: 0.85rem; font-weight: 700; }
+  .acb__field :is(input, select, textarea) { width: 100%; min-height: 50px; padding: 0.75rem 1rem; border-radius: 14px; border: 1.5px solid var(--c-border, rgba(255, 255, 255, 0.16)); background: var(--c-bg, #050505); color: var(--c-text-1, #fff); font: inherit; font-size: 0.95rem; }
+  .acb__field textarea { resize: vertical; }
+  .acb__field :is(input, select, textarea):focus { outline: none; border-color: var(--c-text-1, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--agency-accent, var(--c-primary-light, #d4a017)) 35%, transparent); }
+  .acb__field [aria-invalid='true'] { border-color: var(--c-danger, #f87171); }
+  .acb__error { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--c-danger, #f87171); }
+  .acb__error:empty { display: none; }
+  .acb__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; border: 0; border-radius: 999px; background: var(--c-text-1, #fff); color: var(--c-bg, #050505); font: inherit; font-size: 1.05rem; font-weight: 900; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
+  .acb__submit:hover { background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); transform: rotate(-1deg); }
+  .acb__submit:focus-visible { outline: 2px solid var(--agency-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .acb__fine { margin: -6px 0 0; font-size: 0.78rem; color: var(--c-text-3, #737373); text-align: center; }
+  .acb__done { place-content: center; justify-items: start; min-height: 420px; outline: none; }
+  .acb__done-badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); font-size: 1.8rem; font-weight: 900; transform: rotate(-8deg); }
+  .acb__done h3 { margin: 0; font-size: 2rem; font-weight: 900; letter-spacing: -0.04em; }
+  .acb__done p { margin: 0; color: var(--c-text-2, #a3a3a3); }
+  @container (max-width: 820px) { .acb { grid-template-columns: 1fr; } }
+  @container (max-width: 520px) { .acb__row { grid-template-columns: 1fr; } }
+</style>

package/src/components/lib/sections/AgencyFooterCta.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * AgencyFooterCta — Agency footer led by a giant "Let's talk" link, then link columns, offices,
+ * socials and the legal line.
+ *
+ * @param {string} kicker - Line above the CTA. Default 'Have a project in mind?'.
+ * @param {{label: string, href: string}} cta - Giant CTA link. Default "Let's talk".
+ * @param {string} email - Email shown under the CTA (optional).
+ * @param {Array<{title: string, links: {label: string, href: string}[]}>} columns - Link columns.
+ * @param {Array<{city: string, address: string}>} offices - Office addresses.
+ * @param {Array<{label: string, href: string}>} socials - Social links.
+ * @param {string} brand - Brand for the legal line. Default 'Volta'.
+ * @param {string} variant - Style (accent|plain). Default 'accent'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: footer landmark with a visually hidden heading; the CTA is a single large link;
+ * columns are nav lists.
+ */
+interface Props {
+  kicker?: string;
+  cta?: { label: string; href: string };
+  email?: string;
+  columns?: Array<{ title: string; links: Array<{ label: string; href: string }> }>;
+  offices?: Array<{ city: string; address: string }>;
+  socials?: Array<{ label: string; href: string }>;
+  brand?: string;
+  variant?: 'accent' | 'plain';
+  className?: string;
+}
+
+const {
+  kicker = 'Have a project in mind?',
+  cta = { label: "Let's talk", href: '#contact' },
+  email = 'hello@volta.studio',
+  columns = [
+    { title: 'Studio', links: [{ label: 'Work', href: '#' }, { label: 'Services', href: '#' }, { label: 'About', href: '#' }, { label: 'Careers', href: '#' }] },
+    { title: 'Services', links: [{ label: 'Brand identity', href: '#' }, { label: 'Websites', href: '#' }, { label: 'Growth', href: '#' }] },
+  ],
+  offices = [{ city: 'Madrid', address: 'Calle de Fuencarral 45' }, { city: 'Lisbon', address: 'Rua das Flores 12' }],
+  socials = [{ label: 'Instagram', href: '#' }, { label: 'LinkedIn', href: '#' }, { label: 'Dribbble', href: '#' }, { label: 'Behance', href: '#' }],
+  brand = 'Volta',
+  variant = 'accent',
+  className = '',
+} = Astro.props;
+---
+
+<div class="cq-agency-footer">
+<footer class:list={['afc', `afc--${variant}`, className]} aria-labelledby="afc-title">
+  <h2 id="afc-title" class="sr-only">Footer</h2>
+  <div class="afc__inner">
+    <p class="afc__kicker">{kicker}</p>
+    <a class="afc__cta" href={cta.href}>{cta.label}<span aria-hidden="true">↗</span></a>
+    {email && <a class="afc__email" href={`mailto:${email}`}>{email}</a>}
+
+    <div class="afc__grid">
+      {columns.map((c) => (
+        <nav aria-label={c.title}><p class="afc__label">{c.title}</p><ul>{c.links.map((l) => <li><a href={l.href}>{l.label}</a></li>)}</ul></nav>
+      ))}
+      {offices.length > 0 && (
+        <div><p class="afc__label">Offices</p><ul>{offices.map((o) => <li><strong>{o.city}</strong><span>{o.address}</span></li>)}</ul></div>
+      )}
+      {socials.length > 0 && (
+        <nav aria-label="Social"><p class="afc__label">Follow</p><ul>{socials.map((s) => <li><a href={s.href}>{s.label} ↗</a></li>)}</ul></nav>
+      )}
+    </div>
+    <p class="afc__legal"><span>© {new Date().getFullYear()} {brand}. All rights reserved.</span><span>Privacy · Cookies · Imprint</span></p>
+  </div>
+</footer>
+</div>
+
+<style>
+  .cq-agency-footer { container-type: inline-size; }
+  .afc { padding: clamp(3rem, 8cqi, 6rem) clamp(1rem, 4cqi, 2.5rem) var(--sp-6, 1.5rem); color: var(--c-text-1, #fff); }
+  .afc--accent { background: var(--agency-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); --c-text-1: var(--c-on-primary, #050505); --c-text-2: color-mix(in srgb, var(--c-on-primary, #050505) 72%, transparent); --c-border: color-mix(in srgb, var(--c-on-primary, #050505) 25%, transparent); border-radius: 40px 40px 0 0; }
+  .afc__inner { max-width: 1280px; margin: 0 auto; }
+  .afc__kicker { margin: 0 0 var(--sp-3, 0.75rem); font-size: 1.1rem; font-weight: 700; color: var(--c-text-2, #a3a3a3); }
+  .afc__cta { display: inline-flex; align-items: flex-start; gap: 0.1em; font-size: clamp(3.5rem, 15cqi, 12rem); font-weight: 900; letter-spacing: -0.07em; line-height: 0.85; color: inherit; text-decoration: none; transition: letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
+  .afc__cta span { font-size: 0.4em; transition: transform 0.4s ease; }
+  .afc__cta:hover { letter-spacing: -0.05em; color: inherit; }
+  .afc__cta:hover span { transform: translate(6px, -6px) rotate(10deg); }
+  .afc__email { display: inline-block; margin-top: var(--sp-4, 1rem); font-size: clamp(1.1rem, 2.4cqi, 1.5rem); font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 6px; }
+  .afc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8, 2rem); margin-top: clamp(2.5rem, 7cqi, 5rem); padding-top: var(--sp-6, 1.5rem); border-top: 1.5px solid currentColor; }
+  .afc__label { margin: 0 0 var(--sp-3, 0.75rem); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .afc__grid ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
+  .afc__grid a { display: inline-flex; min-height: 32px; align-items: center; color: inherit; font-weight: 700; text-decoration: none; }
+  .afc__grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
+  .afc__grid li strong { display: block; font-weight: 800; }
+  .afc__grid li span { font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .afc a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
+  .afc__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3, 0.75rem); margin: var(--sp-10, 2.5rem) 0 0; font-size: 0.82rem; color: var(--c-text-2, #a3a3a3); }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @container (max-width: 760px) { .afc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .afc--accent { border-radius: 28px 28px 0 0; } }
+  @media (prefers-reduced-motion: reduce) { .afc__cta, .afc__cta span { transition: none; } }
+</style>