/* AIIMS redesign · Creator Hub fixes (8 Oct 2026, QA fixes 9 Oct). Copy and markup unchanged; layout only.
   Sections 1 and 2 were built with Tailwind utilities that are not in the compiled theme.css
   (sm:grid-cols-2, h-[650px], md:col-span-8/4, md:px-12 …) and an image slot with no image,
   so they collapsed on the live page. Section 3 holds the QA fixes (behaviour is in pages.js). */

/* ── 0 · Tailwind utilities missing from the compiled theme.css (generated by _tools/build/tw_missing.py from
   the theme's tailwind.config.js; do not edit by hand). At theme carry-over, recompile theme.css instead. ── */
.bg-neutral-700{--tw-bg-opacity:1;background-color:rgb(73 80 87/var(--tw-bg-opacity))}
.border-neutral-600{--tw-border-opacity:1;border-color:rgb(108 117 125/var(--tw-border-opacity))}
.border-white\/40{border-color:rgb(255 255 255/0.4)}
.gap-px{gap:1px}
.gap-y-3{row-gap:0.75rem}
.h-\[420px\]{height:420px}
.hover\:underline:hover{text-decoration-line:underline}
.leading-\[0\.92\]{line-height:0.92}
.leading-\[0\.94\]{line-height:0.94}
.leading-relaxed{line-height:1.625}
.max-w-\[900px\]{max-width:900px}
.mb-14{margin-bottom:3.5rem}
.min-h-\[250px\]{min-height:250px}
.min-h-\[310px\]{min-height:310px}
.min-h-\[540px\]{min-height:540px}
.mt-2{margin-top:0.5rem}
.text-stone-500{--tw-text-opacity:1;color:rgb(120 113 108/var(--tw-text-opacity))}
.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity))}
.text-white\/90{color:rgb(255 255 255/0.9)}
.tracking-\[0\.12em\]{letter-spacing:0.12em}
.tracking-\[0\.16em\]{letter-spacing:0.16em}
.tracking-\[0\.18em\]{letter-spacing:0.18em}
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-8{grid-column:span 8/span 8}.md\:gap-6{gap:1.5rem}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:h-\[650px\]{height:650px}.md\:p-9{padding:2.25rem}.md\:mb-24{margin-bottom:6rem}}
@media (min-width:1024px){.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:gap-16{gap:4rem}.lg\:gap-20{gap:5rem}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:pb-3{padding-bottom:0.75rem}.lg\:pt-3{padding-top:0.75rem}}
@media (min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:p-12{padding:3rem}.xl\:p-16{padding:4rem}.xl\:pb-\[180px\]{padding-bottom:180px}.xl\:text-\[104px\]{font-size:104px}.xl\:text-\[72px\]{font-size:72px}.xl\:text-\[88px\]{font-size:88px}.xl\:text-\[92px\]{font-size:92px}}
/* ── /0 ── */


/* ── 1 · Consultation and development ───────────────────────────────────────────────
   Was: copy in the left half of the container next to an empty media column; the list kept
   browser bullets that hung outside its hairlines.
   Now: the same copy runs across the 1462 container on a 12-column grid:
   kicker + headline left (7/12) with the lead paragraph bottom-aligned on the right (5/12),
   then the second paragraph + CTA left (5/12) and the list in two hairline columns right (6/12).
   ("Built for the whole idea" asks for the same 7/5 split, but its lg:grid-cols-12 / lg:col-span-*
   utilities are not compiled either, so today it renders as a single column.) */
#consultation-development > .container > .grid{display:block}
#consultation-development > .container > .grid > div:last-child{display:none}           /* empty image slot */
#consultation-development > .container > .grid > div:first-child{display:grid;grid-template-columns:minmax(0,1fr)}
#consultation-development ul{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px}
#consultation-development ul > li{list-style:none;margin:0;padding:14px 0;border-top:1px solid rgba(14,14,14,.15)}
#consultation-development ul > li:last-child{border-bottom:1px solid rgba(14,14,14,.15)}
@media (min-width:640px){
  #consultation-development ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  #consultation-development ul > li:nth-last-child(2){border-bottom:1px solid rgba(14,14,14,.15)}
}
@media (min-width:1024px){
  #consultation-development > .container > .grid > div:first-child{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:64px}
  #consultation-development .grid > div:first-child > p:nth-of-type(1){grid-column:1/8;grid-row:1}          /* kicker */
  #consultation-development .grid > div:first-child > h2{grid-column:1/8;grid-row:2;margin-bottom:0}
  #consultation-development .grid > div:first-child > p:nth-of-type(2){grid-column:8/13;grid-row:1/3;align-self:end;margin-bottom:0}
  #consultation-development .grid > div:first-child > p:nth-of-type(3){grid-column:1/6;grid-row:3;margin-top:80px;margin-bottom:40px}
  #consultation-development .grid > div:first-child > ul{grid-column:7/13;grid-row:3/5;align-self:start;margin:80px 0 0}
  #consultation-development .grid > div:first-child > a{grid-column:1/6;grid-row:4;justify-self:start;align-self:start}
}

/* ── 2 · "make it real / One team. More ways to create." band ──────────────────────────
   Was: the empty image tile collapsed and the grey card stretched edge to edge (48px side
   padding) with short copy hugging the left.
   Now: the card sits on the 1462 container, 4px corners, with the script + headline left and
   the paragraph + CTA bottom-aligned on the right; stacked on mobile. */
.ahp-page section:has(+ #creatorhubform){padding-left:0;padding-right:0}
.ahp-page section:has(+ #creatorhubform) > .grid{display:block;width:100%;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}
@media (min-width:640px){.ahp-page section:has(+ #creatorhubform) > .grid{max-width:640px}}
@media (min-width:768px){.ahp-page section:has(+ #creatorhubform) > .grid{max-width:768px}}
@media (min-width:1024px){.ahp-page section:has(+ #creatorhubform) > .grid{max-width:1024px}}
@media (min-width:1280px){.ahp-page section:has(+ #creatorhubform) > .grid{max-width:1280px}}
@media (min-width:1510px){.ahp-page section:has(+ #creatorhubform) > .grid{max-width:1510px}}
.ahp-page section:has(+ #creatorhubform) > .grid > div:first-child{display:none}         /* empty image tile */
.ahp-page section:has(+ #creatorhubform) > .grid > div:last-child{border-radius:4px;padding:40px 24px}
.ahp-page section:has(+ #creatorhubform) .font-vandalord{margin-bottom:32px}
@media (min-width:768px){
  .ahp-page section:has(+ #creatorhubform) > .grid > div:last-child{padding:64px 56px}
}
@media (min-width:1024px){
  .ahp-page section:has(+ #creatorhubform) > .grid > div:last-child{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:64px;padding:80px 64px}
  .ahp-page section:has(+ #creatorhubform) > .grid > div:last-child > div{display:contents}
  /* row 1: script | paragraph, row 2: headline | CTA, bottoms aligned */
  .ahp-page section:has(+ #creatorhubform) .font-vandalord{grid-column:1/8;grid-row:1;justify-self:start;align-self:end;margin-bottom:24px}
  .ahp-page section:has(+ #creatorhubform) h2{grid-column:1/8;grid-row:2;align-self:end;margin-bottom:0}
  .ahp-page section:has(+ #creatorhubform) h2 + p{grid-column:8/13;grid-row:1;align-self:end;margin-bottom:28px}
  .ahp-page section:has(+ #creatorhubform) .grid > div:last-child a{grid-column:8/13;grid-row:2;justify-self:start;align-self:end}
}

/* ── 3 · QA fixes (9 Oct 2026) ───────────────────────────────────────────────────────── */

/* Podcast cards ("Giving power to bigger, bolder ideas"), 768-1279: the 472px-tall tiles cropped the square
   cover art to a strip, cutting the titles baked into it; show the whole square. "Listen now" stays on one
   line; in the narrow 768-1023 cards it takes the mobile text size so the platform icons keep their size. */
@media (min-width:768px) and (max-width:1279px){.ahp-page .md\:h-\[472px\]{height:auto;aspect-ratio:1/1}}
.ahp-page .h-\[66px\] > span{white-space:nowrap}
@media (min-width:768px) and (max-width:1023px){.ahp-page .h-\[66px\]:has(a) > span{font-size:.875rem}}

/* "We have / everything", 768-1279: at 72px the script's -64px pull-up hid "We have" almost completely.
   A smaller pull keeps the intended partial overlap (below 768 and from 1280 it is unchanged). */
@media (min-width:768px) and (max-width:1279px){.ahp-page .font-vandalord.md\:-mt-16{margin-top:-1.75rem}}

/* Explore our studio */
/* the decorative "explore" script is wider than the screen at 768-1023; clip it to the section */
.ahp-page .different{overflow-x:clip}
/* image cards fill their column (at 768-1023 they shrank to the image width) */
.ahp-page .different button.group[type="button"]{width:100%}
/* studio modals: z-20 left them under the fixed header (1000) and back-to-top (999), which covered the
   close button. Page modals sit at 1002 (see pages.css). Esc and focus handling are in pages.js. */
.ahp-page .different .fixed.inset-0.z-20{z-index:1002}