/* Aran Spencer overrides on top of the Vertical theme (vertical.css). */

/* Wordmark is 10:1 (Vertical's is ~6.7:1), so it runs a touch shorter. */
.nav-logo, .nav-logo .brand-logo { height: 12px; }

/* Hero: still landscape instead of video, round portrait above the headline. */
.as-hero .media-fill { object-fit: cover; height: 100%; }
.as-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 12px 40px rgba(0,0,0,.35); }
.as-name { color: rgba(255,255,255,.7); margin-top: 8px; }
.as-lead { max-width: 620px; color: rgba(255,255,255,.82); }
@media (max-width: 767px) { .as-avatar { width: 84px; height: 84px; } }

/* Four service tiles instead of three. */
.case-studies-grid.vb-three.as-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) { .case-studies-grid.vb-three.as-four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .case-studies-grid.vb-three.as-four { grid-template-columns: 1fr; } }
.as-four .vb-division-title { font-size: 28px; }
.as-grad-1::before { background-image: url(/brand/tile-consulting.jpg?v=3); }
.as-grad-2::before { background-image: url(/brand/img/meadow-blue.jpg); }
.as-grad-3::before { background-image: url(/brand/tile-ai.jpg?v=3); }
.as-grad-4::before { background-image: url(/brand/tile-agency.jpg?v=3); }

/* About: portrait sits on black, so keep the face in frame. */
.as-portrait { object-position: 50% 25%; }
.as-stat { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.industry-item .heading-display { cursor: default; }


/* Hero: darker, quieter take on the horizon photo. */
.as-hero .section-media { background: #0d0e10; }
/* Hero image: the contact page's image and fade, mirrored. Anchored right and wide, with a long eased fade to the left
   and a soft fade in from the top, so it dissolves into the dark rather than ending on a line. */
.as-hero .section-media > .media-fill { left: auto; right: 0; width: 76%; opacity: 1; filter: none;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 22%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.84) 38%, rgba(0,0,0,.7) 46%, rgba(0,0,0,.54) 54%, rgba(0,0,0,.38) 62%, rgba(0,0,0,.24) 70%, rgba(0,0,0,.13) 78%, rgba(0,0,0,.06) 86%, rgba(0,0,0,.02) 93%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.42) 14%, rgba(0,0,0,.66) 22%, rgba(0,0,0,.86) 30%, #000 40%);
  mask-image: linear-gradient(270deg, #000 0%, #000 22%, rgba(0,0,0,.94) 30%, rgba(0,0,0,.84) 38%, rgba(0,0,0,.7) 46%, rgba(0,0,0,.54) 54%, rgba(0,0,0,.38) 62%, rgba(0,0,0,.24) 70%, rgba(0,0,0,.13) 78%, rgba(0,0,0,.06) 86%, rgba(0,0,0,.02) 93%, transparent 100%),
              linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.42) 14%, rgba(0,0,0,.66) 22%, rgba(0,0,0,.86) 30%, #000 40%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.as-hero .section-media .overlay.soft { display: none; }
.as-hero .section-media .gradient-overlay { opacity: .45; }   /* the mask already fades the image; keep just a touch for the bottom edge */
@media (max-width: 991px) {
  .as-hero .section-media > .media-fill { width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.65) 16%, #000 28%, #000 52%, rgba(0,0,0,.7) 66%, rgba(0,0,0,.35) 80%, rgba(0,0,0,.1) 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.65) 16%, #000 28%, #000 52%, rgba(0,0,0,.7) 66%, rgba(0,0,0,.35) 80%, rgba(0,0,0,.1) 92%, transparent 100%); }
}
.as-avatar { margin-bottom: 12px; }
.as-roles { max-width: 980px; text-wrap: balance; }

/* "Hello, I'm Aran." letter: one readable column, left aligned. */
.as-letter .as-letter-body { max-width: 760px; margin: 0 auto; gap: 22px; }
.as-letter .as-letter-body h2 { margin-bottom: 12px; }
.as-letter .text-large { color: rgba(255,255,255,.78); }
.text-group p.text-large { margin: 0; }

/* Story credentials: quiet pills. */
.as-creds { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.as-creds li { padding: 8px 14px; border: 1px solid rgba(18,18,18,.14); border-radius: 999px; font-size: 14px; line-height: 1.2; }


/* What I do: four service columns. */
.as-whatido { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
.as-whatido h3 { margin: 0 0 18px; }
.as-whatido ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.12); }
.as-whatido li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72); font-size: 16px; }
@media (max-width: 991px) { .as-whatido { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .as-whatido { grid-template-columns: 1fr; } }

/* Story: one reading column, credentials under it. */
.as-story-body { max-width: 760px; margin: 0 auto; gap: 22px; }
.as-story-body .text-group { gap: 22px; }
.as-story .text-large { color: rgba(18,18,18,.78); }


/* Service/sector pages: "What it covers" list in two columns. */
.as-included { width: 100%; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px 64px; }
.as-list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 40px; border-top: 1px solid rgba(255,255,255,.12); }
.as-list li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); font-size: 17px; }
@media (max-width: 991px) { .as-included { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .as-list { columns: 1; } }
.as-lead { margin: 0; }


/* Agency logo tiles: dark cards, logos knocked out to white. */
.as-logo-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.as-logo-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 0 14%; border-radius: 10px; background: #1b1b1d; border: 1px solid rgba(255,255,255,.06); transition: background-color .4s, border-color .4s; }
.as-logo-tile img { max-width: 100%; max-height: 64px; width: auto; height: auto; filter: brightness(0) invert(1); opacity: .78; transition: opacity .4s; }
.as-logo-tile:hover { background: #232326; border-color: rgba(255,255,255,.14); }
.as-logo-tile:hover img { opacity: 1; }
@media (max-width: 767px) { .as-logo-grid { grid-template-columns: 1fr; } .as-logo-tile { aspect-ratio: 16 / 7; } }
.as-logo-tile img[alt="Meticulosity"] { max-height: 112px; } /* its SVG has a wide built-in margin */
.as-logo-tile img[alt="Mint Partnership"] { max-height: 40px; }

/* Who I work with: the list clips overflow, so give the last line room for descenders (the g in Agencies). */
#who .industry-list { padding-bottom: 28px; }   /* px, not em: the list itself uses small text */

/* Closing CTA: centred, over a heavily blurred photo that fades to the footer's dark (Wonderful-style). */
.as-cta { position: relative; overflow: hidden; }
.as-cta .container { position: relative; z-index: 1; }
.as-cta .as-cta-body { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; padding: 40px 0; }
.as-cta .as-cta-body h2 { margin: 0; }

/* "You're now going to Vertical Brands" notice (aran.js). */
.as-leave { max-width: 460px; width: calc(100% - 40px); padding: 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #1b1b1d; color: #fff; }
.as-leave::backdrop { background: rgba(10,10,12,.6); backdrop-filter: blur(6px); }
.as-leave p { margin: 0 0 28px; }
.as-leave-actions { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.as-leave-stay { background: none; border: 0; padding: 0; color: rgba(255,255,255,.7); font: inherit; font-size: 15px; cursor: pointer; }
.as-leave-stay:hover { color: #fff; }
.as-leave .heading-h4 { color: #fff; }
.as-leave .button-inner, .as-leave .button-label { visibility: visible !important; opacity: 1 !important; transform: none !important; }
.as-leave [data-go] .button-inner { background: #fff !important; }
.as-leave [data-go] .button-label { color: #121212 !important; position: relative; z-index: 1; }

/* Service pages: detailed What I do grid, How it works header. */
.as-what-grid { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 64px; border-top: 1px solid rgba(255,255,255,.12); }
.as-what-item { padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.as-what-item h3 { margin: 0 0 10px; color: #fff; }
.as-what-item p { margin: 0; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.6; }
@media (max-width: 767px) { .as-what-grid { grid-template-columns: 1fr; } }
.as-how-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.as-how-head h2, .as-how-head p { margin: 0; }
.as-how-head p { color: rgba(255,255,255,.78); }
.as-how-steps { width: 100%; }
.as-what-grid.as-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .as-what-grid.as-three { grid-template-columns: 1fr; } }
.as-arrow-link { color: #fff; text-decoration: none; }
.as-arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Nav backing (aran.js): solid over plain sections once scrolled, nothing over images. */
.navigation { transition: background-color .3s ease; }
.navigation.as-nav-dark { background-color: #121212; }
.navigation.as-nav-light { background-color: #fff; }
.navigation.as-nav-dark .navigation-bar, .navigation.as-nav-light .navigation-bar { background-color: transparent; }

/* Expandable service cards ("What I do", "Signs it is time"): title + icon, description opens on click. */
.as-fold-grid { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.as-fold { border-radius: 12px; background: #1a1a1c; border: 1px solid rgba(255,255,255,.06); transition: background-color .3s, border-color .3s; }
.as-fold:hover, .as-fold[open] { background: #202023; border-color: rgba(255,255,255,.12); }
.as-fold summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; cursor: pointer; color: #fff; }
.as-fold summary::-webkit-details-marker { display: none; }
.as-fold summary h3 { margin: 0; }
.as-fold .vb-faq-icon { color: rgba(255,255,255,.7); }
.as-fold[open] .vb-faq-icon::after { transform: rotate(0deg); }
.as-fold p { margin: 0; padding: 0 28px 28px; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.65; max-width: 620px; }
@media (max-width: 767px) { .as-fold-grid { grid-template-columns: 1fr; } .as-fold summary { padding: 22px 20px; } .as-fold p { padding: 0 20px 22px; } }