/* Work page: extends the shared Ambitious Minds design system. */
.work-header { position: relative; background: var(--paper); }
.work-hero { padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: 2rem; min-height: 26rem; display: flex; flex-direction: column; justify-content: space-between; }
.work-hero__eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--ink-soft); font-size: .69rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.work-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); gap: 3rem; align-items: end; margin: 0 0 4.5rem; }
.work-intro h2, .projects h2, .work-principles h2, .work-cta h2 { margin: 0; letter-spacing: -.06em; line-height: .98; font-weight: 610; }
.work-hero h1 { max-width: 40rem; margin: 1.4rem 0 1.6rem; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: .98; letter-spacing: -.045em; font-weight: 560; }
.work-hero h1 em, .work-intro h2 em, .work-principles h2 em { font-weight: 390; color: var(--teal); }
.work-hero__intro { max-width: 25rem; color: #3d4a53; font-size: 1.05rem; line-height: 1.7; }
.work-scroll { width: fit-content; padding-bottom: .55rem; border-bottom: 1px solid var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.work-scroll span { margin-left: 1rem; color: var(--teal); font-size: 1.1rem; }
.work-intro { display: grid; grid-template-columns: minmax(12rem, .63fr) minmax(0, 1.37fr); gap: 2rem; padding-top: clamp(5rem, 10vw, 10rem); padding-bottom: clamp(5rem, 10vw, 10rem); background: #f2f3ed; }
.work-intro h2, .projects h2 { font-size: clamp(2.4rem, 5vw, 5.5rem); }
.work-principles h2 { font-size: clamp(1.9rem, 3.2vw, 3.6rem); }
.work-intro div > p { max-width: 39rem; margin: 2.2rem 0 0; color: #3d4a53; font-size: clamp(1rem, 1.6vw, 1.24rem); line-height: 1.72; }
.projects { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(5rem, 10vw, 9rem); }
.projects h2 span { color: var(--teal); font-weight: 390; font-style: italic; }
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "cameron cameron cameron"
    "riverkeepers pharma crm"
    "wave bravabird crm"
    "travel travel sloflow"
    "boynelodge boynelodge sagkeeng";
  gap: 1.25rem;
}
.card-cameron { grid-area: cameron; }
.card-crm { grid-area: crm; }
.card-riverkeepers { grid-area: riverkeepers; }
.card-pharma { grid-area: pharma; }
.card-wave { grid-area: wave; }
.card-bravabird { grid-area: bravabird; }
.card-travel { grid-area: travel; }
.card-sloflow { grid-area: sloflow; }
.card-boynelodge { grid-area: boynelodge; }
.card-sagkeeng { grid-area: sagkeeng; }
.project-card { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; min-height: 0; transition: transform .35s var(--ease), box-shadow .35s ease; }
.project-card:hover { transform: translateY(-.45rem); box-shadow: 0 1rem 2.5rem rgba(11,35,64,.1); }
.project-card__visual { position: relative; min-height: 18rem; overflow: hidden; display: grid; place-items: center; }
.project-card__visual > span { position: relative; z-index: 2; font-size: clamp(3rem, 6vw, 5.6rem); letter-spacing: -.09em; font-weight: 300; }
.project-card__visual .visual-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card-cameron .project-card__visual { min-height: 0; aspect-ratio: 16 / 9; }
.card-travel .project-card__visual { min-height: 0; aspect-ratio: 2 / 1; }
.project-card__body { display: flex; flex: 1; flex-direction: column; padding: 2rem; }
.project-card__meta { margin: 0 0 .85rem; color: var(--teal); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.project-card h3 { max-width: 32rem; margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.3rem); line-height: 1.06; letter-spacing: -.045em; font-weight: 600; }
.project-card__body > p:not(.project-card__meta) { max-width: 35rem; margin: 1.4rem 0 1.8rem; color: #46535b; line-height: 1.64; }
.project-card ul { display: flex; flex-wrap: wrap; gap: .45rem .5rem; margin: auto 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.project-card li { color: #667179; font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.project-card li:not(:last-child)::after { content: '·'; margin-left: .5rem; color: var(--amber); }
.project-card__link { width: fit-content; margin-top: 1.15rem; color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }.project-card__link span { margin-left: .35rem; color: var(--teal); font-size: 1rem; }.project-card__link:hover { color: var(--teal); }
.card-cameron .project-card__body, .card-travel .project-card__body, .card-boynelodge .project-card__body { padding: clamp(2rem, 4vw, 3rem); }
.card-cameron h3, .card-travel h3, .card-boynelodge h3 { max-width: none; }
.card-cameron .project-card__body > p:not(.project-card__meta), .card-travel .project-card__body > p:not(.project-card__meta), .card-boynelodge .project-card__body > p:not(.project-card__meta) { max-width: none; }
.card-crm .project-card__visual { flex: 1 1 auto; min-height: 22rem; }
.project-card__visual--bravabird .visual-photo { object-position: center; }
.project-card__visual--boynelodge .visual-photo { object-position: center; }
.project-card__visual--boynelodge { background: #f7eee9; }
.project-card__visual--sagkeeng { background: #fbe9df; }
.project-card__visual--sagkeeng .visual-mark { position: relative; z-index: 1; width: 55%; max-width: 14rem; height: auto; }
.project-card__visual--cameron { background: #ede7dd; color: #342a27; }
.project-card__visual--crm { background: #16293a; }
.project-card__visual--crm .visual-photo { object-position: center; }
.project-card__visual--travel { background: #112d47; }
.project-card__visual--bravabird { background: #f3efe6; }
.project-card__visual--riverkeepers { background: #e9e2d3; }
.project-card__visual--pharma { background: #e7ecf3; }
.project-card__visual--wave { background:#213f63; }
.project-card__visual--wave .visual-photo { object-fit: cover; object-position: center; }
.project-card__visual--sloflow { background: #ecdfc8; }
.work-principles { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 9vw, 11rem); padding-top: clamp(5rem, 10vw, 10rem); padding-bottom: clamp(5rem, 10vw, 10rem); background: var(--navy); color: #fff; }
.work-principles .kicker { color: rgba(255,255,255,.55); }.work-principles h2 em { color: var(--sand); }
.work-principles ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }.work-principles li { display:grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; padding: 1.75rem 0; border-bottom: 1px solid rgba(255,255,255,.2); }.work-principles li > span { color: var(--sand); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }.work-principles h3 { margin: 0; font-size: 1.28rem; }.work-principles li p { margin: .45rem 0 0; color: rgba(255,255,255,.62); }
.work-cta { position: relative; overflow:hidden; padding: clamp(5rem, 10vw, 9rem) 0; background: #fff; color:var(--ink); }.work-cta__art { position:absolute; right:-8rem; bottom:-6rem; width:44rem; max-width:60vw; height:auto; pointer-events:none; opacity:.9; }.work-cta .section { position:relative; z-index:1; }.work-cta p { margin:0 0 .8rem; color: var(--ink-soft); font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.work-cta h2 { max-width:50rem; margin-bottom:1.4rem; font-size:clamp(2.2rem,4.2vw,4.6rem); }.work-cta h2 span { color:var(--teal); font-weight:390; font-style:italic; }
.work-footer { display:grid; grid-template-columns:1.3fr 1fr .75fr; gap:3rem; padding-top:3.5rem; padding-bottom:3.5rem; background:var(--navy); color:#fff; border-top:1px solid rgba(255,255,255,.16); }
@media (max-width: 700px) { .work-hero { min-height: 34rem; }.work-hero__grid, .work-intro, .work-principles { grid-template-columns: 1fr; }.work-hero__grid { gap: 2rem; margin: 3rem 0; }.project-grid { grid-template-columns: 1fr; grid-template-areas: none; }.project-card { display:flex; }.project-card__visual, .card-cameron .project-card__visual, .card-travel .project-card__visual, .card-crm .project-card__visual { min-height: 15rem; aspect-ratio: auto; flex: 0 0 auto; }.project-card__body, .card-cameron .project-card__body, .card-travel .project-card__body, .card-boynelodge .project-card__body, .card-crm .project-card__body { padding: 1.5rem; flex: 1 1 auto; }.work-footer { grid-template-columns:1fr; }.work-footer .footer__legal { align-items:flex-start; } }