/* ============================================================================
   Aporia Nous - site theme for ai.aporianous.com / agents.aporianous.com
   ONE SOURCE OF TRUTH for the palette, type and shared components.
   Tokens lifted from aporia-nous-debut (Ali's site). No motion, by design.
   Webby - 2026-10-14. Hand to votel-builder; pages link this and drop /vt-theme.css.
   ============================================================================ */
/* ---------- theme tokens ----------
   v3 (2026-10-14): palette ANCHORED TO THE LOGO. Sampled from the real file
   /uploads/an-logo.png (720x720, RGB): white artwork #FFFFFF on a deep
   navy-indigo field running #04062D -> #19146E (dominant ~#090B3E).
   Nothing invented: the ground is the logo's own navy family and the accent is
   a lightened step of the same hue (~242deg).
   ------------------------------------------------------------------------ */
  :root{
    --void:#05061C;            /* near-black navy ground          */
    --void-elevated:#0A0B33;   /* logo navy - raised surface      */
    --void-panel:#0E0F45;      /* logo navy - panel fill          */
    --starlight:#F6F6FA;       /* body text - white, back at Ali's call. 18.57:1 on void */
    --starlight-dim:#C2BDDA;   /* secondary text, lifted - 11.04:1 */
    --metal:#8E86E8;           /* rules / eyebrows, logo hue      */
    --metal-bright:#B4AEFF;    /* rule hover / focus ring         */
    --steel:#A9A3D0;           /* placeholders, labels - lifted    */
    --accent:#6F6AF8;          /* CTA + links: lightened logo navy */
    --accent-bright:#8F8BFF;   /* CTA hover                       */
    --accent-ink:#FFFFFF;      /* text on the accent              */
    /* HEADINGS PURPLE, body white. Ali: "make the text purple or white again". Splitting means purple is present AND long-form copy stays maximum readability. 12.14:1 on void. */
    --heading:#FFFFFF;         /* Ali: the purple blended into the navy - same hue. White reads. 20.01:1 */
    --accent-btn:#514BE2;      /* button fill - 6.08:1 with white */

    /* SECOND ACCENT - the warm complement of our indigo. Ali: "buttons orange or yellow".
       The logo indigo sits at hue ~242 deg; the opposite side of the wheel is a
       yellow-gold. Amber at ~46 deg reads warmer than a pure 62 deg yellow, which
       turns acid on screen, and still reads as the complement.
       INK ON IT IS DARK: white on #F4C542 measures 1.63:1 and fails outright.
       Near-black ink measures 11.65:1, so the fill stays loud AND passes AA. */
    --accent-warm:#F4C542;     /* button fill  - 11.65:1 with near-black ink */
    --accent-warm-hi:#FFD166;  /* button hover - 13.14:1 with near-black ink */
    --accent-warm-ink:#0A0B33; /* ink ON the warm fill */
    --accent-btn-hover:#5B55E8;/* button hover - 5.37:1 with white */
    --logo-navy:#0B0C44;       /* the logo's own mid field        */
    --line:#F6F6FA1F;          /* 12% hairline                    */
    --line-strong:#F6F6FA33;   /* 20% border                      */
    --glow:#6F6AF83D;          /* accent glow                     */
    --radius:.625rem;
    --font-sans:Inter,"Geist",ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-display:"Space Grotesk",Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:auto;background-color:var(--void)}
  body{
    margin:0; font-family:var(--font-sans); color:var(--starlight);
    background-color:var(--void); line-height:1.5; -webkit-font-smoothing:antialiased;
  }

  /* ---------- static "universe" ground: no canvas, no animation ---------- */
  @keyframes an-drift{0%{transform:translate3d(-1.6%,-1.1%,0)}50%{transform:translate3d(1.6%,1.1%,0)}100%{transform:translate3d(-1.6%,-1.1%,0)}}
  @keyframes an-breathe{0%{opacity:.45}50%{opacity:.75}100%{opacity:.45}}
  .ground{position:fixed; inset:0; z-index:0; pointer-events:none; background-color:var(--void)}
  .ground::before{
    content:""; position:absolute; inset:-9%; opacity:.5; animation:an-drift 90s ease-in-out infinite, an-breathe 70s ease-in-out infinite; will-change:transform,opacity;
    background-image:
      radial-gradient(58% 52% at 28% 34%, rgba(111,106,248,.22), transparent 70%),
      radial-gradient(48% 44% at 76% 66%, rgba(143,139,255,.18), transparent 72%),
      radial-gradient(1.2px 1.2px at 12% 18%, rgba(226,222,255,.55), transparent 100%),
      radial-gradient(1px 1px at 27% 62%, rgba(226,222,255,.38), transparent 100%),
      radial-gradient(1.4px 1.4px at 43% 12%, rgba(180,174,255,.45), transparent 100%),
      radial-gradient(1px 1px at 58% 74%, rgba(226,222,255,.30), transparent 100%),
      radial-gradient(1.2px 1.2px at 71% 33%, rgba(180,174,255,.40), transparent 100%),
      radial-gradient(1px 1px at 83% 58%, rgba(226,222,255,.32), transparent 100%),
      radial-gradient(1.3px 1.3px at 92% 22%, rgba(226,222,255,.42), transparent 100%),
      radial-gradient(1px 1px at 8% 84%, rgba(180,174,255,.30), transparent 100%),
      radial-gradient(1px 1px at 36% 88%, rgba(226,222,255,.26), transparent 100%),
      radial-gradient(1.2px 1.2px at 65% 92%, rgba(180,174,255,.28), transparent 100%);
    background-size:100% 100%;
  }
  .ground::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(120% 90% at 50% 0%, rgba(5,6,28,.10) 0%, rgba(5,6,28,.45) 55%, rgba(5,6,28,.78) 100%);
  }
  @keyframes an-ring{0%{transform:scale(.38);opacity:0}12%{opacity:.5}70%{opacity:.16}100%{transform:scale(2.3);opacity:0}}
  @keyframes an-wave{0%{transform:scaleY(.34)}50%{transform:scaleY(1)}100%{transform:scaleY(.34)}}
  .ground .ring{position:absolute;left:50%;top:40%;width:44vmin;height:44vmin;margin:-22vmin 0 0 -22vmin;border:1px solid rgba(143,139,255,.28);border-radius:50%;opacity:0;animation:an-ring 13s cubic-bezier(.2,.6,.3,1) infinite;will-change:transform,opacity}
  .ground .ring.r2{animation-delay:4.33s;border-color:rgba(111,106,248,.24)}
  .ground .ring.r3{animation-delay:8.66s;border-color:rgba(180,174,255,.18)}
  .ground .wave{position:absolute;left:-4%;right:-4%;bottom:0;height:24vh;transform-origin:bottom center;opacity:.5;animation:an-wave 9s ease-in-out infinite;will-change:transform;background-image:repeating-linear-gradient(90deg, rgba(143,139,255,.20) 0 3px, transparent 3px 15px);-webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 55%, transparent 100%);mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 55%, transparent 100%)}
  .ground .wave.w2{background-image:repeating-linear-gradient(90deg, transparent 0 8px, rgba(111,106,248,.17) 8px 10px);background-repeat:no-repeat;background-size:100% 62%;background-position:bottom;animation-duration:7s;animation-delay:2.4s}
  @keyframes an-flow-x{from{background-position-x:0}to{background-position-x:22px}}
  @keyframes an-flow-y{from{background-position-y:0}to{background-position-y:22px}}
  .ground .flow{position:absolute;inset:0;opacity:.85}
  .ground .flow span{position:absolute;display:block}
  .ground .node{width:10px;height:10px;border-radius:3px;background:rgba(180,174,255,.5);box-shadow:0 0 14px rgba(111,106,248,.55)}
  .ground .node.sm{width:7px;height:7px;border-radius:2px;background:rgba(143,139,255,.38)}
  .ground .edge{background-image:repeating-linear-gradient(90deg, rgba(143,139,255,.40) 0 7px, transparent 7px 22px);background-size:22px 1px;background-repeat:repeat-x;animation:an-flow-x 5s linear infinite}
  .ground .edge.v{background-image:repeating-linear-gradient(180deg, rgba(143,139,255,.40) 0 7px, transparent 7px 22px);background-size:1px 22px;background-repeat:repeat-y;animation:an-flow-y 5s linear infinite}
  .ground .edge.d2{animation-delay:-1.7s}.ground .edge.d3{animation-delay:-3.4s}
  .ground .e1{left:6%;top:20%;width:18%;height:1px}
  .ground .e2{left:24%;top:20%;width:18%;height:1px}
  .ground .e3{left:24%;top:20%;width:1px;height:25%}
  .ground .e4{left:24%;top:45%;width:36%;height:1px}
  .ground .e5{left:60%;top:45%;width:18%;height:1px}
  .ground .e6{left:60%;top:45%;width:1px;height:27%}
  .ground .e7{left:42%;top:72%;width:18%;height:1px}
  .ground .e8{left:78%;top:45%;width:1px;height:20%}
  .ground .n1{left:5%;top:19%}.ground .n2{left:23%;top:19%}.ground .n3{left:41%;top:19%}
  .ground .n4{left:23%;top:44%}.ground .n5{left:59%;top:44%}.ground .n6{left:77%;top:44%}
  .ground .n7{left:41%;top:71%}.ground .n8{left:59%;top:71%}.ground .n9{left:77%;top:64%}
  @keyframes an-node{0%{transform:scale(.85);opacity:.5}50%{transform:scale(1.3);opacity:1}100%{transform:scale(.85);opacity:.5}}
  @keyframes an-pan{0%{transform:translate3d(-1.2%,-.8%,0)}50%{transform:translate3d(1.2%,.8%,0)}100%{transform:translate3d(-1.2%,-.8%,0)}}
  .ground .edge{background-image:repeating-linear-gradient(90deg, rgba(180,174,255,.9) 0 3px, rgba(143,139,255,.34) 3px 8px, transparent 8px 22px)}
  .ground .edge.v{background-image:repeating-linear-gradient(180deg, rgba(180,174,255,.9) 0 3px, rgba(143,139,255,.34) 3px 8px, transparent 8px 22px)}
  .ground .node{animation:an-node 7s ease-in-out infinite;will-change:transform,opacity}
  .ground .flow{animation:an-pan 150s ease-in-out infinite;will-change:transform}
  .ground .flow span:nth-child(2){animation-delay:-.6s}
  .ground .flow span:nth-child(3){animation-delay:-1.2s}
  .ground .flow span:nth-child(4){animation-delay:-1.8s}
  .ground .flow span:nth-child(5){animation-delay:-2.4s}
  .ground .flow span:nth-child(6){animation-delay:-3s}
  .ground .flow span:nth-child(7){animation-delay:-3.6s}
  .ground .flow span:nth-child(8){animation-delay:-4.2s}
  .ground .flow span:nth-child(10){animation-delay:-1.1s}
  .ground .flow span:nth-child(11){animation-delay:-2.2s}
  .ground .flow span:nth-child(12){animation-delay:-3.3s}
  .ground .flow span:nth-child(13){animation-delay:-4.4s}
  .ground .flow span:nth-child(14){animation-delay:-5.5s}
  .ground .flow span:nth-child(15){animation-delay:-1.6s}
  .ground .flow span:nth-child(16){animation-delay:-2.7s}
  .ground .flow span:nth-child(17){animation-delay:-3.8s}
  @media(max-width:47.99rem){.hero{padding-block:2.25rem}.hero h1{font-size:clamp(1.95rem,8.5vw,2.75rem)}.hero2{gap:1.25rem}.hero .pointlist{display:none}}
  .page{position:relative; z-index:1}

  a{color:inherit; text-decoration:inherit}
  img{max-width:100%; display:block}

  /* ---------- layout ---------- */
  .wrap{max-width:72rem; margin-inline:auto; padding-inline:1.25rem}
  @media(min-width:40rem){.wrap{padding-inline:2rem}}
  .section{padding-block:5.75rem; border-top:1px solid var(--line); scroll-margin-top:6rem}
  @media(min-width:40rem){.section{padding-block:8rem}}
  @media(min-width:64rem){.section{padding-block:10rem}}
  .stack{display:flex; flex-direction:column; gap:1rem}
  .grid2{display:grid; gap:1.5rem}
  @media(min-width:48rem){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .grid3{display:grid; gap:1.5rem}
  @media(min-width:48rem){.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}

  /* ---------- type ----------
     v3: a display face with character for headlines (Space Grotesk), a body
     face that is easy to read at length (Inter), and an accent colour used on
     the words that should pop. No motion. */
  .eyebrow{
    margin:0; text-transform:uppercase; letter-spacing:.28em;
    color:var(--accent-warm); font-size:.7rem; font-weight:600;
    font-family:var(--font-display);
  }
  h1,h2,h3{
    color:var(--heading);
    font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
    line-height:1.02; text-wrap:balance; margin:0;
  }
  h1{font-size:clamp(2.6rem,7vw,5rem); max-width:min(44rem,100%)}
  h2{font-size:clamp(2rem,4.4vw,3.4rem); font-weight:600; line-height:1.05; max-width:min(44rem,100%)}
  h3{font-size:clamp(1.2rem,1.8vw,1.5rem); font-weight:600; letter-spacing:-.02em; line-height:1.2}
  p{margin:0; text-wrap:pretty}
  .lede{font-size:clamp(1.1rem,1.7vw,1.4rem); color:var(--starlight-dim); max-width:36rem; line-height:1.55}
  .body{color:var(--starlight-dim); max-width:38rem; font-size:1.0625rem; line-height:1.65}
  .small{font-size:.9375rem; color:var(--starlight-dim); max-width:38rem; line-height:1.6}
  .tiny{font-size:.8125rem; color:var(--steel)}
  .rule{width:4.5rem; height:1px; background:var(--accent); border:0; margin:0}

  /* words that pop, in the logo's own indigo family */
  .hl{
    background-image:linear-gradient(100deg,var(--metal-bright) 0%,var(--accent-bright) 72%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:var(--accent-bright);padding-bottom:0.16em;--vt-autofix:gradient-text-descender-clipping;
  }
  .hl-solid{color:var(--accent-warm)}

  /* ---------- header ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--line);
    background-color:rgba(5,6,28,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .bar{
    max-width:72rem; margin-inline:auto; padding-inline:1.25rem;
    height:4.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  @media(min-width:40rem){.bar{padding-inline:2rem}}
  .brand{display:flex; align-items:center; gap:.625rem; min-width:0; font-size:.875rem; font-weight:500; letter-spacing:.025em}
  .mark{width:2rem; height:2rem; flex:none}
  .navlinks{display:none; align-items:center; gap:1.25rem; margin-left:auto}
  @media(min-width:64rem){.navlinks{display:flex}}
  .navlinks a{font-size:.875rem; color:var(--starlight-dim); padding:.25rem 0}
  .navlinks a:hover{color:var(--starlight)}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    border:0; cursor:pointer; font:inherit; font-size:.9375rem; font-weight:500;
    padding:.8rem 1.4rem; border-radius:min(calc(var(--radius) * .8),10px);
    text-align:center;
  }
  .btn-primary{
    background:var(--accent-warm); color:var(--accent-warm-ink);
    box-shadow:inset 0 0 0 1px var(--accent-warm), 0 10px 30px -12px var(--accent-warm);
  }
  .btn-primary:hover{background:var(--accent-warm-hi); box-shadow:inset 0 0 0 1px var(--accent-warm-hi), 0 12px 34px -12px var(--accent-warm)}
  .btn-ghost{
    background:transparent; color:var(--starlight);
    box-shadow:inset 0 0 0 1px var(--line-strong);
  }
  .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--metal-bright), 0 0 28px var(--glow)}
  .btn-sm{padding:.6rem 1.05rem; font-size:.875rem}
  :focus-visible{outline:1px solid var(--metal-bright); outline-offset:3px; border-radius:2px}

  /* ---------- hero ---------- */
  .hero{min-height:calc(100svh - 4.25rem); display:flex; align-items:center; padding-block:4.5rem}
  .hero .stack{gap:1.25rem}
  .cta-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.5rem}

  /* ---------- cards ---------- */
  .card{
    background:rgba(14,15,69,.55); border:1px solid rgba(226,222,255,.10);
    border-radius:14px; padding:clamp(1rem,3vw,1.75rem);
  }
  .card h3{margin-bottom:.5rem}
  .card ul{margin:.75rem 0 0; padding-left:1.1rem; color:var(--starlight-dim); font-size:.9375rem}
  .card li{margin-bottom:.3rem}
  .num{
    color:var(--starlight-dim); font-size:.8125rem; letter-spacing:.22em; font-weight:500;
    display:block; margin-bottom:.6rem;
  }

  /* ---------- placeholders: a decision, not a design ---------- */
  .todo{
    border:1px dashed var(--metal-bright); border-radius:10px;
    padding:.9rem 1rem; background:rgba(168,159,145,.05);
  }
  .todo .tag{
    display:inline-block; font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--metal-bright); border:1px solid var(--line-strong); border-radius:9999px;
    padding:.15rem .55rem; margin-bottom:.5rem;
  }
  .todo p{color:var(--starlight-dim); font-size:.875rem; max-width:38rem}
  .banner{
    border-bottom:1px solid var(--line); background:var(--void-elevated);
  }
  .banner .wrap{padding-block:1rem}
  .banner h2{font-size:.9375rem; letter-spacing:0; font-weight:500}
  .banner ul{margin:.5rem 0 0; padding-left:1.1rem; color:var(--starlight-dim); font-size:.875rem}
  .banner li{margin-bottom:.2rem}

  /* ---------- form ---------- */
  .field{
    width:100%; background-color:var(--void-elevated); color:var(--starlight);
    border:1px solid var(--line-strong); border-radius:.5rem; padding:.7rem .8rem; font:inherit;
  }
  .field::placeholder{color:var(--steel)}
  .field:focus-visible{border-color:var(--metal-bright); outline:1px solid var(--metal); outline-offset:2px}
  label{display:block; font-size:.8125rem; font-weight:500; margin-bottom:.35rem}
  .field-row{display:flex; flex-direction:column; gap:.35rem}
  .req{color:var(--metal)}
  .hint{font-size:.8125rem; color:var(--starlight-dim)}

  /* ---------- faq ---------- */
  details{border-top:1px solid var(--line); padding-block:1rem}
  details:last-of-type{border-bottom:1px solid var(--line)}
  summary{cursor:pointer; font-size:1.0625rem; color:var(--starlight); list-style:none}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; float:right; color:var(--metal)}
  details[open] summary::after{content:"–"}
  details .answer{padding-top:.75rem; color:var(--starlight-dim); font-size:.9375rem; max-width:38rem}

  /* ---------- footer ---------- */
  footer.site{border-top:1px solid var(--line); padding-block:3rem 4rem}
  .foot-grid{display:grid; gap:1.5rem}
  @media(min-width:48rem){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
  footer .brand{margin-bottom:.75rem}
  footer h3{font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-bottom:.6rem; font-weight:500}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
  footer a{color:var(--starlight-dim); font-size:.9375rem}
  footer a:hover{color:var(--starlight); text-decoration:underline; text-underline-offset:.22em}
  .colophon{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:.8125rem; color:var(--steel)}

  .skip{position:absolute; top:-4rem; left:1rem; z-index:80; background:var(--starlight); color:var(--void);
        border-radius:9999px; padding:.6rem 1rem; font-size:.875rem; font-weight:600}
  .skip:focus{top:1rem}

  @media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

.cardlink{color:var(--starlight); font-size:.9375rem; text-decoration:underline; text-underline-offset:.22em}
.cardlink:hover{color:var(--metal-bright)}

/* ============================================================================
   v2 CONVERSION LAYER - added 2026-10-14 on Ali's brief:
   "high converting, contrasting, buttons that pop, sell the result."
   Still no motion. Still one palette.
   ============================================================================ */

/* --- buttons that pop -------------------------------------------------- */
.btn-primary{font-weight:600}
.btn-primary:hover{background:var(--accent-warm-hi)}
.btn-lg{padding:1.05rem 1.9rem; font-size:1.0625rem}
.btn-xl{padding:1.1rem 1.75rem; font-size:1.125rem; width:100%}

/* --- hero: copy left, capture form right ------------------------------- */
.hero2{display:grid; gap:2.25rem; align-items:start}
@media(min-width:64rem){.hero2{grid-template-columns:1.12fr .88fr; gap:3.5rem; align-items:center}}
.hero{padding-block:3.5rem}
@media(min-width:40rem){.hero{padding-block:4.5rem}}
.pointlist{list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.pointlist li{display:flex; gap:.6rem; align-items:flex-start; color:var(--starlight); font-size:1rem}
.pointlist .tick{color:var(--accent-warm); flex:none; font-size:1rem; line-height:1.5}

/* --- the capture card -------------------------------------------------- */
.formcard{
  background:var(--void-elevated);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:clamp(1.15rem,3vw,1.75rem);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.formcard h3{font-size:1.125rem; margin-bottom:.35rem}
.formcard .sub{font-size:.875rem; color:var(--starlight-dim); margin-bottom:1.1rem}
.formcard .field{background:var(--void-panel); border-color:var(--line-strong); color:var(--starlight)}
.formcard .field::placeholder{color:var(--steel)}
.formcard .btn{margin-top:.25rem}
.formcard .micro{font-size:.8125rem; color:var(--steel); margin-top:.75rem}
.afterform{color:var(--starlight-dim); font-size:.875rem; margin-top:.9rem}

/* --- outcome blocks ---------------------------------------------------- */
.results{display:grid; gap:1.25rem}
@media(min-width:40rem){.results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.results{grid-template-columns:repeat(4,minmax(0,1fr))}}
.result{border-top:2px solid var(--metal); padding-top:1rem}
.result strong{display:block; font-size:1.1875rem; font-weight:500; letter-spacing:-.01em; color:var(--starlight); margin-bottom:.35rem}
.result span{color:var(--starlight-dim); font-size:.9375rem; display:block}

/* --- alternating surfaces so the page has contrast and rhythm ---------- */
.surface{background-color:rgba(14,15,69,.55)}
.tint{border:1px solid var(--line-strong); background-color:rgba(14,15,69,.55); border-radius:14px}

.link-quiet{color:var(--starlight); text-decoration:underline; text-underline-offset:.22em}
.link-quiet:hover{color:var(--metal-bright)}


/* --- the real logo: /uploads/an-logo.png ---------------------------------
   720x720 RGB, NO ALPHA CHANNEL - it is opaque artwork, so it carries its own
   navy field. The badge below sets the same navy as its background so the
   square edge disappears into the page instead of reading as a box. -------- */
.logo-badge{
  display:block; flex:none; width:2.25rem; height:2.25rem;
  border-radius:9px; background-color:var(--logo-navy); object-fit:cover;
}
.logo-lg{width:3rem; height:3rem; border-radius:11px}

/* --- section-level card heading (the hero capture card is a section, so it
       needs an H2 for heading order, but must not shout like a page heading) -- */
.card-title{font-size:1.125rem; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin-bottom:.35rem}

/* --- 7th card: trades / home services, treated as the featured vertical ----
   Full width so the 2-column grid stays clean with seven cards, and the accent
   border marks it as the one we can deliver fastest. No motion. ------------ */
.card-wide{grid-column:1 / -1}
.card-feature{border-color:var(--accent); background-color:rgba(111,106,248,.08)}
.card-feature .cardlink{color:var(--accent-bright)}

/* --- booking slot: holds the Votel booking widget (or the fallback link) ---- */
.bookslot{
  border:1px solid var(--line-strong); border-radius:14px;
  background-color:rgba(14,15,69,.55); padding:clamp(1.1rem,3vw,1.6rem);
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
}
.bookslot-note{color:var(--starlight-dim); font-size:.9375rem; max-width:38rem; margin:0}
.bookslot .btn{align-self:flex-start}

/* ---------- line art ---------- */
.ico{display:inline-block;width:1.4rem;height:1.4rem;margin-bottom:.7rem}
.ico svg{width:100%;height:100%;fill:none;stroke:var(--accent-warm);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.result .ico{display:block}
.heroart{display:block;width:min(100%,24rem);margin-top:1.5rem}
.heroart svg{width:100%;height:auto;fill:none;stroke:var(--starlight-dim);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
@media(max-width:47.99rem){.heroart{display:none}}