/* House of Carol — catalogue experience redesign — 2026-09-15
   Customer-facing visual hierarchy only. Internal engines and lifecycle language stay backstage. */

/* Shared visual hero */
.catalogue-hero{overflow:hidden}
.catalogue-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:56px;align-items:center}
.catalogue-hero-copy{min-width:0}
.catalogue-hero-copy .lede{max-width:720px}
.catalogue-hero-visual{margin:0;min-width:0;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--stone);box-shadow:0 20px 50px rgba(8,29,45,.12)}
.catalogue-hero-visual img{display:block;width:100%;height:100%;object-fit:cover}
.catalogue-hero-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:24px}
.catalogue-hero-actions .text-link{font-weight:800;text-decoration-thickness:2px;text-underline-offset:4px}

/* Main service-area directory: the photograph is part of the card at every size. */
.catalogue-index-page .service-directory{background:#fff}
.catalogue-index-page .service-directory h2{max-width:800px}
.catalogue-index-page .area-directory{margin-top:30px;border-top:1px solid var(--line)}
.catalogue-index-page .area-entry{padding:0;background:#fff;border-bottom:1px solid var(--line)}
.catalogue-index-page .area-entry:nth-child(even){background:var(--pale)}
.catalogue-index-page .area-card-link{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr);gap:34px;align-items:center;padding:30px 0;color:inherit;text-decoration:none}
.catalogue-index-page .area-card-visual{grid-column:1;grid-row:1;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--stone);box-shadow:0 8px 22px rgba(8,29,45,.08)}
.catalogue-index-page .area-card-visual img{display:block;width:100%;height:100%;object-fit:cover}
.catalogue-index-page .area-card-copy{grid-column:2;grid-row:1;min-width:0}
.catalogue-index-page .area-card-copy h3{font-size:clamp(24px,2.4vw,32px);line-height:1.12;margin:4px 0 10px;max-width:24ch;color:var(--carol-blue)}
.catalogue-index-page .area-card-copy p{max-width:58ch;margin:0;color:#31404A}
.catalogue-index-page .area-cue{display:inline-block;margin-top:16px;font-weight:800;color:var(--carol-blue);border-bottom:2px solid var(--carol-blue);line-height:1.35}
@media (hover:hover) and (pointer:fine){.catalogue-index-page .area-card-link:hover .area-card-visual img{transform:scale(1.025)}.catalogue-index-page .area-card-visual img{transition:transform .22s ease}}

/* Category pages: one service list, not a problem list followed by the same services again. */
.area-catalogue-page .catalogue-hero>.shell{padding-top:58px;padding-bottom:58px}
.area-catalogue-page .category-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);gap:48px;align-items:center}
.area-catalogue-page .category-hero-visual{margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--stone);box-shadow:0 16px 40px rgba(8,29,45,.1)}
.area-catalogue-page .category-hero-visual img{display:block;width:100%;height:100%;object-fit:cover}
.area-catalogue-page .area-catalogue{background:#fff}
.area-catalogue-page .service-family-intro{max-width:760px;margin:0 0 26px;color:#31404A;font-size:18px;line-height:1.6}
.area-catalogue-page .service-list{border-top:1px solid var(--line)}
.area-catalogue-page .service-entry{background:#fff}
.area-catalogue-page .service-entry:nth-child(even){background:var(--pale)}
.area-catalogue-page .service-card-link{padding:26px 0;color:inherit;text-decoration:none}
.area-catalogue-page .service-card-heading h3{margin:0 0 7px}
.area-catalogue-page .service-card-copy>p{color:#31404A}

/* Visual operations service rows */
.operations-catalogue-page .service-entry-visual .service-card-link{display:grid;grid-template-columns:190px minmax(210px,.75fr) minmax(0,1.25fr);gap:28px;align-items:center;padding:24px 0}
.operations-catalogue-page .service-card-visual{grid-column:1;grid-row:1;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--stone)}
.operations-catalogue-page .service-card-visual img{display:block;width:100%;height:100%;object-fit:cover}
.operations-catalogue-page .service-card-heading{grid-column:2;grid-row:1;min-width:0}
.operations-catalogue-page .service-card-copy{grid-column:3;grid-row:1;min-width:0}

/* AI category: clusters organise without duplicating service choices. */
.service-cluster{padding:0 0 26px}
.service-cluster+.service-cluster{padding-top:34px;border-top:1px solid var(--stone)}
.service-cluster-head{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:36px;align-items:start;margin-bottom:8px}
.service-cluster-head h2{font-size:clamp(28px,3vw,38px);margin:0}
.service-cluster-head p{margin:2px 0 0;color:#31404A;max-width:62ch}

/* Worked examples are explicit illustrations, never manufactured client proof. */
.worked-examples{background:var(--mist)}
.worked-examples-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:end;margin-bottom:28px}
.worked-examples-head h2{margin:0}
.worked-examples-head p{margin:0;max-width:62ch;color:#31404A}
.worked-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.worked-example-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--stone);min-width:0}
.worked-example-card figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--stone)}
.worked-example-card figure img{display:block;width:100%;height:100%;object-fit:cover}
.worked-example-card-copy{padding:22px 22px 24px;display:flex;flex:1;flex-direction:column}
.worked-example-card .eyebrow{margin-bottom:7px}
.worked-example-card h3{font-size:22px;line-height:1.25;margin:0 0 10px}
.worked-example-card p{color:#31404A;margin:0 0 16px}
.worked-example-card a{font-weight:800;margin-top:auto;text-decoration-thickness:2px;text-underline-offset:3px}
.example-disclosure{font-size:14px;color:var(--muted)!important}

/* Closing invitation */
.catalogue-index-page .problem .content-grid,.area-catalogue-page .problem .content-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:46px}

@media(max-width:1100px){
  .catalogue-hero-grid,.area-catalogue-page .category-hero-grid{grid-template-columns:1fr;gap:28px}
  .catalogue-hero-visual,.area-catalogue-page .category-hero-visual{aspect-ratio:16/9}
  .catalogue-index-page .area-card-link{grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:26px;padding:26px 0!important}
  .catalogue-index-page .area-card-visual{display:block!important}
  .operations-catalogue-page .service-entry-visual .service-card-link{grid-template-columns:160px minmax(0,1fr);gap:22px}
  .operations-catalogue-page .service-card-visual{grid-column:1;grid-row:1 / span 2}
  .operations-catalogue-page .service-card-heading{grid-column:2;grid-row:1}
  .operations-catalogue-page .service-card-copy{grid-column:2;grid-row:2}
  .worked-example-grid{grid-template-columns:1fr 1fr}.worked-example-card:last-child{grid-column:1 / -1}
}

@media(max-width:760px){
  .catalogue-hero>.shell,.area-catalogue-page .catalogue-hero>.shell{padding:40px 22px 44px!important}
  .catalogue-hero h1,.area-catalogue-page .catalogue-hero h1{font-size:clamp(36px,10vw,48px)!important}
  .catalogue-hero .lede,.area-catalogue-page .catalogue-hero .lede{font-size:19px}
  .catalogue-index-page .service-directory .shell{padding-left:20px;padding-right:20px}
  .catalogue-index-page .area-directory{margin-left:-20px;margin-right:-20px}
  .catalogue-index-page .area-card-link{grid-template-columns:1fr!important;gap:0!important;padding:0!important}
  .catalogue-index-page .area-card-visual{grid-column:1;grid-row:1;width:100%;aspect-ratio:16/8;border-radius:0;box-shadow:none}
  .catalogue-index-page .area-card-copy{grid-column:1;grid-row:2;padding:22px 20px 26px}
  .catalogue-index-page .area-card-copy h3{font-size:25px}
  .operations-catalogue-page .service-entry-visual .service-card-link{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:0!important}
  .operations-catalogue-page .service-card-visual{grid-column:1;grid-row:1;width:100%;aspect-ratio:16/8;border-radius:0;margin:0}
  .operations-catalogue-page .service-card-heading{grid-column:1;grid-row:2;padding:20px 20px 0}
  .operations-catalogue-page .service-card-copy{grid-column:1;grid-row:3;padding:8px 20px 24px;margin:0!important}
  .operations-catalogue-page .service-list{margin-left:-20px;margin-right:-20px}
  .operations-catalogue-page .area-catalogue>.shell{padding-left:20px;padding-right:20px}
  .service-cluster-head,.worked-examples-head{grid-template-columns:1fr;gap:8px}
  .worked-example-grid{grid-template-columns:1fr}.worked-example-card:last-child{grid-column:auto}
  .catalogue-index-page .problem .content-grid,.area-catalogue-page .problem .content-grid{grid-template-columns:1fr!important;gap:18px!important}
}

@media(max-width:390px){
  .catalogue-index-page .service-directory .shell,.operations-catalogue-page .area-catalogue>.shell{padding-left:18px;padding-right:18px}
  .catalogue-index-page .area-directory,.operations-catalogue-page .service-list{margin-left:-18px;margin-right:-18px}
  .catalogue-index-page .area-card-copy,.operations-catalogue-page .service-card-heading{padding-left:18px;padding-right:18px}
  .operations-catalogue-page .service-card-copy{padding-left:18px;padding-right:18px}
}